Posted by & filed under Technical Tips.

If you click the bar of a country on the bar chart on the left, you can see the detailed score on the radar chart on the right.

 

 

Posted by & filed under Technical Tips.

[XML Layout for Doughnut Chart]

<KoolChart backgroundColor=”#FFFFFF” borderStyle=”none”>

<Options>

<Caption text=”TOTAL POPULATION (1.385 billion)”/>

</Options>

<Pie2DChart id=”chart” innerRadius=”0.7″ showDataTips=”true”>

<series>

<Pie2DSeries nameField=”Age” field=”Population” startAngle=”-120″ renderDirection=”clockwise” labelPosition=”outside” labelJsFunction=”chinaLabelFunc” color=”#000000″>

<showDataEffect>

<SeriesSlide direction=”right” duration=”1000″/>

</showDataEffect>

</Pie2DSeries>

</series>

<backgroundElements>

<CanvasElement>

<Image source=”./man-and-woman.png” top=”80″ left=”200″ width=”180″ height=”200″/>
<Label text=”48.2%” left=”230″ horizontalCenter=”0″ verticalCenter=”0″ fontSize=”20″ fontWeight=”bold” color=”#000000″ backgroundAlpha=”0″/>
<Label text=”51.8%” left=”315″ horizontalCenter=”0″ verticalCenter=”0″ fontSize=”20″ fontWeight=”bold” color=”#000000″ backgroundAlpha=”0″/>

</CanvasElement>

</backgroundElements>

</Pie2DChart>

</KoolChart>

Posted by & filed under Technical Tips.

 

[XML Code for Layout]

<KoolChart backgroundColor=”#FFFFFF” borderStyle=”none”>

<Matrix2DChart type=”fill”>

<backgroundElements>

<GridLines direction=”horizontal” horizontalChangeCount=”2″>

<horizontalStroke>

<Stroke color=”#000000″/>

</horizontalStroke>

</GridLines>

</backgroundElements>

<verticalAxis>

<LinearAxis id=”vAxis” interval=”0.5″ maximum=”10″ labelJsFunction=”lunaVertiJsFunc”/>

</verticalAxis>

<horizontalAxis>

<LinearAxis id=”hAxis” interval=”0.5″ maximum=”13″ />

</horizontalAxis>

<series>

<Matrix2DSeries xField=”Data1_x” yField=”Data1_y” zField=”Data1″ renderer=”rectangle” labelPosition=”inside” displayName=”2th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data2_x” yField=”Data2_y” zField=”Data2″ renderer=”rectangle” labelPosition=”inside” displayName=”3th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data3_x” yField=”Data3_y” zField=”Data3″ renderer=”rectangle” labelPosition=”inside” displayName=”4th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data4_x” yField=”Data4_y” zField=”Data4″ renderer=”rectangle” labelPosition=”inside” displayName=”6th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data5_x” yField=”Data5_y” zField=”Data5″ renderer=”rectangle” labelPosition=”inside” displayName=”7th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data6_x” yField=”Data6_y” zField=”Data6″ renderer=”rectangle” labelPosition=”inside” displayName=”8th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data7_x” yField=”Data7_y” zField=”Data7″ renderer=”rectangle” labelPosition=”inside” displayName=”9th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data8_x” yField=”Data8_y” zField=”Data8″ renderer=”rectangle” labelPosition=”inside” displayName=”10th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data9_x” yField=”Data9_y” zField=”Data9″ renderer=”rectangle” labelPosition=”inside” displayName=”12th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data10_x” yField=”Data10_y” zField=”Data10″ renderer=”rectangle” labelPosition=”inside” displayName=”13th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data11_x” yField=”Data11_y” zField=”Data11″ renderer=”rectangle” labelPosition=”inside” displayName=”15th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data12_x” yField=”Data12_y” zField=”Data12″ renderer=”rectangle” labelPosition=”inside” displayName=”17th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data13_x” yField=”Data13_y” zField=”Data13″ renderer=”rectangle” labelPosition=”inside” displayName=”18th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data14_x” yField=”Data14_y” zField=”Data14″ renderer=”rectangle” labelPosition=”inside” displayName=”20th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data15_x” yField=”Data15_y” zField=”Data15″ renderer=”rectangle” labelPosition=”inside” displayName=”21th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data16_x” yField=”Data16_y” zField=”Data16″ renderer=”rectangle” labelPosition=”inside” displayName=”19th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data17_x” yField=”Data17_y” zField=”Data17″ renderer=”rectangle” labelPosition=”inside” displayName=”22th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data18_x” yField=”Data18_y” zField=”Data18″ renderer=”rectangle” labelPosition=”inside” displayName=”24th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data19_x” yField=”Data19_y” zField=”Data19″ renderer=”rectangle” labelPosition=”inside” displayName=”25th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data20_x” yField=”Data20_y” zField=”Data20″ renderer=”rectangle” labelPosition=”inside” displayName=”27th” styleName=”seriesFont”/>
<Matrix2DSeries xField=”Data21_x” yField=”Data21_y” zField=”Data21″ renderer=”rectangle” labelPosition=”inside” displayName=”28th” styleName=”seriesFont”/>

</series>

<verticalAxisRenderers>

<Axis2DRenderer axis=”{vAxis}” tickPlacement=”none” styleName=”font” minorTickPlacement=”none”/>

</verticalAxisRenderers>

<horizontalAxisRenderers>

<Axis2DRenderer axis=”{hAxis}” tickPlacement=”none” minorTickPlacement=”none” showLine=”true” showLabels=”false”/>

</horizontalAxisRenderers>

</Matrix2DChart>

<Style>

.font{fontSize:11;color:#000000;fontWeight:bold;}
.seriesFont{fontSize:14;color:#000000;}

</Style>

</KoolChart>

 

Matrix Chart Demo