Sparkline Charts using Visifire

admin

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: image

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:

 image

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

  1. September 18th, 2008 | 7:32 pm

    I tried this using silverlight.

    chart.AxisX.Enabled = false;

    I get a null exception on AxisX.

    Can you post a Silverlight example?

  2. Karthik Nadig
    September 19th, 2008 | 8:00 am

    Hi Doug,

    I am happy to help you, but in order to attach the sample managed code, could you please post the question on Visifire forums, as files cannot be attached to comments.

  3. January 28th, 2009 | 12:02 pm

    [...] Supported by: Nuby on Rails, Any Chart, JQuery plugin, Flex , and two more ones for Flex at Microcharts and Birdeye, Google API, Visifire for Silverlight [...]

  4. February 4th, 2009 | 2:05 pm

    [...] Supported by: Nuby on Rails, Any Chart, JQuery plugin, Flex , and two more ones for Flex at Microcharts and Birdeye, Google API, Visifire for Silverlight [...]

  5. April 22nd, 2009 | 9:22 am

    mm.. nice ))

  6. April 24th, 2009 | 3:59 am

    [...] Supported by: Nuby on Rails, Any Chart, JQuery plugin, Flex , and two more ones for Flex at Microcharts and Birdeye, Google API, Visifire for Silverlight [...]

  7. tov
    September 9th, 2009 | 4:54 am
  8. May 8th, 2010 | 12:29 am

    [...] ความสามารถ นี้ทำได้โดย: Nuby on Rails, Any Chart, JQuery plugin, Flex , and two more ones for Flex at Microcharts and Birdeye, Google API, Visifire for Silverlight [...]

  9. November 8th, 2010 | 10:17 pm

    [...] Supported by: Nuby on Rails, Any Chart, JQuery plugin, Flex , and two more ones for Flex at Microcharts and Birdeye, Google API, Visifire for Silverlight [...]

  10. August 5th, 2011 | 3:18 am

    [...] ความสามารถนี้ทำได้โดย: Nuby on Rails, Any Chart, JQuery plugin, Flex , and two more ones for Flex at Microcharts and Birdeye, Google API, Visifire for Silverlight [...]

  11. September 6th, 2012 | 5:36 am

    [...] Visifire » Sparkline Charts using VisifireIn this blog I’ll show how to create Sparkline Charts using Line charts from Visifire. … The following XML is a bare bone XML required to create sparkline charts: … The screen shot below shows a HTML table containing Visifire sparkline charts, click on the image below to see silverlight example: [...]

Leave a reply