Experiencing difficulties integrating HighCharts for real-time data in an ASP.NET web form application

Question

Experiencing difficulties integrating HighCharts for real-time data in an ASP.NET web form application

Below is the HighCharts JS code snippet that I have integrated into my aspx page:

Highcharts.chart('highcharts1', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Number of MSMEs By District',
                align: 'left'
            },
            xAxis: {
                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 sourced this code from the official HighCharts website to display a static dataset in the chart. However, I am now working on making the chart dynamic by fetching district names and counts from a PLSQL database.

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;
           
        }

I have been struggling to pass the dynamically generated district names from CS file to append to the JavaScript code's xAxis Categories section. Additionally, I plan to implement similar dynamic data for the series data in the chart.

I appreciate any assistance provided, thank you for your help.

javascript c#asp.net json highcharts

Answer 1

Answer №1

Your code has a minor issue related to how you are utilizing jsonDistrict. By having your function BindDataToChart() return an array of strings, the data is already in the correct format. To incorporate it into your JavaScript, follow these steps:

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

In your options section, make use of the following code:

categories: districtNames,

Answer 2

Your code has a minor issue related to how you are utilizing jsonDistrict. By having your function BindDataToChart() return an array of strings, the data is already in the correct format. To incorporate it into your JavaScript, follow these steps:

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

In your options section, make use of the following code:

categories: districtNames,

Answer 3

Answer №2

For your convenience, I have created a fully functional example. Here is the code snippet for 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;
            }
            
            // Additional styling rules here

        </style>
    </head>
    <body>
        <form runat="server"gt;

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

            </figure>

            <script type="text/javascript">
                // Highcharts configuration script goes here
            </script>


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

Below is the corresponding code-behind file :

    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(); }
        }
    }

In this example, I utilized a property named "JsonDistrict" to populate the javascript chart setup. You can adapt this approach by defining a JS variable with data and integrating it into your scripts as required.

Answer 4

For your convenience, I have created a fully functional example. Here is the code snippet for 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;
            }
            
            // Additional styling rules here

        </style>
    </head>
    <body>
        <form runat="server"gt;

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

            </figure>

            <script type="text/javascript">
                // Highcharts configuration script goes here
            </script>


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

Below is the corresponding code-behind file :

    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(); }
        }
    }

In this example, I utilized a property named "JsonDistrict" to populate the javascript chart setup. You can adapt this approach by defining a JS variable with data and integrating it into your scripts as required.

Experiencing difficulties integrating HighCharts for real-time data in an ASP.NET web form application

Answer №1

Answer №2

Similar questions

Safari browser is experiencing issues with the custom file upload script

Google HTTP/REST OAuth: The authorisation code request contains a state parameter for the database user, while the access token request does not

Enhancing Angular template through iteration

Repetitive submissions of a form through Ajax post requests

Adjust the dropdown selection when the page is reloaded from the server

Utilizing FlatList in React Native to display a parsed JSON array response

Challenges with JavaScript calculations on dynamic HTML forms

Using Angular's $q service in the run block

What could be causing the jquery event not to be triggered?

Dynamic cell loading in Vue using Vuetify's datatable functionality

Using AJAX and jQuery for database connectivity allows for seamless data retrieval and manipulation

Modifications to aspx files will only be reflected after a rebuild

What could be causing the kendo autocomplete to display [object Object]?

Add a fresh category to a JSON document

The array's value was altered without any direct modification

Enhancing speed and efficiency through the utilization of Three.js

When using the combination of JBoss, RestEasy, and Jackson, you may encounter the error message: "Attempting to cast org.jboss.resteasy.core.ServerResponse to org.jboss.re

Tips for Enhancing Generic Type field using JsonFormat

Accessing the content of a dynamically generated HTML Textbox in ASP.NET, which is one of multiple text boxes with unique IDs, in order to incorporate it into a href URL as a query string

When incorporating a Textarea element within styled components in ReactJS, it causes the text to be inputted backwards due to the cursor