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

Question

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.

Answer 1

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,