JavaScript Chart - Editor in ChartTry to edit a cell in the editor

Send Data to JavaScript
Hide Data Editor
Show Data Editor
VIEW MORE FEATURES
SAVE
VIEW HTML
EDIT ON CODEPEN
When creating a chart using KoolChart's JavaScript charting library, you can use the data editor to display the chart data along with the chart on the screen. To display the data editor, you need to set the useDataEditor property to true and to set the dataEditorUrl property to the location URL of EditableGrid that is included in the product.
var chartVars1 = "KoolOnLoadCallFunction=chartReadyHandler1";
chartVars1 += "&useDataEditor=true";
KoolChart.dataEditorUrl = "https://www.koolchart.com/demo/KoolChart/JS/editablegrid-2.0.1.js";
Once the data editor is displayed on the screen, you can hide it using the removeDataEditor function:
document.getElementById("chart1").removeDataEditor();
And you can also unhide the data editor using the showDataEditor function:
document.getElementById("chart1").showDataEditor();
The chart data can be accessed using the getChartData function, and you can freely use it in your JavaScript function:
var cdata = document.getElementById("chart1").getChartData();

var str= "";
var item;
for(var i=0; i<cdata.length; i++) {
item = cdata[i];
for(var p in item) {
str += p + " : " + item[p] + "\r";
}
}
alert(str);