Monday, May 12, 2008

Amazing auto label placing in Visifire charts

Visifire is a Silverlight based Open Source data visualization component. Visifire supports Silverlight 2.0. Using Visifire you can easily create good looking charts within minutes. You can create your own charts. But you need to know a bit about HTML only. Visifire supports various chart types.

Currently the following is a list of chart types available in Visifire:
Column, Line, Pie, Bar, Area, Doughnut, Stacked Column, StackedColumn100, Stacked Bar, StackedBar100, Stacked Area, StackedArea100, Bubble and Point. You can have a look at their galleries.

Especially, I would like to tell you about the label placement in Visifire charts. There are so many labels to be placed. But space is less. Visifire team has done a very good work on this problem. In Visifire charts, if chart size is small and there are many DataPoints. Just by doing minor changes in some of the property values for the AxisX element in data, you can place the labels beautifully over the chart.

Here are the key attributes present in the following xml fragment for Visifire Data.xml.

<vc:AxisX Interval="1" LabelAngle="0" >
<vc:AxisLabels Rows="1" FontSize="7"/>
</vc:AxisX>

Here are some screenshots.

Pie Chart

[Data.xml ]
<vc:Chart Theme="Theme3" AnimationEnabled="False"
xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts"
Width="500" Height="310"
Watermark="False" BorderThickness="0" HorizontalAlignment="Center" View3D="false">
<vc:AxisX Interval="1" LabelAngle="0" >
<vc:AxisLabels Rows="1" FontSize="4"/>
</vc:AxisX>
<vc:DataSeries RenderAs="Pie" ShowInLegend="False" Bevel="true" LabelEnabled="true">
<vc:DataPoint AxisLabel="B" YValue="5509"/>
<vc:DataPoint AxisLabel="C" YValue="7047"/>
<vc:DataPoint AxisLabel="D" YValue="10047"/>
<vc:DataPoint AxisLabel="E" YValue="8508"/>
<vc:DataPoint AxisLabel="F" YValue="6022"/>
<vc:DataPoint AxisLabel="G" YValue="9047"/>
<vc:DataPoint AxisLabel="H" YValue="7508"/>
<vc:DataPoint AxisLabel="I" YValue="11222"/>
<vc:DataPoint AxisLabel="J" YValue="5498"/>
<vc:DataPoint AxisLabel="K" YValue="6754"/>
<vc:DataPoint AxisLabel="L" YValue="8756"/>
<vc:DataPoint AxisLabel="M" YValue="2340"/>
<vc:DataPoint AxisLabel="O" YValue="2509"/>
<vc:DataPoint AxisLabel="P" YValue="3047"/>
<vc:DataPoint AxisLabel="Q" YValue="40047"/>
<vc:DataPoint AxisLabel="R" YValue="6508"/>
<vc:DataPoint AxisLabel="S" YValue="7022"/>
<vc:DataPoint AxisLabel="T" YValue="8047"/>
<vc:DataPoint AxisLabel="U" YValue="4508"/>
<vc:DataPoint AxisLabel="V" YValue="1222"/>
<vc:DataPoint AxisLabel="W" YValue="598"/>
<vc:DataPoint AxisLabel="X" YValue="4754"/>
<vc:DataPoint AxisLabel="Y" YValue="856"/>
<vc:DataPoint AxisLabel="Z" YValue="340"/>
<vc:DataPoint AxisLabel="A1" YValue="947"/>
<vc:DataPoint AxisLabel="B2" YValue="7408"/>
<vc:DataPoint AxisLabel="C2" YValue="1322"/>
<vc:DataPoint AxisLabel="D2" YValue="5798"/>
<vc:DataPoint AxisLabel="E2" YValue="6254"/>
<vc:DataPoint AxisLabel="F2" YValue="8726"/>
<vc:DataPoint AxisLabel="G2" YValue="3340"/>
<vc:DataPoint AxisLabel="H2" YValue="9047"/>
<vc:DataPoint AxisLabel="I2" YValue="7538"/>
<vc:DataPoint AxisLabel="J2" YValue="1322"/>
<vc:DataPoint AxisLabel="K2" YValue="5698"/>
<vc:DataPoint AxisLabel="L2" YValue="6954"/>
<vc:DataPoint AxisLabel="M2" YValue="8256"/>
<vc:DataPoint AxisLabel="N2" YValue="2540"/>
<vc:DataPoint AxisLabel="O2" YValue="9067"/>
<vc:DataPoint AxisLabel="P2" YValue="7528"/>
<vc:DataPoint AxisLabel="Q2" YValue="1522"/>
<vc:DataPoint AxisLabel="R2" YValue="5298"/>
<vc:DataPoint AxisLabel="S2" YValue="6754"/>
<vc:DataPoint AxisLabel="T2" YValue="8856"/>
<vc:DataPoint AxisLabel="U2" YValue="2240"/>
<vc:DataPoint AxisLabel="V2" YValue="9027"/>
<vc:DataPoint AxisLabel="W2" YValue="7228"/>
<vc:DataPoint AxisLabel="X2" YValue="13222"/>
<vc:DataPoint AxisLabel="Y2" YValue="5498"/>
<vc:DataPoint AxisLabel="Z2" YValue="6554"/>
</vc:DataSeries>
</vc:Chart>


