highcharts values from database in asp.net c#

Question

Tell me how to get value from database into highchart ,

Code of high chart.

$('#account_details_chart').highcharts({ chart: { type: 'areaspline' },

            legend: {
                layout: 'inline-block',
                align: 'right',
                verticalAlign: 'top',
                x: 0,
                y: 10,
                floating: true,
                borderWidth: 1,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },
            xAxis: {
                categories: company,
                plotBands: [{ // visualize the weekend
                    from: 6.5,
                    to: 6.5,
                    color: 'rgba(68, 170, 213, .2)'
                }]
            },
            yAxis: {
                title: {
                    text: 'Amount In Rupees'
                }
            },
            tooltip: {
                shared: true,
                valuePrefix: 'Rs. ',
                valueSuffix: ' /-'
            },
            credits: {
                enabled: true
            },
            plotOptions: {
                areaspline: {
                    fillOpacity: 0.5
                }
            },
            series: [{
                name: 'Debit Amount',
                data: debit_amount
            }, {
                name: 'Credit Amount',
                data: credit_amount
            }]
        });
    });

code behind.

protected void Page_Load(object sender, EventArgs e) {

    List<string> tempString = new List<string>();
    tempString.Add("Hello");
    tempString.Add("World");
    tempString.Add("Hello");
    tempString.Add("World");
    tempString.Add("Hello");
    tempString.Add("World");
    //string builder for binding data in script
    StringBuilder sb = new StringBuilder();
    sb.Append("<script>");
    sb.Append("var company = new Array;");
    foreach (string str in tempString)
    {
        sb.AppendFormat("company.push('{0}');", str);
    }
    sb.Append("</script>");
    //sending data through client script register
    ClientScript.RegisterStartupScript(this.GetType(), "TestArrayScript", sb.ToString());

    List<int> DebitAmount = new List<int>();
    DebitAmount.Add(2);
    DebitAmount.Add(3);
    DebitAmount.Add(2);
    DebitAmount.Add(4);

    StringBuilder sb2 = new StringBuilder();
    sb2.Append("<script type='text/javascript'>");
    sb2.Append("var debit_amount = new Array;");
    foreach (int str2 in DebitAmount)
    {
        sb2.AppendFormat("debit_amount.push('{0}');", str2);
    }
    sb2.Append("</script>");
    //sending data through client script register

    ClientScript.RegisterStartupScript(GetType(), "ArrayScript", sb2.ToString());

}

company array is working fine on the x-axis but the debit_amount array is not working

Answer 1

Your debit_amount and credit_amount are not a correct array.

        var company = ['Ford', 'Toyota', 'Suzuki', 'Opel', 'BMW', 'Mercedes'];
        var debit_amount = [['AAA', 34.03], ['BBB', 27.01], ['CCC', 18.77], ['DDD', 11.01], ['EEE', 5.91], ['FFF', 3.27]];
        var credit_amount = [6, 8, 2, 46, 57, 76];

        $('#account_details_chart').highcharts({
            chart: { type: 'areaspline' },
            legend: {
                layout: 'inline-block',
                align: 'right',
                verticalAlign: 'top',
                x: 0,
                y: 10,
                floating: true,
                borderWidth: 1,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },
            xAxis: {
                categories: company,
                plotBands: [{ // visualize the weekend
                    from: 6.5,
                    to: 6.5,
                    color: 'rgba(68, 170, 213, .2)'
                }]
            },
            yAxis: {
                title: {
                    text: 'Amount In Rupees'
                }
            },
            tooltip: {
                shared: true,
                valuePrefix: 'Rs. ',
                valueSuffix: ' /-'
            },
            credits: {
                enabled: true
            },
            plotOptions: {
                areaspline: {
                    fillOpacity: 0.5
                }
            },
            series: [{
                name: 'Debit Amount',
                data: debit_amount
            }, {
                name: 'Credit Amount',
                data: credit_amount
            }]
        });

You can create debit_amount in the same way as credit_amount, but then you won't have labels on each point on the chart.

And you don't need to write a string that pushes the values of an array in javascript. You can just write the complete string in array format.

        StringBuilder sb2 = new StringBuilder();
        sb2.Append("var debit_amount = [");
        foreach (int str2 in DebitAmount)
        {
            sb2.Append("['AAA', " + str2 + "],");
        }
        Literal1.Text = sb2.ToString().TrimEnd(',') + "];";

Answer 2

Create internal service which will return an ajax with correct format which the HighCharts will use with your data from database.

1) Call your service, which should return proper json.

2) On Ajax success method take the response and build the high chart.