Sachin Nahar(Java Software Developer): How to make dynameic graph for website (Using Google API)

There are many open source charts library from which you can easily make dynamic charts for your website .I think it is the easiest way to make dynamic charts through Google API for any beginner .

These tutorial show you how to make Google API Chart.

Step 1:

 <!--Load the AJAX API-->


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

Step 2:

 // Load the Visualization API , Here we Load API for PIE Chart

 google.load('visualization', '1.0', {'packages':['corechart']});

Step 3:

 // Set a callback to run when the Google Visualization API is loaded ,

//In Simple manner Call the method which invoke google chart.

code:

google.setOnLoadCallback(drawChart);

Step 4:

// 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 = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

// Set chart options

var options = {'title':'My Daily Activities' ,
                     '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> //here script is over.

Step 5:

<!--Div that will hold the pie chart-->

 <div id="chart_div" style="width:400; height:300"></div>

Now you have pie chart on your "chart_div" with static data of "data" variable just change the data variable according to you dynamic data and you get real pie chart. you can also change charts option according to you .

Example-Code:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
      var data = google.visualization.arrayToDataTable([
                 ['Test', 'Obtained Marks'],
                 <c:forEach var="resultAnalysis" items="${testResultAnalysisList}" varStatus="resultStatus">
                    <c:forEach var="testInfo" items="${testInfoList}" varStatus="testStatus">
                       <c:if test="${testInfo.testId==resultAnalysis.testId}">
                           <c:set var="testName" value="${testInfo.testName}"/>
                       </c:if>
                    </c:forEach>
                   ['${testName}',${resultAnalysis.obtainedMarks}],
                 </c:forEach>
                ]);
      var options = {

                      title: 'My Daily Activities'

};

      var chart = new google.visualization.PieChart(document.getElementById('piechart'));
      chart.draw(data, options);
      }
      
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

here

testResultAnalysisList and testInfoList are list type variable.

For any query do comment.

1 comment:

Saurav SinghMarch 17, 2016 at 2:30 AM
Why I am always getting Error:
Multiple annotations found at this line:
- Syntax error on tokens, ArrayLiteralHeader expected
instead
- Syntax error on tokens, delete these tokens

My spinet
google.load("visualization", "1", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Week', 'Pass', 'Fail', 'Inconclusive'],

['${data.date}',${data.pass}, ${data.fail}, ${data.inconclusive}],

]);

var options = {
title : 'Weekly Rally Test Cases',
vAxis: {title: 'TestCases Count'},
hAxis: {title: 'Weeks'},
seriesType: 'bars',
series: {3: {type: 'line'},}
};

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

Monday, October 28, 2013

How to make dynameic graph for website (Using Google API)