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, and to apply the CSS styles to the appearance of Data Editor.

You can style the appearance of Data Editor using the CSS styles by setting the styleName attribute in the <DataEditor> element tag.

...
<Options>
  ...					
  <DataEditor showOnInit="true" formatter="{numFmt}" editorHeight="96" reverseRow="true" styleName="gridStyle" >
</Options>
...
<Style>.gridStyle{color:#000000;
alternatingItemColors:#f7f7f7,#ffffff;
headerColors:#7dcad0,#7dcad0;
headerStyleName:gridHeaderStyle;
horizontalGridLines:true;
horizontalGridLineColor:#5C8484;
headerLineColor:#44a4c8;
selectionColor:#ADC1C1;
rollOverColor:#CC9999;
fontWeight:bold;
verticalAlign:middle;
verticalGridLineColor:#abd6e6;
fontWeight:normal;
borderColor:#44a4c8;}
.gridHeaderStyle{color:#ffffff;}
</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.