I have some problems when I using anychart with ajax. Because data of anychart is dependent on the check_box users select, I have to ajax the data. the basic form of chart is fine, but selected data do not work on the chart
Here is my code.
<body>
<div>
<input type='checkbox' name='question_id' value='1'>
<input type='checkbox' name='question_id' value='2'>
<input type='checkbox' name='question_id' value='3'>
<input type='checkbox' name='question_id' value='4'>
<input type='checkbox' name='question_id' value='5'>
<input type='checkbox' name='question_id' value='6'>
<div>
<button id='report'>report</button>
<div id='container'></div>
</body>
and my ajax and anychart setting is as below
<script>
$(function() {
$('#report').click(function() {
$.ajax({
type: 'POST',
data: {
ids: $("input[name='question_id']:checked").map(function () {
return $(this).val();
}).get()
},
});
});
});
anychart.onDocumentReady(function() {
var dataSet = anychart.data.set(<%= select_data %>);
var chart = anychart.column();
......
......
chart.container('container');
chart.draw();
});
</script>
I am thinking that I have to rerender the anychart so the ajax data could be loaded, but I have no idea how to make it work
It seems you don't apply changes to data.
When you receive the new data you should apply it to a chart, it can be done like this:
dataSet = anychart.data.set(newData);
or
chart.data(newData);
Also, in your code chart and data variables are local within onDocumentReady function.
anychart.onDocumentLoad(function() {
$.getJSON("dataurl", function(result) {
var dataSet = anychart.data.set(result);
var chart = anychart.column();
chart.column(dataSet.mapAs({ value: 1, x: 0 })).name('Inventory');
chart.column(dataSet.mapAs({ value: 2, x: 0 })).name('Sales');
chart.grid(0, { layout: 'vertical' })
chart.barGroupsPadding(3)
chart.legend(true);
chart.title('Compare sales strategy')
chart.yScale().minimum(0);
chart.container('container');
chart.draw();
})
});