Home » .NET » dotnet HighCharts SpiderWeb

About Francesco Balsamo

Francesco Balsamo
Francesco is a senior electronic engineer working in Telecom domain. He has a wide experience as software and applications development as well as business analysis. Founder of the balsamino.com blog as a way to share knowledge.

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.

39eee751af30032eeece2f48de2de4ba_XL

<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)

balsaminonewLogo

I hope you can find useful this article.

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

Reference: dotnet HighCharts SpiderWeb from our NCG partner Francesco Balsamo at the balsamino.com blog.
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a sysadmin Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Introduction to NGINX
2. Apache HTTP Server Cookbook
3. VirtualBox Essentials
4. Nagios Monitoring Cookbook
5. Linux BASH Programming Cookbook
6. Postgresql Database Tutorial
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments