Use of DotNet HighCharts dll to make charts in code behind

11,366

I'm not familiar with the library but all this code appears to be doing is creating an object in the code behind. You will need to do something to cause this to render in to the page.

Looking at their example code behind code there is a line

ltrChart.Text = chart.ToHtmlString();

This is the bit you are missing. You need to call ToHtmlString() on your chart object and assign this string to a literal or placeholder in the page.

To create the literal just add this code somewhere on the page....

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

...and your chart should appear there.

Share:
11,366
Admin
Author by

Admin

Updated on June 04, 2022

Comments

  • Admin
    Admin almost 2 years

    I just discovered the DotNetHighCharts dll to make charts: http://dotnethighcharts.codeplex.com/

    I added the dll to my project and put a sample code to get a pie in my Page_Load event ( i'm not working with MVC right now, so i just took what was in the controller of the demo )

        protected void Page_Load(object sender, EventArgs e)
        {
            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 DotNet.Highcharts.Options.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 }
                                           })
            });
    
        }
    }
    

    }

    the problem is that northing appears in my page with this Is there anything to add ? Thanks in advance