Create an area spline chart

To generate an area spline chart, simply create a 'AreaSplineChat' control on your page as follows:

<highchart:areasplinechart id="hcTemperatura" width="600" height="380" runat="server"></highchart:areasplinechart>

Set the Axis, title and bind your datasource to the control:

//Title
hcTemperatura.Title = new Title("Consumo de energia");
 
//definining axis
hcTemperatura.YAxis.Add(new YAxisItem { title = new Title("Kw/hora") });
hcTemperatura.XAxis.Add(new XAxisItem { categories = new[] { "domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado" } });
 
//Data
var series = new Collection<serie>();
series.Add(new Serie { name = "geladeira", data = new object[] { 10, 11, 12, 10, 9, 7, 9 } });
series.Add(new Serie { name = "televisão", data = new object[] { 4, 6, 7, 7, 8, 13, 11 } });
 
//Making the graphics become on top of each other, and setting opacity
hcTemperatura.PlotOptions = new Core.PlotOptions.PlotOptionsAreaSpline { stacking = Stackting.normal, fillOpacity = 0.3 };
 
//customizing the tooltip
hcTemperatura.Tooltip = new ToolTip("this.x +': '+ this.y +' Kw/hora'");
 
//customizing the legend
hcTemperatura.Legend = new Legend { layout = Layout.vertical, 
                                    borderWidth = 3, 
                                    align = Align.right,
                                    y = 20,
                                    x = -20,
                                    verticalAlign = Core.VerticalAlign.top,
                                    shadow = true,
                                    backgroundColor = "#e3e6be"
                                  };
 
//bind
hcTemperatura.DataSource = series;
hcTemperatura.DataBind();

That’s all! just build it and execute, the result should be like this:

image

 

 

See a working Area Spline chart created by Highcharts .Net :  http://highcharts.100loop.com/Sample03.aspx

Return to Index

Last edited Jan 18, 2012 at 9:03 PM by alrcastro, version 6

Comments

Geobin Feb 14, 2014 at 10:24 AM 
Hi guys!
Isn't the "Stacking.normal, fillOpacity" instead of "Stackting.normal.." ? Thanks.