Charts are used for graphical representation of data. It makes understanding things easier. For representing variations, relations and comparisons of data we can use charts. Commonly used chart types are Line, Bar, Column, Area, Pie etc.
Developers can go for any of the following implementation to display charts on their web pages,
Here we will discuss about the implementation of Google Charts. Their tools have a perfect way to visualize data from simple line charts to complex hierarchical tree maps.
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(‘visualization’, ‘1.0’, {packages: [‘corechart’]});
</script>
Add a div in html body as following. We will be using this div to draw the chart.
<div id=”chart_div” style=”width: 400px; height: 400px;”></div>
Now we will go through all types of chart implementation below.
Here in drawVisualization function below, we are taking labels for X axis and corresponding values.
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
[‘x’, ‘Line 1’, ‘Line 2’],
[‘A’, 1, 1 ],
[‘B’, 2, 0.5 ],
[‘C’, 4, 1 ],
[‘D’, 8, 0.5 ]
]);
new google.visualization.LineChart(document.getElementById(‘chart_div‘)).
draw(data, {curveType: “function”,
width: 400, height: 400,
vAxis: {maxValue: 10, title:’values’},
hAxis: {title:’Lines’}
});
}
Here in this function, chart drawn into the div using values we specified in data. As default, Y axis will be populated depending on the values given. Otherwise it depends on “maxValue” set for vAxis. Here we can specify ‘title’ for both X and Y axis. See Google Chart docs for more options.
Now we can call drawVisualization as following,
google.setOnLoadCallback(drawVisualization);
Since we used the option LineChart in drawVisualization function, we can see a line chart populating as following.
If we use BarChart in drawVisualization function, we can see a bar chart populating as following.
If we use ColumnChart in drawVisualization function, we can see a bar chart populating as following.
If we use AreaChart in drawVisualization function, we can see a bar chart populating as following.
Pie Chart implementation have slight change in drawVisualization function as following,
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
[‘Language’, ‘Rating’],
[‘Ruby’, 10],
[‘PHP’, 8],
[‘Java’, 8],
[‘C#’, 6],
[‘Python’, 4],
[‘Perl’, 2]
]);
new google.visualization.PieChart(document.getElementById(‘chart_div‘)).
draw(data, {title:”Languages”});
}
Now we can see a pie chart populating as following,
There are varieties of charts available with Google Charts like Bubble, Gauge, Combo, Motion etc. Find their samples here http://code.google.com/apis/ajax/playground/?type=visualization
HighCharts also have many varieties of charts. It have built-in print and download as image features with the plugin and implementation is also simple as Google Chart.
————————————-
