Here is the example page for the YUI Chart Component blog that I have written as a tutorial for you to implement a chart from data on your website with ease. In this example you can see the code used to create the charts and how you can either use remote, static or in-page data to actually build the chart. I'm also working on a generic JavaScript chart class that will allow you to build any chart with only a few parameters. Watch this space!
And the code for this looks like:
YAHOO.namespace('chart_example');
YAHOO.chart_example.main = {
YE: YAHOO.util.Event,
Dom: YAHOO.util.Dom,
$: YAHOO.util.Dom.get,
init: function(){
// Get the chart swf file
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf";
ce.stat_page = ce.$('chart-ex');
if(ce.stat_page){
ce.puppies =
[
{ name: "Ashley", breed: "German Shepherd", age: 12 },
{ name: "Dirty Harry", breed: "Norwich Terrier", age: 5 },
{ name: "Emma", breed: "Labrador Retriever", age: 9 },
{ name: "Oscar", breed: "Yorkshire Terrier", age: 6 },
{ name: "Riley", breed: "Golden Retriever", age: 6 },
{ name: "Shannon", breed: "Greyhound", age: 12 },
{ name: "Washington" ,breed: "English Bulldog", age: 8 },
{ name: "Zoe", breed: "Labrador Retriever", age: 3 }
];
// Get the data from the page
myDataSource = new YAHOO.util.DataSource(ce.puppies);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema =
{
fields: ["name","breed","age"]
};
var myChart = new YAHOO.widget.ColumnChart(ce.stat_page, myDataSource, {
xField: "name",
yField: "age"
});
}
}
}
ce = YAHOO.chart_example.main;
ce.YE.onDOMReady(ce.init);
Below is something a little more complicated that you can do with your chart. The chart is actually a table on the page that I have used as my datasource. With a bit of JavaScript traversal we can easily get the information out of the table for our chart.
| Month | Income | Mortgage | Utilities | Finance | Other |
|---|---|---|---|---|---|
| August | 1200.00 | -350.00 | -500.00 | -250.00 | -150.00 |
| September | 1084.56 | -350.00 | -650.00 | -250.00 | -450.00 |
| October | 1224.36 | -350.00 | -360.50 | -380.12 | 50 |
| Month | Income | Mortgage | Utilities | Finance | Other |
|---|---|---|---|---|---|
| August | 1200.00 | -350.00 | -500.00 | -250.00 | -150.00 |
| September | 1084.56 | -350.00 | -650.00 | -250.00 | -450.00 |
| October | 1224.36 | -350.00 | -360.50 | -380.12 | 50 |
YAHOO.namespace('financial_chart');
YAHOO.financial_chart.main = {
YE: YAHOO.util.Event,
Dom: YAHOO.util.Dom,
$: YAHOO.util.Dom.get,
init: function(){
// Get the chart swf file
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf";
// Get details from the table in the page
var chartView = [];
var elRef = fc.$('financial-chart');
var xTitle = 'Months';
var yTitle = 'Costs';
var chartHeight = 500;
var statTr = elRef.getElementsByTagName('tr');
var statTrLen = statTr.length;
var j = 0;
var field = [];
for(var i=1;i<statTrLen;i++){
var statTd = statTr[i].getElementsByTagName('td');
var theMonth = statTd[0].innerHTML;
var income = parseFloat(statTd[1].innerHTML);
var mortgage = parseFloat(statTd[2].innerHTML);
var utilities = parseFloat(statTd[3].innerHTML);
var finance = parseFloat(statTd[4].innerHTML);
var other = parseFloat(statTd[5].innerHTML);
var net = income + (mortgage + utilities + finance + other);
chartView[j] = {
field1: theMonth,
field2: income,
field3: mortgage,
field4: utilities,
field5: finance,
field6: other,
field7: net
};
j++;
}
// Get the data from the page
myDataSource = new YAHOO.util.DataSource(chartView);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema =
{
resultsList: "Results",
fields: ["field1", "field2", "field3", "field4", "field5", "field6", "field7"]
};
var seriesDef =
[
{
yField: "field2",
displayName: "Income",
style: {
lineColor:0x666666,
lineAlpha:.5,
borderColor:0xD4C198,
fillColor:0xD1AF75
}
},
{
yField: "field3",
displayName: "Mortgage",
style: {
lineColor:0xEC0289,
lineAlpha:.5,
borderColor:0xD4C198,
fillColor:0xD1BF75
}
},
{
yField: "field4",
displayName: "Utilities",
style: {
lineColor:0x68BF28,
lineAlpha:.6,
borderColor:0xD4C198,
fillColor:0xD1CE75
}
},
{
yField: "field5",
displayName: "Finance",
style: {
lineColor:0x98292B,
lineAlpha:.6,
borderColor:0xD4C198,
fillColor:0xC5D175
}
},
{
yField: "field6",
displayName: "Other",
style: {
lineColor:0xB7C553,
lineAlpha:.6,
borderColor:0xD4C198,
fillColor:0xB5D175
}
},
{
type: "line",
yField: "field7",
displayName: "Net",
style: {
lineColor:0xF00F00,
lineAlpha:.6,
borderColor:0xD4C198,
fillColor:0xF00F00
}
}
];
var styleDef =
{
background:{color:0xFFFFFF},
border: {size: 1, color:0x654495},
xAxis:
{
labelRotation:-90
},
yAxis:
{
titleRotation:-90
},
legend:
{
display: "bottom",
padding: 10,
spacing: 5,
background:{color:0xFFFFFF},
font:
{
color:0x666666,
family: "Arial",
size: 11
}
}
}
formatCurrencyAxisLabel = function( value ){
return YAHOO.util.Number.format( value,
{
prefix: "",
thousandsSeparator: ",",
decimalPlaces: 0
});
}
//DataTip function for the chart
formatDataTipText = function(item, index, series){
var str = series.displayName + " for " + item.field1;
str += "\n£" + formatCurrencyAxisLabel(item[(series.yField)]);
return str;
}
var countAxis = new YAHOO.widget.NumericAxis();
countAxis.title = yTitle;
var dateAxis = new YAHOO.widget.CategoryAxis();
dateAxis.title = xTitle;
var mychart = new YAHOO.widget.ColumnChart(elRef, myDataSource,
{
series: seriesDef,
xField: "field1",
yAxis: countAxis,
xAxis: dateAxis,
wmode: "transparent",
dataTipFunction:formatDataTipText,
style: styleDef
});
}
}
fc = YAHOO.financial_chart.main;
fc.YE.onDOMReady(fc.init);