I have integrated amcharts to create a pie chart. When I click a button, an AJAX request is triggered to fetch data from MySQL in JSON format.
After receiving the JSON array, I pass the data to amcharts but the chart doesn't display. Oddly, if I redirect to a new JSP page, the chart appears as expected.
Here is my HTML code:
<input type="submit" class="btn btn-success" name="shift" value="shift analysis" onclick="shift(a,b,c,d)">
<div id="chartdiv1" style="width: 640px; height: 400px;"></div>var chart = AmCharts.makeChart("chartdiv1", {
"type": "pie",
"theme": "light",
"valueField": "f2",
"titleField": "t",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
} );
function shift(a,b,c,d)
{
var ajax_req =new XMLHttpRequest();
var method = "GET";
var url ="endpoint";
var asynchronous = true;
ajax_req.open(method, url, asynchronous);
ajax_req.send();
ajax_req.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
// document.getElementById("json").innerHTML = this.responseText;
var result= this.responseText;
alert(result);
chart.dataProvider =result;
chart.validateNow();
}
}
}For clarity, here is the output of my AJAX request: result: [{"t":"01:11","f2":340},{"t":"01:11","f2":335},{"t":"01:09","f2":334}]