Next
Update
Prev

The chart layout can be created dynamically by calling a JavaScript function.

This sample is to show how to create the layout on the fly using the JavaScript function which sets the layout to the string variable.

var dataURL ="./DataXml/multiData4.xml";
var captionTitle;
var dynamicLayout;
var layoutStr;
var dataField = ["Profit", "Cost", "Revenue", "Profit2", "Cost2", "Revenue2", "Profit3", "Cost3", "Revenue3"];

makeLayout(Math.round(Math.random()*9));

document.getElementById(id).setLayout(layoutStr);
document.getElementById(id).setDataURL(dataURL);

function makeLayout(value)
{
  if (value == 0)
    value = 1;
    
  var i = 0;
  dynamicLayout = "<Line2DSeries displayName='";
    
  for (i; i < value; ++i) {
    if (i == 2)
      dynamicLayout += (i + "nd " + dataField[i] + "' yField='" + dataField[i] + "' form='curve'/>");
    else if (i == 3)
      dynamicLayout += (i + "rd " + dataField[i] + "' yField='" + dataField[i] + "' form='curve'/>");
    else
      dynamicLayout += (i + "th " + dataField[i] + "' yField='" + dataField[i] + "' form='curve'/>");
	
    if (i < value - 1)
      dynamicLayout += "<Line2DSeries displayName='";
  }
  captionTitle = "<Caption text='"+i+" Line Series' fontFamily='Malgun Gothic'/>";
		
  layoutStr = 
    "<KoolChart>"
    +  "<Options>"
    +  "<Legend direction='vertical' position='right' verticalGap='1' paddingBottom='2' paddingTop='2' defaultMouseOverAction='true'/>"
    +    captionTitle
    +  "</Options>"
    +  "<NumberFormatter id='numfmt' useThousandsSeparator='true'/>" 
    +  "<Line2DChart showDataTips='true'>"
    +    "<horizontalAxis>"
    +      "<CategoryAxis categoryField='Month'/>"
    +    "</horizontalAxis>"
    +    "<verticalAxis>"
    +      "<LinearAxis interval='300' formatter='{numfmt}'/>"
    +    "</verticalAxis>"
    +    "<series>"
    +      dynamicLayout
    +    "</series>"
    +  "</Line2DChart>"
    +"</KoolChart>";
}

© 2017 KoolChart. All rights reserved.