Member Avatar for krunalkakadia

hi all,

I have to made a piechart in highchart control for asp.net?

any one have work in it?any source code or help will be appreciated?

thank you,
KK

  • 3 Contributors
  • 3 Replies
  • 554 Views
  • 11 Months Discussion Span
  • Latest Post Latest Post by Vangi

Dani AI

Generated

Two practical ways to get a Highcharts pie working from ASP.NET (server-side data):

As wants to bind server data, you can either use a server-side wrapper (as suggested) to build the chart in C#, or keep Highcharts client-side and feed it server-produced JSON (simpler when binding a GridView/DataTable). 's point about including the Highcharts JS still applies: the client needs the library loaded.

A lightweight workflow (recommended for WebForms):

  1. Extract rows from your GridView/DataTable into a simple list of pairs (label, numeric value).
  2. Serialize that list to JSON on the server and emit it into the page (Literal) or return it from an AJAX/WebMethod.
  3. In JavaScript, assign the JSON to a variable and pass it to Highcharts as the pie series data.
  4. Render the chart after the Highcharts script has loaded and the DOM is ready.

Example (minimal):

// server-side: produce JSON (needs Newtonsoft.Json or JavaScriptSerializer)
var list = new List<object[]> {
    new object[] { "Category A", 40 },
    new object[] { "Category B", 30 },
    new object[] { "Category C", 30 }
};
var json = Newtonsoft.Json.JsonConvert.SerializeObject(list);
ChartDataLiteral.Text = json; // use an ASP Literal so JSON is emitted raw
<div id="container"></div>

<script>
var pieData = <%= ChartDataLiteral.Text %>;
Highcharts.chart('container', {
  chart: { type: 'pie' },
  series: [{ name: 'Values', data: pieData }]
});
</script>

Troubleshooting tips:

  • Ensure the Literal does not HTML-encode the JSON; the script must see raw arrays/objects.
  • Numeric values must be numbers (not strings) in JSON.
  • If using AJAX/WebMethod, mark it static and return JSON; call it with jQuery and init the chart in the success callback.
  • Watch for culture/decimal separators and escape strings safely to avoid broken JS.
  • If you prefer a full server-side API, the wrapper mentioned will do that; otherwise JSON+client init is the most flexible.

Check Highcharts licensing for your project before deployment.

Recommended Answers

All 3 Replies

Member Avatar for kvprajapati

Download HighChart and you will find number of samples.

Member Avatar for krunalkakadia

hi,

thank you for reply. i am stucked here since last two days.

i have already downloaded this and have done with JS. but i want to apply it to asp.net . file.

i want to import through .dll that i can bind grid or some other control datra to it.means i want to bind server side data.

Member Avatar for Vangi

The best way to do this is by using library. You can build the Highchart entirely on the server side and there are a lot of including Pie charts.

Here is one of the samples:

Highcharts chart = new Highcharts("chart")
                .InitChart(new Chart { PlotShadow = false })
                .SetTitle(new Title { Text = "Browser market shares at a specific website, 2010" })
                .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
                .SetPlotOptions(new PlotOptions
                                {
                                    Pie = new PlotOptionsPie
                                          {
                                              AllowPointSelect = true,
                                              Cursor = Cursors.Pointer,
                                              DataLabels = new PlotOptionsPieDataLabels
                                                           {
                                                               Color = ColorTranslator.FromHtml("#000000"),
                                                               ConnectorColor = ColorTranslator.FromHtml("#000000"),
                                                               Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
                                                           }
                                          }
                                })
                .SetSeries(new Series
                           {
                               Type = ChartTypes.Pie,
                               Name = "Browser share",
                               Data = new Data(new object[]
                                               {
                                                   new object[] { "Firefox", 45.0 },
                                                   new object[] { "IE", 26.8 },
                                                   new Point
                                                   {
                                                       Name = "Chrome",
                                                       Y = 12.8,
                                                       Sliced = true,
                                                       Selected = true
                                                   },
                                                   new object[] { "Safari", 8.5 },
                                                   new object[] { "Opera", 6.2 },
                                                   new object[] { "Others", 0.7 }
                                               })
                           });
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.