Google Charts

Google Charts
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Languages');
        data.addColumn('number', 'Tutorials');
        data.addRows([
          ['PHP', 300],
          ['MySQL', 100],
          ['JavaScript', 200],
          ['JQuery', 100],
          ['HTML', 200]
        ]);

        // Set chart options
        var options = {'title':'Tutorials at plus2net.com',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
</script>

HTML

<div id="chart_div"></div>
Create one HTML page and copy above JavaScript code and html code inside tag of your webpage. The above Pie chart will be displayed on your page. You should have internet connection to connect to Google Chart library.

Changing Height Width and Title

var options = {'title':'Tutorials at plus2net.com',
                       'width':400,
                       'height':300};
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.




HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer