Remove From My Forums

Create Chart

Question
0

Sign in to vote

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

Answered by:

Create Chart

Question

Answers