Getting Started with ComponentOne Sparkline for Studio ASP.NET Wijmo

With the release of Studio ASP.NET Wijmo 2014 v2 we introduced the ComponentOne Sparkline control. Sparklines are a popular way of showing inline trends or trends inside data aware controls. A particular usage is to show sales or profit trends. In this blog post we will see how to work with the Sparkline control both when unbound and when embedded in a grid.

Simple Sparkline

Let us take an example where we need to plot trends of DOW and NASDAQ in a summary like the image below:

The sparkline control has "SparkLineSeries" class which has a "Data" property. To create the above we simply provide the datapoints to this data property and we are done. Here is the markup.

<div>  
 <span>Current trends indicate that the DOW  
 <wijmo:C1Sparkline ID="sparkline1" runat="server" style="height:13px;  
 width:100px">  
 <SeriesList>  
 <wijmo:SparklineSeries Data="16613.97, 16446.81, 16491.31, 16511.86,   
16374.31, 16533.06, 16543.08, 16606.27, 16675.50, 16633.18, 16698.74,   
16717.17, 16743.63, 16722.34, 16737.53, 16836.11, 16924.28, 16943.10,   
16945.92, 16843.88, 16734.19,16775.74, 16781.01, 16808.49, 16906.62,  
16921.46,16947.08, 16937.26, 16818.13, 16867.51">  
</wijmo:SparklineSeries>  
 </SeriesList>  
 </wijmo:C1Sparkline>  
 and NASDAQ  
 <wijmo:C1Sparkline ID="sparkline2" runat="server" style="height:13px;  
 width:100px">  
 <SeriesList>  
 <wijmo:SparklineSeries Data="4100.63, 4069.29, 4090.59, 4125.82, 4096.89,  
 4131.54, 4154.34, 4185.81, 4237.07, 4225.07, 4247.95, 4242.62, 4237.20,  
 4234.08, 4251.64, 4296.23, 4321.40, 4336.24, 4338.00, 4331.93, 4297.63,  
 4310.65, 4321.11, 4337.23,4362.84, 4359.33, 4368.04, 4368.68, 4350.36,   
 4379.76">  
</wijmo:SparklineSeries>  
 </SeriesList>  
 </wijmo:C1Sparkline>  
 are both seeing steady growth over the past month.</span>  
 </div>  

Sparklines Inside C1GridView

To use sparkline inside a C1GridView we would have to use template columns and databind the sparkline either in the markup or in "C1GridView1_RowDataBound" event of the C1GridView. Let's say we need to show sales and profit trend as below

For this I have used a Sales class and SalesData class to generate dummy data. Here is the code.

public class Sales  
 {  
 public string Region { get; set; }  
 public string Month { get; set; }  
 public double Amount { get; set; }  
 public double Profit { get; set; }  

 }  
public class SalesData : List<Sales>  
 {  
  public SalesData()  
  {  
   var cl = new CultureInfo("en-US");  
   List<string> monthsList = new List<string>();  
   monthsList.AddRange(cl.DateTimeFormat.MonthNames.Take(12));  
   Random rn = new Random(1000);  
   Random rnd = new Random(500);  

  foreach (string month in monthsList)  
  {  
   this.Add(new Sales { Region = "East", Month = month, Amount = rn.Next(1000, 300  0),   
Profit = rnd.Next(1500, 2500) });  
   this.Add(new Sales { Region = "West", Month = month, Amount = rn.Next(1500, 250  0),   
Profit = rnd.Next(1000, 2000) });  
   this.Add(new Sales { Region = "North", Month = month, Amount = rn.Next(1000, 25  00),   
Profit = rnd.Next(2000, 2500) });  
   this.Add(new Sales { Region = "South", Month = month, Amount = rn.Next(2000, 30  00),  
 Profit = rnd.Next(1500, 2500) });  
  }  

  }  
}  

Here is the markup. Nothing special about the template column here.

<wijmo:C1GridView ID="C1GridView1" runat="server"  
 AutogenerateColumns="false" OnRowDataBound="C1GridView1_RowDataBound" width="450" Height="275">  
 <Columns>  
  <wijmo:C1BoundField DataField="Region" HeaderText="Region" Width="100">  
  </wijmo:C1BoundField>  
  <wijmo:C1TemplateField HeaderText="Yearly Sales Trend" Width="200">  
  <ItemTemplate>  
    <wijmo:C1Sparkline ID="saleschart" AutoResize="true" runat="server"></wijmo:C1Sparkline>  
  </ItemTemplate>  
</wijmo:C1TemplateField>  
<wijmo:C1TemplateField HeaderText="Total Sales" Width="160">  
 <ItemTemplate>  
  <wijmo:C1Sparkline ID="profitchart" AutoResize="true" runat="server"></wijmo:C1Sparkline>  
 </ItemTemplate>  
 </wijmo:C1TemplateField>  
</Columns>  
</wijmo:C1GridView>  

Now let's bind the grid to a list of "SalesData" values in the page load.

data = new SalesData();  
 var cdata=from c in data  
 group c by c.Region into cgp  
 select new   
 {  
 Region=cgp.First().Region,  
 Amount=cgp.Sum(x=>x.Amount),  
 Profit=cgp.Sum(x=>x.Profit),  
 Month=cgp.First().Month  
 };  
this.C1GridView1.DataSource = cdata.ToList();  
 this.C1GridView1.DataBind();  

Now we have to provide data to the sparkline charts. We will do that in RowDataBound event of the grid here. We will create one series each for sales and profit charts and set its "Bind" property to "Amount" and "Profit" respectively and then simply set the datasource of the chart. Here is the code.

protected void C1GridView1_RowDataBound(object sender,   
C1.Web.Wijmo.Controls.C1GridView.C1GridViewRowEventArgs e)  
 {  
  if (e.Row.RowType == C1.Web.Wijmo.Controls.C1GridView.C1GridViewRowType.DataRow)  
  {  
   string region = DataBinder.Eval(e.Row.DataItem, "Region").ToString();  
   C1Sparkline chart = (C1Sparkline)e.Row.FindControl("saleschart");  
   C1Sparkline profitchart = (C1Sparkline)e.Row.FindControl("profitchart");  
//Get data for chart  
    var chartdata = from cdata in data  
    where cdata.Region == region  
    select cdata;  
 //Create sales chart  
  SparklineSeries series = new SparklineSeries();  
  series.Bind = "Amount";  
  series.Type = SparklineType.Column;  
  chart.SeriesList.Add(series);  
  chart.DataSource = chartdata.ToList();  
  chart.DataBind();  
 //create profit chart  
  SparklineSeries profitseries = new SparklineSeries();  
  profitseries.Bind = "Profit";  
  profitseries.Type = SparklineType.Line;  
  profitchart.SeriesList.Add(profitseries);  
  profitchart.DataSource = chartdata.ToList();  
  profitchart.DataBind();  

  }  
}  

It is pretty simple to configure and use the the sparkline control as we have seen above. You can see more samples on how to use the sparkline control here.