Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Facing issues implementing HighCharts for dynamic data in ASP.NET web form application

This is the HighCharts JS code that I am using in my aspx page :

Highcharts.chart('highcharts1', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Number of MSMEs By District',
                align: 'left'
            },
            //subtitle: {
            //    text: 'Source: <a ' +
            //        'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
            //        'target="_blank">Wikipedia.org</a>',
            //    align: 'left'
            //},
            xAxis: {
                //categories: ['Africa', 'America', 'Asia', 'Europe'],
                categories: JSON.parse(jsonDistrict),
                title: {
                    text: null
                },
                gridLineWidth: 1,
                lineWidth: 0
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Population (millions)',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                },
                gridLineWidth: 0
            },
            tooltip: {
                valueSuffix: ' millions'
            },
            plotOptions: {
                bar: {
                    borderRadius: '50%',
                    dataLabels: {
                        enabled: true
                    },
                    groupPadding: 0.1
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 80,
                floating: true,
                borderWidth: 1,
                backgroundColor:
                    Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Year 1990',
                data: [631, 727, 3202, 721]
            }, {
                name: 'Year 2000',
                data: [814, 841, 3714, 726]
            }, {
                name: 'Year 2018',
                data: [1276, 1007, 4561, 746]
            }]
        });

I got this code from the official HighCharts website and it’s showing the chart based on a static data mentioned in the code as you can see commented. Now I am trying to implement the same chart but to generate dynamic data for xAxis categories and also the series data.

I have a CS code in the background which is getting the names of districts from PLSQL database and generating a json in the format like this [‘ABC’,’XYZ’,’PQR’]:

protected string BindDataToChart()
        {
            DataTable dt = objBO.Get_MSME_Chart_Data(new object[] { null });
            List<string> districtName = new List<string>();

            foreach(DataRow row in dt.Rows)
            {
                districtName.Add(row["DISTRICT_NAME"].ToString());
            }

            string jsonDistrict = JsonConvert.SerializeObject(districtName, Formatting.Indented);

            return jsonDistrict;
           
        }

However I am not able to send the district names getting generated in the CS file and append the same in JS code xAxis Categories in my aspx page. I have went trough several online resources from official HighCharts website to StackOverflow in the last 2 days but I am still unsuccessful on this.

Also I am getting the counts also in the similar fashion which I would like to implement in the JS code series data.

Sorry for my English and thanks for helping me out.

Tags:

2

Answers


  1. 0

    I have created a full functional example for you.
    This is the "Default.aspx" page:

    <%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormHighChart._Default" %>

    <!DOCTYPE html>

    <html lang="en">
    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title><%: Page.Title %> - My ASP.NET Application</title>

        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/series-label.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/modules/export-data.js"></script>
        <script src="https://code.highcharts.com/modules/accessibility.js"></script>

        <style>
            .highcharts-figure,
            .highcharts-data-table table {
                min-width: 360px;
                max-width: 800px;
                margin: 1em auto;
            }

            .highcharts-data-table table {
                font-family: Verdana, sans-serif;
                border-collapse: collapse;
                border: 1px solid #ebebeb;
                margin: 10px auto;
                text-align: center;
                width: 100%;
                max-width: 500px;
            }

            .highcharts-data-table caption {
                padding: 1em 0;
                font-size: 1.2em;
                color: #555;
            }

            .highcharts-data-table th {
                font-weight: 600;
                padding: 0.5em;
            }

            .highcharts-data-table td,
            .highcharts-data-table th,
            .highcharts-data-table caption {
                padding: 0.5em;
            }

            .highcharts-data-table thead tr,
            .highcharts-data-table tr:nth-child(even) {
                background: #f8f8f8;
            }

            .highcharts-data-table tr:hover {
                background: #f1f7ff;
            }
        </style>
    </head>
    <body>
        <form runat="server">

            <figure class="highcharts-figure">
                <div id="highcharts1"></div>

            </figure>

            <script type="text/javascript">
                Highcharts.chart('highcharts1', {
                    chart: {
                        type: 'bar'
                    },
                    title: {
                        text: 'Number of MSMEs By District',
                        align: 'left'
                    },              
                    xAxis: {                    
                        categories: <%=JsonDistrict%>,
                        title: {
                            text: null
                        },
                        gridLineWidth: 1,
                        lineWidth: 0
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Population (millions)',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        },
                        gridLineWidth: 0
                    },
                    tooltip: {
                        valueSuffix: ' millions'
                    },
                    plotOptions: {
                        bar: {
                            borderRadius: '50%',
                            dataLabels: {
                                enabled: true
                            },
                            groupPadding: 0.1
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -40,
                        y: 80,
                        floating: true,
                        borderWidth: 1,
                        backgroundColor:
                            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                        shadow: true
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        name: 'Year 1990',
                        data: [631, 727, 3202, 721]
                    }, {
                        name: 'Year 2000',
                        data: [814, 841, 3714, 726]
                    }, {
                        name: 'Year 2018',
                        data: [1276, 1007, 4561, 746]
                    }]
                });

            </script>


        </form>
    </body>
    </html>

    And here is the code behind for it :

        using Newtonsoft.Json;
    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    namespace WebFormHighChart
    {
        public partial class _Default : Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {

            }

            protected string BindDataToChart()
            {
                string jsonDistrict = "['Africa', 'America', 'Asia', 'Europe']";
                return jsonDistrict;
            }

            public string JsonDistrict { get => BindDataToChart(); }
        }
    }

    As you can see, I make use of a property called "JsonDistrict" to populate the javascript chart configuration. You can define also a JS variable and put the content inside in a similar way and then use it as needed.

    Login or Signup to reply.
  2. 0

    There’s a small issue in your code with how you’re using jsonDistrict. Since your function BindDataToChart() returns an array of strings, you already have the data in the correct format. You can embed it in your JS like this:

    let districtNames = <%= BindDataToChart() %>;

    Then, in your options, you can use:

    categories: districtNames,
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search