无法使用json在Google图表中显示数据

Question

I am getting the data from MySQL and want to display it in a line chart using google charts. I am using java and javascript.

this is the type of data which i am getting from MySQL:

timestamp 2017-06-12 19:22:23.0 , 2017-06-12 19:22:25.0
f1 414 413

I got this data in a resultset and converted it into JSONarray and the output is like: '[{"f1":414,"ts":"2017-06-12 19:22:23.0"},{"f1":415,"ts":"2017-06-12 19:22:25.0"}]'

-> from a servlet i am passing this string to a jsp file.

Now the JSP file:

<script type="text/javascript">
$(document).ready(function(){
    alert('hello');
});


var newstring =  <%= request.getAttribute("json_string")%>
<%System.out.println(request.getAttribute("json_string"));%>
var chartData = JSON.parse(newstring);


// Load google charts
google.load('visualization', '1.1', {packages:["corechart, table"]});
google.charts.setOnLoadCallback(drawChart);



// Draw the chart and set the chart values



    var dTable = new google.visualization.DataTable();
    dTable.addColumn('string','timestamp'); 
    dTable.addColumn('number','f1');

    for(i=0;i<chartData.length;i++)
    {
        var currentObj = chartData[i];
        dTable.addRow([currentObj.f1,currentObj.ts]);
    }


  // Display the chart inside the <div> element with id="linechart"
    var options = {'title':'<%= request.getAttribute("Spring_type") + " for date :"%><%= request.getAttribute("date")%>', 'width':550, 'height':400};
    var chart = new google.visualization.LineChart(document.getElementById('linechart'));
      chart.draw(data, options);



</script>

The chart is not getting displayed.

Any help would be appreciated. Or if there is any other way please write it down.

Answer 1

You are adding all your values to dTable while your are using some variable data while creating the chart, the correct way should be

chart.draw(dTable , options);

and there is no drawChart function , you should wrap everything in the function lioke

function drawChart(){
var dTable = new google.visualization.DataTable();
    dTable.addColumn('string','timestamp'); 
    dTable.addColumn('number','f1');

    for(i=0;i<chartData.length;i++)
    {
        var currentObj = chartData[i];
        dTable.addRow([currentObj.f1,currentObj.ts]);
    }


  // Display the chart inside the <div> element with id="linechart"
    var options = {'title':'<%= request.getAttribute("Spring_type") + " for date :"%><%= request.getAttribute("date")%>', 'width':550, 'height':400};
    var chart = new google.visualization.LineChart(document.getElementById('linechart'));
      chart.draw(dTable , options);

}

Also look at this example from the api docs