Next
Update
Prev
Default

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

The data editor in KoolChart has the scrollbar feature, so that you can use large amounts of data in Data Editor. This sample chart is to show how Data Editor handles large amounts of data using the horizontal scrollbar.

...
<Options>
  ...					
  <DataEditor showOnInit="true" editorHeight="67" reverseRow="true" styleName="gridStyle" >
</Options>
...
<Style>.gridStyle{color:#095c69;
alternatingItemColors:#e3e4e4,#e3e4e4;
headerColors:#7dcad0,#7dcad0;
headerStyleName:gridHeaderStyle;
horizontalGridLines:true;
horizontalGridLineColor:#ffffff;
headerLineColor:#ffffff;
fontWeight:bold;
fontSize:12;
verticalAlign:middle;
verticalGridLineColor:#ffffff;
fontWeight:normal;
borderColor:#ffffff;}
.gridHeaderStyle{color:#fefefe;}
</Style>
...

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. The default value is "true".
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.
styleName The styleName attribute is to set the style name to be defined in the Style element tag (<Style>).

© 2017 KoolChart. All rights reserved.