Column Chart

[Data.xml ]
<vc:Chart Theme="Theme3" AnimationEnabled="False"
xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts"
Width="500" Height="310"
Watermark="False" BorderThickness="0" HorizontalAlignment="Center" View3D="false">
<vc:AxisX Interval="1" LabelAngle="0" >
<vc:AxisLabels Rows="2" FontSize="8"/>
</vc:AxisX>
<vc:DataSeries RenderAs="Column" ShowInLegend="False" Bevel="true" LabelEnabled="true">
<vc:DataPoint AxisLabel="B" YValue="5509"/>
<vc:DataPoint AxisLabel="C" YValue="7047"/>
<vc:DataPoint AxisLabel="D" YValue="10047"/>
<vc:DataPoint AxisLabel="E" YValue="8508"/>
<vc:DataPoint AxisLabel="F" YValue="6022"/>
<vc:DataPoint AxisLabel="G" YValue="9047"/>
<vc:DataPoint AxisLabel="H" YValue="7508"/>
<vc:DataPoint AxisLabel="I" YValue="11222"/>
<vc:DataPoint AxisLabel="J" YValue="5498"/>
<vc:DataPoint AxisLabel="K" YValue="6754"/>
<vc:DataPoint AxisLabel="L" YValue="8756"/>
<vc:DataPoint AxisLabel="M" YValue="2340"/>
<vc:DataPoint AxisLabel="O" YValue="2509"/>
<vc:DataPoint AxisLabel="P" YValue="3047"/>
<vc:DataPoint AxisLabel="Q" YValue="40047"/>
<vc:DataPoint AxisLabel="R" YValue="6508"/>
<vc:DataPoint AxisLabel="S" YValue="7022"/>
<vc:DataPoint AxisLabel="T" YValue="8047"/>
<vc:DataPoint AxisLabel="U" YValue="4508"/>
<vc:DataPoint AxisLabel="V" YValue="1222"/>
<vc:DataPoint AxisLabel="W" YValue="598"/>
<vc:DataPoint AxisLabel="X" YValue="4754"/>
<vc:DataPoint AxisLabel="Y" YValue="856"/>
<vc:DataPoint AxisLabel="Z" YValue="340"/>
<vc:DataPoint AxisLabel="A1" YValue="947"/>
<vc:DataPoint AxisLabel="B2" YValue="7408"/>
<vc:DataPoint AxisLabel="C2" YValue="1322"/>
<vc:DataPoint AxisLabel="D2" YValue="5798"/>
<vc:DataPoint AxisLabel="E2" YValue="6254"/>
<vc:DataPoint AxisLabel="F2" YValue="8726"/>
<vc:DataPoint AxisLabel="G2" YValue="3340"/>
<vc:DataPoint AxisLabel="H2" YValue="9047"/>
<vc:DataPoint AxisLabel="I2" YValue="7538"/>
<vc:DataPoint AxisLabel="J2" YValue="1322"/>
<vc:DataPoint AxisLabel="K2" YValue="5698"/>
<vc:DataPoint AxisLabel="L2" YValue="6954"/>
<vc:DataPoint AxisLabel="M2" YValue="8256"/>
<vc:DataPoint AxisLabel="N2" YValue="2540"/>
<vc:DataPoint AxisLabel="O2" YValue="9067"/>
<vc:DataPoint AxisLabel="P2" YValue="7528"/>
<vc:DataPoint AxisLabel="Q2" YValue="1522"/>
<vc:DataPoint AxisLabel="R2" YValue="5298"/>
<vc:DataPoint AxisLabel="S2" YValue="6754"/>
<vc:DataPoint AxisLabel="T2" YValue="8856"/>
<vc:DataPoint AxisLabel="U2" YValue="2240"/>
<vc:DataPoint AxisLabel="V2" YValue="9027"/>
<vc:DataPoint AxisLabel="W2" YValue="7228"/>
<vc:DataPoint AxisLabel="X2" YValue="13222"/>
<vc:DataPoint AxisLabel="Y2" YValue="5498"/>
<vc:DataPoint AxisLabel="Z2" YValue="6554"/>
</vc:DataSeries>
</vc:Chart>



