Grid and Chart
Update chart while editing grid values
It's fairly easy to use DataGridXL as a chart editor. Listen to the grid's built-in cellvaluechange handler and update the chart with the latest data.
Code
<style>
#grid, #chart {
height: 300px;
}
</style>
<div id="chart"></div>
<div id="grid"></div>
<script src="https://code.datagridxl.com/datagridxl.js"></script>
<!-- amCharts (chart plugin) -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script>
var my_data = [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1422
}, {
"country": "India",
"visits": 1522
}, {
"country": "Netherlands",
"visits": 1542
}];
var grid;
var chart;
createGrid();
createChart();
function createGrid(){
grid = new DataGridXL("grid", {
data: my_data,
allowColDelete: false,
allowColInsert: false,
allowCellFill: false
});
grid.events.on("cellvaluechange", function(e){
setTimeout(function(){
chart.dataProvider = grid.getData();
chart.validateData();
chart.animateAgain();
},25);
});
}
function createChart(){
chart = AmCharts.makeChart( "chart", {
"type": "serial",
"theme": "none",
"dataProvider": my_data,
"categoryField": "country",
"startDuration": 1,
"graphs": [ {
"balloonText": "[[category]]: [[value]]",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits",
"fillColors": "#cbe4ff",
"lineColor": "#cbe4ff"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
}
} );
}
</script>
