A jQuery plugin to make using Google Charts super simple, without losing customizability.
Include the appropriate libraries in your <head> tag
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Google JS-API -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- Charts.js -->
<script type="text/javascript" src="js/charts.js"></script>Load the Google Charts Library
<script type="text/javascript">
// Load the visualization library
google.load('visualization', '1.0', {'packages':['corechart']});
</script>On the Google Charts callback, draw your charts using Charts.js
<script type="text/javascript">
google.setOnLoadCallback(makeCharts);
function makeCharts() {
$("#chart-bar").chart({
chartType:'bar',
columnTitles:['Answer', 'Frequency'],
jsonData: [["1",1],
["2",4],
["3",1],
["4",3]]
});
}
</script>You may either pass json directly upon creating the chart, or give the chart a url to make an AJAX request for the data. Currently, all data injected into the chart using the google.visualization.arrayToDataTable() method which you can read about here.
JSON needs to be in a format where each row represents a data point, and each column represents a series. Column titles may be included in either the JSON or the columnTitles attribute. Column data types are implicit.
$('#chart').chart({
chartType:'bar',
columnTitles:['Answer', 'Frequency'],
jsonData: [
["1",1],
["2",4],
["3",1],
["4",3]
]
});Make sure the JSON returned by the server matches the format above.
$('#chart').chart({
chartType:'bar',
columnTitles:['Answer', 'Frequency'],
url: 'demo.json'
});If you have used a URL for data, you can ask the chart to refresh its data by calling update.
$('#chart').chart('update');Google Charts allows for tons of customization, you and Charts.js supports all of these customization options.
Charts.js supports 'bar', 'column', 'line', 'pie', 'combo', 'area', 'bubble', 'candlestick', and 'scatter' graphs. Simply specify the type of graph you want on creation. You can also change it later and redraw the chart to see the changes.
// specify at creation
$('#chart').chart({
chartType:'bar',
columnTitles:['Answer', 'Frequency'],
url: 'demo.json'
});
// or change it later
$('#chart').data('chart').chartType = 'bar';
// but don't forget to redraw the chart
$('#chart').chart('draw');You may specify any options from the Google Charts API by passing them to the options item.
$('#chart').chart({
chartType:'bar',
url: 'demo.json',
options: {
height: 600,
width: 1200
}
});Options can also be changed after creation by updating the options object and redrawing the chart
$('#chart').data('chart').options.height = 1000;
$('#chart').chart('draw');- Fixed animating of charts when data is changed. Animations will work on
$('#chart').chart('update'). Animations can be customized by changingoptions.animationitem. - Fixed chainability issues with jQuery
- Added all chart types included in the Google Charts
corechartlibrary - Added ability to call
drawto update chart to reflect changed options rather than usingupdatefor less data polling.