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>

edit

Leave email to receive latest updates!