Google Charts : Understanding

The library is hosted by google at
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
To display the chart different types of data tables are used. For Pie chart and Bar chart two column tables are used.

Number of tutorials at plus2net.com
languagenos
PHP300
JavaScript200
MySQL100
JQuery200
HTML200
ASP100
We can collect data from MySQL table by using PHP and then match the input data format required for Chart. We can use any Backend script and we just require to match the required format to display the charts.



Chart requires data in a particular format to prepare the chart . Here it is .
data.addRows([
          ['PHP', 300],
          ['MySQL', 100],
          ['JavaScript', 200],
          ['JQuery', 200],
          ['HTML', 200],
          ['ASP', 100]
        ]);
We can use a two dimensional array in JavaScript to give this input data.
var tutorials = [['PHP', 300],['MySQL', 100],['JavaScript', 200],['JQuery',200],['HTML',200],['ASP',100]]
We will match the required format by displaying the array elements.
for(i = 0; i < tutorials.length; i++)
    data.addRow([tutorials[i][0], tutorials[i][1]]);

Why through array ?

We declared the array as global variable and used the same to display the chart. We can modify data stored inside the array and change the chart dynamically by modifying the array data.

Area Chart

Column Chart

Donut Chart

Line Chart

Your Rating





Post your comments , suggestion , error , requirements etc here .




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer