Create an area chart

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

<highchart:areachart id="hcPopulacao" width="620" height="420" runat="server"></highchart:areachart>

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

 

// Titles
hcPopulacao.Title = new Title("Estimativa da população mundial por região");
hcPopulacao.SubTitle = new SubTitle("fonte: wikipedia.org");
 
//defining Axis
hcPopulacao.YAxis.Add(new YAxisItem { title = new Title("Porcentagem") }); hcPopulacao.XAxis.Add(new XAxisItem { categories = new[] { "1750", "1800", "1850", "1900", "1950", "1999", "2050" } }); //Config to stacking based on percent hcPopulacao.PlotOptions = new PlotOptionsArea { stacking = Stackting.percent, lineColor = "#ffffff", lineWidth = 1, fillOpacity = 0.45 }; //data var series = new Collection<serie>(); series.Add(new Serie { name = "Ásia", data = new object[] { 502, 635, 809, 947, 1402, 3634, 5268 } }); series.Add(new Serie { name = "África", data = new object[] { 106, 107, 111, 133, 221, 767, 1766 } }); series.Add(new Serie { name = "Europa", data = new object[] { 163, 203, 276, 408, 547, 729, 628 } }); series.Add(new Serie { name = "América", data = new object[] { 18, 31, 54, 156, 339, 818, 1201 } }); series.Add(new Serie { name = "Oceânia", data = new object[] { 2, 2, 2, 6, 13, 30, 46 } }); //tooltip hcPopulacao.Tooltip = new ToolTip("Highcharts.numberFormat(this.percentage, 1) +'% ('+ Highcharts.numberFormat(this.y, 0, ',') +' milhões)'"); //bind hcPopulacao.DataSource = series; hcPopulacao.DataBind();

 

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

image

 

See a working area chart created by Highcharts .Net :  http://highcharts.100loop.com/Sample04.aspx

Return to Index

Last edited Jan 18, 2012 at 8:04 PM by alrcastro, version 3

Comments

No comments yet.