Sparkline Charts using Visifire

admin
June 16th 2008 Posted to Creative Use of Visifire,Development,Tutorials and Samples

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(11)


Comments

  1. Doug
    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. 30 Essential Controls
    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. 30 Essential Controls « Theresaneil’s Weblog
    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. shestcync
    April 22nd, 2009 | 9:22 am

    mm.. nice ))

  6. Give your Web Interface a Great Look | Expertz
    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

    how to make like a http://www.fusioncharts.com/widgets/Gallery/SparkLine1.html and other?

  8. เครื่องมือ 30 แบบสำหรับเว็บ 2.0 | CodePonPon.com
    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. 30套通用控件[30 Essential Controls]
    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. เทคนิค 30 อย่าง ที่น่าสนใจในการทำ Web 2.0 | Ittiponz blog
    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. Spark charts | Monaschilling
    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