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.