locked
Create Chart RRS feed

  • Question

  • User1126057398 posted

    What's the best way to create Chart using jquery using DB values?

    Sunday, March 31, 2019 4:46 PM

Answers

  • User839733648 posted

    Hi geetasks,

    According to your description, I suggest that you could use Chart.js plugin.

    I've made a sample and maybe you could refer to. You could use Ajax to get the data from code-behind.

    .aspx

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://cdn.jsdelivr.net/excanvas/r3/excanvas.js" type="text/javascript"></script>
        <script src="http://cdn.jsdelivr.net/chart.js/0./Chart.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                LoadChart();
            });
            function LoadChart() {
                $.ajax({
                    type: "POST",
                    url: "ChartJS.aspx/getData",
                    data: {},
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        var cData = result.d;
                        var arr = [];
                        $.each(cData, function (index, val) {
                            var obj = {};
                            obj.color = val.color;
                            obj.value = val.percentage;
                            obj.label = val.colorname;
                            arr.push(obj);
                        });
                        var el = document.createElement('canvas');
                        $("#myChart")[0].appendChild(el);
                        var ctx = el.getContext("2d");
                        var chart = new Chart(ctx).Pie(arr);
    
                        for (var i = 0; i < arr.length; i++) {
                            var div = $("<div />");
                            div.css("margin-bottom", "10px");
                            div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + arr[i].color + "'></span> " + arr[i].label);
                            $("#myLegend").append(div);
                        }
                    }
                })
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <table border="0">
                <tr>
                    <td>
                        <div id="myChart">
                        </div>
                    </td>
                    <td>
                        <div id="myLegend">
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </body>
    </html>
    
    

    code-behind.

           public class ColorData
            {
                public string colorname { get; set; }
                public int percentage { get; set; }
                public string color { get; set; }
            }
            [WebMethod]
            public static List<ColorData> getData()
            {
                List<ColorData> colordata = new List<ColorData>();
                string[] arrColor = new string[] { "#FF0000", "#00FF00", "#FFFF00" };
                string constr = ConfigurationManager.ConnectionStrings["EmployeeManagementConnectionString"].ConnectionString;
                using (SqlConnection con = new SqlConnection(constr))
                {
                    string myquery = "SELECT * FROM tb_Color";
                    SqlCommand cmd = new SqlCommand();
                    cmd.CommandText = myquery;
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    con.Open();
                    SqlDataReader sdr = cmd.ExecuteReader();
                    if (sdr.HasRows)
                    {
                        int count = 0;
                        while (sdr.Read())
                        {
                            ColorData cData = new ColorData();
                            cData.colorname = sdr["ColorName"].ToString();
                            cData.percentage = Convert.ToInt32(sdr["Percentage"]);
                            cData.color = arrColor[count];
                            colordata.Add(cData);
                            count++;
                        }
                        
                    }
                }
                return colordata;
            }

    result:

    For more, you could refer to the link: https://www.aspsnippets.com/Articles/Implement-Free-HTML5-Canvas-charts-using-Chartjs-in-ASPNet.aspx

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 1, 2019 4:38 AM