dotnet HighCharts SpiderWeb

Today I would like to show how to obtain a spiderweb (or spidergraph) chart with the dotnet.Highcharts libraries.

First of all let’s create the webform container as usual.

Here it is important to import the highcharts-all.js library (an not the highcharts.js).

Alternatively we can import the highcharts.js and the highcharts-more.js libraries.

<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">

    <script src="/../Scripts/metro-ui/metro.min.js"></script>

    <script src="/../Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>

    <!---------------------------------------------------
        NOTE: 
        The javascript to import is the highcharts-all.js 

    ------------------------------------------------------>
    <script src="/../Scripts/Highcharts-4.0.1/js/highcharts-all.js" type="text/javascript"></script>
    <script src="/../Scripts/js/exporting.src.js" type="text/javascript"></script>
    <script src="/../Scripts/js/export-csv.js" type="text/javascript"></script>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">

    <h2 class="title-area-title fg-blue">Pizza SpiderWeb Chart</h2>

    <asp:Literal ID="chrtMyChart" runat="server"></asp:Literal>

</asp:Content>

Codebehind

In order to get a Polar chart we need to act in two specific points:

• – InitChart
• – SetYAxis

Referring to my other posts about the HighCharts databinding in C#, let’s init the chart.

Inside the .InitChart method let’s declare the chart as Polar setting the relate flag to true:

// Note the Polar flag
.InitChart(new Chart 
{ 
	Polar = true, 
	Type = ChartTypes.Line 
})

Inside the SetYAxis we need to specify that the line interpolation is “polygon”.

.SetYAxis(new YAxis
{
	// Note the "poligon" interpolation for the grid
	GridLineInterpolation = "polygon",
	LineWidth = 0,
	Min = 0,
})

Compacting the code:

protected void renderChart(List<List<Object>> values, string title, string subtitle, string chartId, Literal ltrRendering)
{

	List<Object> serie1 = new List<Object>();
	List<string> yAxis = new List<string>();

	serie1.AddRange(values[1].ToList());

	foreach (object s in values[0].ToList())
		yAxis.Add(s.ToString());

	DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts(chartId)

		// Note the Polar flag
		.InitChart(new Chart 
		{ 
			Polar = true, 
			Type = ChartTypes.Line 
		})
		
		.SetTitle(new Title { Text = title })
		
		.SetSubtitle(new Subtitle { Text = subtitle })
		
		.SetPane(new Pane { Size = new PercentageOrPixel(80, true) })

		.SetXAxis(new XAxis
		{
			Categories = yAxis.ToArray(),
			TickmarkPlacement = Placement.On,
			LineWidth = 0,
			Min = 0,
		})
		
		.SetYAxis(new YAxis
		{
			// Note the "poligon" interpolation for the grid
			GridLineInterpolation = "polygon",
			LineWidth = 0,
			Min = 0,
		})

		.SetTooltip(new Tooltip
		{
			Shared = true,
		})
		
		.SetLegend(new Legend
		{
			Align = HorizontalAligns.Right,
			VerticalAlign = VerticalAligns.Top,
			Y = 100,
			Layout = Layouts.Vertical
		})
		
		.SetSeries(new[]
		{
			new Series
			{
				Name = title,
				Data = new Data(serie1.ToArray()),
				PlotOptionsLine = new PlotOptionsLine
				{ 
					PointPlacement = new PointPlacement(Placement.On)
				
				}
			}
		})
		
		.SetCredits(new Credits
		{
			Enabled = false
		});

	chart.SetLabels(new Labels { });
	chart.SetLegend(new Legend { Enabled = false });
	
	ltrRendering.Text = chart.ToHtmlString();
}

And this is the final result.

You can find the complete example in my bitbucket repository (click on the image)

I hope you can find useful this article.

Feel free to post comments or to ask me for additional info.