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:

sparkline


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.

Current trends indicate that the DOW






and NASDAQ






are both seeing steady growth over the past month.




 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

SparklineGrid


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
{
public SalesData()
{
var cl = new CultureInfo("en-US");
List monthsList = new List();
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.
 AutogenerateColumns="false" OnRowDataBound="C1GridView1_RowDataBound" width="450" Height="275">

















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.