Next
Update
Prev
Default

To create a chart, the chart layout and the chart data (dataset) must be set by calling setLayout() (or setLayoutUR()) and setData() (or setDataURL()). The XML format is the only valid format of the layout, and the XML and Array formats are supported for the format of the chart data (dataset). Both layout and data can be passed to the functions as an argument of the string value (setLayout(), setData()) or as an argument of the URL location of the file (setLayoutURL(), setDataURL()).

The most frequently used way of setting the layout and dataset is to set a string value to the layout and to set an array value to the dataset.

document.getElementById(id).setLayout(layoutStr);
document.getElementById(id).setData(chartData);				

Layout : Sets the string value to the JavaScript variable in HTML

var layoutStr = 
'<KoolChart cornerRadius="12">'
  +'<Options>'
    +'<Caption text="Monthly Report"/>'
  +'</Options>'
  +'<NumberFormatter id="numfmt" useThousandsSeparator="true"/>' 
  +'<Line2DChart showDataTips="true">'
    +'<horizontalAxis>'
      +'<CategoryAxis categoryField="Month"/>'
    +'</horizontalAxis>'
    +'<verticalAxis>'
      +'<LinearAxis interval="3000" formatter="{numfmt}"/>'
    +'</verticalAxis>'
    +'<series>'
      +'<Line2DSeries yField="Profit" displayName="Profit" itemRenderer="CircleItemRenderer" radius="5">'
        +'<showDataEffect>'
          +'<SeriesInterpolate/>'
        +'</showDataEffect>'
      +'</Line2DSeries>'
    +'</series>'
  +'</Line2DChart>'
+'</KoolChart>';

Dataset : Sets the Array value to the JavaScript variable in HTML

var chartData = [{"Month":"Jan", "Profit":10000},
		{"Month":"Feb", "Profit":15000},
		{"Month":"Mar", "Profit":12000},
		{"Month":"Apr", "Profit":30200},
		{"Month":"May", "Profit":28000},
		{"Month":"Jun", "Profit":12000},
		{"Month":"Jul", "Profit":22000},
		{"Month":"Aug", "Profit":13000},
		{"Month":"Sep", "Profit":22000},
		{"Month":"Oct", "Profit":29000},
		{"Month":"Nov", "Profit":18000},
		{"Month":"Dec", "Profit":30000}];

© 2017 KoolChart. All rights reserved.