Line Chart

[Data.xml ]
<vc:Chart Theme="Theme3" AnimationEnabled="False"
xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts"
Width="500" Height="310"
Watermark="False" BorderThickness="0" HorizontalAlignment="Center" View3D="false">
<vc:AxisX Interval="1" LabelAngle="0" >
<vc:AxisLabels Rows="2" FontSize="8"/>
</vc:AxisX>
<vc:DataSeries RenderAs="Line" LineThickness="1.5" Color="Red" ShowInLegend="False" Bevel="true" LabelEnabled="False">
<vc:DataPoint AxisLabel="B" YValue="5509"/>
<vc:DataPoint AxisLabel="C" YValue="7047"/>
<vc:DataPoint AxisLabel="D" YValue="10047"/>
<vc:DataPoint AxisLabel="E" YValue="8508"/>
<vc:DataPoint AxisLabel="F" YValue="6022"/>
<vc:DataPoint AxisLabel="G" YValue="9047"/>
<vc:DataPoint AxisLabel="H" YValue="7508"/>
<vc:DataPoint AxisLabel="I" YValue="11222"/>
<vc:DataPoint AxisLabel="J" YValue="5498"/>
<vc:DataPoint AxisLabel="K" YValue="6754"/>
<vc:DataPoint AxisLabel="L" YValue="8756"/>
<vc:DataPoint AxisLabel="M" YValue="2340"/>
<vc:DataPoint AxisLabel="O" YValue="2509"/>
<vc:DataPoint AxisLabel="P" YValue="3047"/>
<vc:DataPoint AxisLabel="Q" YValue="40047"/>
<vc:DataPoint AxisLabel="R" YValue="6508"/>
<vc:DataPoint AxisLabel="S" YValue="7022"/>
<vc:DataPoint AxisLabel="T" YValue="8047"/>
<vc:DataPoint AxisLabel="U" YValue="4508"/>
<vc:DataPoint AxisLabel="V" YValue="1222"/>
<vc:DataPoint AxisLabel="W" YValue="598"/>
<vc:DataPoint AxisLabel="X" YValue="4754"/>
<vc:DataPoint AxisLabel="Y" YValue="856"/>
<vc:DataPoint AxisLabel="Z" YValue="340"/>
<vc:DataPoint AxisLabel="A1" YValue="947"/>
<vc:DataPoint AxisLabel="B2" YValue="7408"/>
<vc:DataPoint AxisLabel="C2" YValue="1322"/>
<vc:DataPoint AxisLabel="D2" YValue="5798"/>
<vc:DataPoint AxisLabel="E2" YValue="6254"/>
<vc:DataPoint AxisLabel="F2" YValue="8726"/>
<vc:DataPoint AxisLabel="G2" YValue="3340"/>
<vc:DataPoint AxisLabel="H2" YValue="9047"/>
<vc:DataPoint AxisLabel="I2" YValue="7538"/>
<vc:DataPoint AxisLabel="J2" YValue="1322"/>
<vc:DataPoint AxisLabel="K2" YValue="5698"/>
<vc:DataPoint AxisLabel="L2" YValue="6954"/>
<vc:DataPoint AxisLabel="M2" YValue="8256"/>
<vc:DataPoint AxisLabel="N2" YValue="2540"/>
<vc:DataPoint AxisLabel="O2" YValue="9067"/>
<vc:DataPoint AxisLabel="P2" YValue="7528"/>
<vc:DataPoint AxisLabel="Q2" YValue="1522"/>
<vc:DataPoint AxisLabel="R2" YValue="5298"/>
<vc:DataPoint AxisLabel="S2" YValue="6754"/>
<vc:DataPoint AxisLabel="T2" YValue="8856"/>
<vc:DataPoint AxisLabel="U2" YValue="2240"/>
<vc:DataPoint AxisLabel="V2" YValue="9027"/>
<vc:DataPoint AxisLabel="W2" YValue="7228"/>
<vc:DataPoint AxisLabel="X2" YValue="13222"/>
<vc:DataPoint AxisLabel="Y2" YValue="5498"/>
<vc:DataPoint AxisLabel="Z2" YValue="6554"/>
</vc:DataSeries>
</vc:Chart>



Visifire provides online Documentation, Forum, Blogs etc...
For any kind of help or quick-start I suggest you to go through Visifire Charts Documentation.


1 comment:

Anonymous Coward said...

Hey, I have tried that.
Visifire animation is really cool!
It is easy to use also.