In this blog I’ll show how to create Sparkline Charts using Line charts from Visifire.

Let me start by showing a sample of the sparkline chart:

The following XML is a bare bone XML required to create sparkline charts:

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts"
AnimationEnabled="False" Padding="1" BorderThickness="0" Watermark="False"> 

  <vc:AxisX Enabled="False"/>
  <vc:AxisY Enabled="False" StartFromZero="False"/> 

  <vc:DataSeries RenderAs="Line" LabelEnabled="False" MarkerEnabled="False" >
    .
    .
    .
  </vc:DataSeries> 

</vc:Chart>

Highlighting of the various points has to be done by selecting the color for the marker.

To highlight any point you have to enable the marker for the point and set the color. If color is not selected then default color will be applied. Also set the marker size as per requirement. Have a look at the example below, it shows how to highlight the start and end points.

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts" Theme="Theme1"
          AnimationEnabled="False" Padding="1" BorderThickness="0" Watermark="False"> 

  <vc:AxisX Enabled="False"/>
  <vc:AxisY Enabled="False" StartFromZero="False"/> 

  <vc:DataSeries RenderAs="Line" LabelEnabled="False" MarkerEnabled="False"
                 MarkerSize="5" LineThickness="0.5" Color="Black">
    <vc:DataPoint YValue="44.01" MarkerEnabled="True" Color="Blue" />
    .
    .
    .
    <vc:DataPoint YValue="44.5" MarkerEnabled="True" Color="Blue" />
  </vc:DataSeries> 

</vc:Chart>

Any point can be highlighted to show its importance

The screen shot below shows a HTML table containing Visifire sparkline charts, click on the image below to see silverlight example:

The code for this example can be downloaded from the here.

Visifire sparkline charts support all events that are supported by line charts and hence can be easily used for creating drill down charts.

Comments(7)

With the latest version of Visifire you can re-render the charts from JavaScript. I’ll show how to use this feature to create a real time chart.

To create real-time charts from JavaScript follow these steps:

1. Create a chart.
2. Call a function to get updated XML.
3. Call render function to display the chart.
4. Repeat from step 2.

It’s that simple, see the JavaScript code below:

<div id="Div1">
    <script type="text/javascript">  

        //Create new chart
        var vChart1 = new Visifire('ClientBin/Visifire.xap',500,300); 

        //An array to store data
        var data = new Array(50); 

        //Initialize array with default values
        data = initializeData(data); 

        function update()
        {
            //Update array with latest data
            data = updateData(data); 

            //Generate chart XML using latest data
            var chartXML = updateChartXML(data); 

            //Set the XML for the chart
            vChart1.setDataXml(chartXML); 

            //Call render to display the chart
            vChart1.render("Div1"); 

            //Repeat after every second
            setTimeout(update,1000);
        } 

        //update the chart
        update(); 

    </script>
</div>

The following image is the screen shot of real-time chart example. Click on the image see it in action:

You can download the source for this example here.

The re-rendering process can also be used if the updated XML is stored in files, by using the chart.setDataUri function.

Comments(4)