Friday, November 15, 2013

simple google chart api easily in integrate to application and example solve

Step1->include google apic
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

 <script type="text/javascript">
  
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart2);
    function drawChart2() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Date');
      data.addColumn('number', 'Sales Amount');
      data.addColumn('number', 'Quantity Sold');
      //["Sale date", sale amount,sale quantity]
      data.addRows([["2013-06-05", 14.95, 1],["2013-06-07", 29.9, 2],["2013-06-11", 14.95, 1],["2013-06-13", 30, 3],["2013-06-17", 19.9, 2],["2013-06-18", 14.95, 1],["2013-06-19", 0.2, 2],["2013-06-20", 88.85, 9],["2013-06-21", 117.1, 16],["2013-06-22", 71.8, 7],["2013-06-24", 164.45, 11],["2013-06-25", 492.95, 42],["2013-06-26", 271.85, 30],["2013-06-27", 95.95, 13],["2013-06-28", 52.9, 5],["2013-06-29", 14.95, 1]]);

      var chart = new google.visualization.AreaChart(document.getElementById('chart_div_2'));
      chart.draw(data, {width: 650, height: 240, title: 'Sale Amount and Quantity Sold by Date', colors:['#3366CC','#9AA2B4','#FFE1C9'],
                        hAxis: {title: 'Date', titleTextStyle: {color: 'black'}}
                       });
    }
    </script>
       <div id="chart_div_2"></div>
     <script type="text/javascript">   
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
     
      // Set a callback to run when the Google Visualization API is loaded.
      google.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', 'Products');
      data.addColumn('number', 'Numbers');
      data.addRows([
        ["&quot;The Map&quot; Webinar Series", 3],["The “One Minute Manifestor” Audio Technique ", 1],["&quot;Life On Planet Earth: A User's Manual&quot; (E-Book)", 125],["The Map: To Our Responsive Universe, Where Dreams Really Do Come True!", 3],["&quot;Conscious Creation&quot; Inspiration Cards", 10],["Live a Life You Love Vneck TShirt", 48],      ]);

      // Set chart options
      var options = {'title':'Product Sale Quantity Stats',
                     'width':450,
                     'height':300};

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

No comments:

Post a Comment