Google Charts Wrapper Javascript Library for simply creating Google Charts without the overhead of all the extra stuff that Google Charts demands.
Go to the Project Site for comprehensive documentation of the full class.
You must still include the Google JSAPI script in your html code. This is a mandatory requirement.
Currently gChart will work with browsers IE9 and above.
Pretty simple to start using gChart.
Instantiate the gChart(ID of Where to put the Chart, Chart Type)
<script type="application/javascript">
var g = new gChart('chart', 'column');Add the Data to the chart
g.data = { cols: [{id: 'col1', label: 'labels here', type: 'string'},{id: 'col2', label: 'Another label', type: 'number'},{id: 'col3', label: 'Yet Another label', type: 'number'}], rows: [{c: [ {v: 'Realm-1'}, {v: 3 }, {v: 2 }] }] };Then call the show() method
g.show();That is all that is required you can add other options that I will describe later.
gChart (ID, ChartType)
The ID of where the chart should be placed when it is ready.
Corresponds to the gchart.chartTypes (ENUM) for the type of chart to be displayed.
Returns google.visualization.ChartWrapper object for the current chart.
Displays the chart and if thier is a control designated then it too gets rendered at the same time.
Transposes the Data to by switching the column headers to the row headers and the same with the data. Very similar to the Microsoft Excel Transpose function under Paste Special.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="chart" style="width: 900px;height: 450px;">
</div>
<script type="application/javascript" src="js/gcharts.js"></script>
<script type="application/javascript">
var g = new gChart('chart', 'column');
g.data = { cols: [{id: 'RealmNumber', label: 'RealmNumber', type: 'string'},{id: 'Internal', label: 'Internal', type: 'number'},{id: 'External', label: 'External', type: 'number'}], rows: [{c: [ {v: 'Realm-1'}, {v: 3 }, {v: 2 }] }] };
g.options = {'stacked': 'true'};
g.show();
</script>
</body>
</html>Any error that is generated by Google Visualization API will now be prepended to the main BODY element of the page. The DIV tag and P tag of the newly created error message will have respective classes to allow for styling.
<div class="gChart_Error">
<p class="gChart_ErrorMessage" id="[ID of Error]"> Message of Error</p>
</div>Google owns the Google Visualization library and it owns anything to do with that library. gChart is Creative Commons 1.0 please use, modify, distribute, and have fun!