Next
Update
Prev
Default

KoolChart provides the data editor feature, which enables you to view and edit the chart data.

This sample chart is to show how to use Data Editor by setting the <DataEditor> element tag.

You can also enable and disable the data editor feature by calling showDataEditor() and removeDataEditor(), which are the JavaScript APIs provided by KoolChart.

...
<Options>
  ...					
  <DataEditor showOnInit="true" formatter="{numFmt}" useCloseButton="false" editorHeight="94" reverseRow="true" textAlign="right" >
</Options>
...

function showDataEditor()
{
  document.getElementById("chart1").showDataEditor();
}

function removeDataEditor()
{
  document.getElementById("chart1").removeDataEditor();
}

If you want to use the data editor feature in the chart, you must set as useDataEditor="true" in chartVars, and set the path of the directory and the JavaScript file ( editablegrid-2.0.1.js ) to KoolChart.dataEditorUrl

...					
var chartVars1 = "KoolOnLoadCallFunction=chartReadyHandler";
chartVars1 += "&useDataEditor=true";

KoolChart.dataEditorUrl = "/KoolChart/JS/editablegrid-2.0.1.js";
...

DataEditor

showOnInit The showOnInit attribute determines whether or not to enable the data editor feature when chart is initially loaded.
useCloseButton The useCloseButton attribute determines whether or not to display the close button at the top-right of Data Editor.
editorHeight The editorHeight attribute is to set the height of Data Editor.
reverseRow The reverseRow attribute determines whether or not to display data in the reverse order of the chart data.
textAlign The textAlign attribute is to set the text alignment. The valid values are "left", "right" and "center".

© 2017 KoolChart. All rights reserved.