Question

I’m new to web design and am trying to populate a highcharts pie chart with data from SQL Database using C#. I have done it sucessfully for a Bar Chart but am having trouble with a pie chart. Basically i have a table tblReport1 that contains 2 fields CustomerType and TotalOrders

I can get it to bring in the values but i can’t get my slices to rename to the data in CustomerType field. I have tried a couple of suggestions on this forum but can’t get them to work. Below is my code any suggestions would be grateful.

private void Report1()
{
    dsSeries = BindData();

    if (dsSeries == null) return;

    foreach (DataRow dr in dsSeries.Tables[0].Rows)
    {
        hidXCategories11.Add(dr["CustomerType"]);
    }

    foreach (DataRow dr1 in dsSeries.Tables[0].Rows)
    {
        hidValues11.Add(Convert.ToInt32(dr1["TotalOrders"]));
        yValues = hidValues11.ToArray(typeof(object)) as object[];
    }


    DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
    .InitChart(new Chart { PlotShadow = false })
    .SetTitle(new Title { Text = "Orders by Customer Type" })
    .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.y +' Orders'; }" })
    .SetPlotOptions(new PlotOptions
    {
        Pie = new PlotOptionsPie
        {
            ShowInLegend = true,
            AllowPointSelect = true,
            DataLabels = new PlotOptionsPieDataLabels
            {
                Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.y; }"
            }
        }
    })

    .SetSeries(new[]
       {
               new Series { Type = ChartTypes.Pie, Name = "help!", Data = new Data(yValues) }
       });



    ltrChart.Text = chart.ToHtmlString();

}

Answer 1

Looking at http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-basic/ the format for the pie chart data is two parts, the label and the data item.

In yours it looks like the series data is just a single array of integers.

So I think you’ll need to change your Series object to accept a different format of data.

Sadly the examples in the Highcharts.Net documentation are a little lacking and don’t seem to have examples of this so you might have to look at what the intellisense has to offer.

The bottom line though is that your pie wedges need to be named in the data series, not as categories or anything else.

Edit for some sample code

I was looking at their site and they have a help forum there with the following sample code amongst it

       series.Add(new Serie
        {
            data = new object[] { 
                new object[] { "Firefox", 45 }, 
                new object[] { "IE", 24.8 }, 
                new object[] { "Chrome", 12.8 },
                new object[] { "Safari", 8.5 }, 
                new object[] { "Opera", 5.2 }, 
                new object[] { "Outros", 3.7 } 
            }
        });

Source: http://highcharts.codeplex.com/discussions/269347

I can’t test this but from the context of the post it looks like it should do the job.