'jQuery Canvasjs Charts not displaying properly after passing data dynamically

i am trying to work on jquery canvasjs charts by passing the data dynamically from my c# codebehind. But the chart is not displaying properly.

Here is the code what i tried to do

My client side code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testchartwithoutmaster.aspx.cs" Inherits="WebPages_testchartwithoutmaster" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="/Scripts/js/jquery-ui-1.9.2.js"></script>
    <script type="text/javascript" src="/Scripts/canvasjs.min.js"></script>
    <script type="text/javascript">

    $(function () {
        LoadChart();
    });

    function LoadChart() {
        $.ajax({
            type: "POST",
            url: "testchart.aspx/GetChart",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = eval(r.d);
                var chart = new CanvasJS.Chart("chartContainer",
                    {
                        theme: "theme3",
                        animationEnabled: true,
                        title: {
                            text: "Crude Oil Reserves Vs Production, 2011",
                            fontSize: 30
                        },
                        toolTip: {
                            shared: true
                        },
                        axisY: {
                            title: "billion of barrels"
                        },
                        axisY2: {
                            title: "million barrels/day"
                        },
                        data: [{
                            type: "column",
                            name: "Proven Oil Reserves (bn)",
                            legendText: "Proven Oil Reserves",
                            showInLegend: true,
                            dataPoints: data
                        },
                        {
                            type: "column",
                            name: "Oil Production (million/day)",
                            legendText: "Oil Production",
                            axisYType: "secondary",
                            showInLegend: true,
                            dataPoints: data
                        }],
                        legend: {
                            cursor: "pointer",
                            itemclick: function (e) {
                                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                                    e.dataSeries.visible = false;
                                }
                                else {
                                    e.dataSeries.visible = true;
                                }
                                chart.render();
                            }
                        },
                    });
                chart.render();
            }

        });
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="chartContainer" style="height: 500px; width: 50%;">
            </div>
        </div>
    </form>
</body>
</html>

My server side code:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class WebPages_testchart : System.Web.UI.Page
{
    [WebMethod]
    public static string GetChart()
    {
        string constr = ConfigurationManager.ConnectionStrings["LocalSqlServer"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            string query = string.Format(@"select 'saudi','11.15' union all
                      select 'venezuela','2.5' union all
                      select 'canada','3.6' union all
                      select 'Iran','4.2' union all
                      select 'Iraq','2.6'");
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = query;
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    StringBuilder sb = new StringBuilder();
                    sb.Append("[");
                    while (sdr.Read())
                    {
                        sb.Append("{");


                        sb.Append(string.Format("label :'{1}', y:'{0}'", sdr[0], sdr[1]));
                        sb.Append("},");
                    }
                    sb = sb.Remove(sb.Length - 1, 1);
                    sb.Append("]");
                    con.Close();
                    return sb.ToString();
                }
            }
        }
    }
}

In this way i tried but its not showing properly.

jquerycanvasjs


Solution 1:[1]

I've met the same question as you that it's unable to display the canvasjs chart's column data immediately.

you should add async:false before success in ajax

the following is my ajax code

$.ajax({
    type: "post",
    url:$_url,
    data: { queryDays:parseInt( days) },
    async:false,
    success: function (data) {
        for(let i=0;i<data.length;i++)
        {
            barData[i] = {label:data[i].sitename , y:parseInt( data[i].times),indexLabel:data[i].times};
        }
    },
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Taylan Yuksel

Related Questions