locked
Dynamically plot value in chartjs RRS feed

  • Question

  • User1126057398 posted

    Is it possible to update chart js based on value entered in grid? What I was trying to do is in case user enters say 'Hours spend' on some activity in some textbox or update value in gridview automatically graph will be updated.

    Tuesday, June 18, 2019 7:02 AM

Answers

  • User839733648 posted

    Hi geetasks,

    According to your description, I suggest that you could achieve your requirement following two steps.

    The key point is that you should use database as the connection.

    First, create a gridview and bind it to database. Write a RowUpdating event to update the value in the gridview dynamically.

    Second, pass the data from the database to the chart you want to show using Ajax. You should pay attention to the format of the chart.

    When you update the value in the gridview,the page will refresh and the graph will update automatically.

    Here is my testing code and you could refer to.(I use barchart as example)

    .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>
            $.ajax({
                type: "POST",
                url: "ChartjsDemo.aspx/getData",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var getData = result.d;
                    var arrlabel = [];
                    var arrdata = [];
                    $.each(getData, function (index, val) {
                        arrlabel.push(val.itemname);
                        arrdata.push(val.itemcount);
                    });
                    var showdata = {
                        labels: arrlabel,
                        datasets: [{
                            label: "My First dataset",
                            data: arrdata
                        }]
                    };
                    var el = document.createElement('canvas');
                    $("#myChart")[0].appendChild(el);
                    var ctx = el.getContext('2d');
                    var chart = new Chart(ctx).Bar(showdata);
                }
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ItemID" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating">
            <Columns>
                <asp:BoundField DataField="ItemID" HeaderText="ItemID" ></asp:BoundField>
                <asp:TemplateField HeaderText="ItemName">
                    <EditItemTemplate>
                        <asp:TextBox ID="NameTxt" runat="server" Text='<%# Bind("ItemName") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="NameLab" runat="server" Text='<%# Bind("ItemName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="ItemCount">
                    <EditItemTemplate>
                        <asp:TextBox ID="CountTxt" runat="server" Text='<%# Bind("ItemCount") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="CountLab" runat="server" Text='<%# Bind("ItemCount") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:CommandField HeaderText="Operation" ShowEditButton="True" />
            </Columns>
        </asp:GridView>
            <br />
            <div id="myChart"></div>
        </form>
    </body>
    </html>

    code behind.

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindGridView();
                }
            }
            string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
            public void BindGridView()
            {
                SqlConnection con = new SqlConnection(constr);
                con.Open();
                SqlCommand cmd = new SqlCommand("select * from tb_ChartJs", con);
                SqlDataAdapter sda = new SqlDataAdapter(cmd);
                DataSet ds = new DataSet();
                sda.Fill(ds);
                GridView1.DataSource = ds;
                GridView1.DataBind();
                con.Close();
            }
    
            protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
            {
                GridView1.EditIndex = e.NewEditIndex;
                BindGridView();
            }
    
            protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
            {
                string id = GridView1.DataKeys[e.RowIndex].Values[0].ToString();
                string itemname = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("NameTxt")).Text;
                string itemcount = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("CountTxt")).Text;
                string strUpdate = "update tb_ChartJs set ItemName='" + itemname + "',ItemCount='" + itemcount + "'where ItemID=" + id;
                SqlConnection con = new SqlConnection(constr);
                con.Open();
                SqlCommand cmd = new SqlCommand(strUpdate, con);
                cmd.ExecuteNonQuery();
                con.Close();
                GridView1.EditIndex = -1;
                BindGridView();
            }
    
            public class PostData
            {           
                public string itemname { get; set; }
                public int itemcount { get; set; }
                //public string color { get; set; }
            }
    
            [WebMethod]
            public static List<PostData> getData()
            {
                List<PostData> postdata = new List<PostData>();
                string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
                using (SqlConnection con = new SqlConnection(constr))
                {
                    string myquery = "SELECT * FROM tb_ChartJs";
                    SqlCommand cmd = new SqlCommand();
                    cmd.CommandText = myquery;
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        if (sdr.HasRows)
                        {
                            int count = 0;
                            while (sdr.Read())
                            {
                                PostData pData = new PostData();
                                pData.itemname = sdr["ItemName"].ToString();
                                pData.itemcount = Convert.ToInt32(sdr["ItemCount"]);
    
                                postdata.Add(pData);
                                count++;
                            }
                        }
                    }
                    con.Close();
                    return postdata;
                }
                           
            }

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 19, 2019 8:26 AM
  • User839733648 posted

    Hi geetasks,

    geetasks

    Though now chart is displaying ok but the issue is that in my case initially there will be no record(in datatable which further binds gridview), then, records are added one by one. When I added one record say 'Apple' in your case it's not displaying any bar chart. I had tested the same for your code by creating a breakpoint and inserting only one record in 'postdata'. It's not displaying any bar. 

    The issue happens because of using the old version of ChartJS. That may be a bug. The latest version has already fixed that.

    I've modified the version to the latest from: https://cdnjs.com/libraries/Chart.js and it could show one data now.

    Here is working code.

    You should pay attention that the way of defining the chart is different from that of the old version.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" type="text/javascript"></script>
        <script>
            $.ajax({
                type: "POST",
                url: "ChartjsDemo.aspx/getData",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var getData = result.d;
                    var arrlabel = [];
                    var arrdata = [];
                    $.each(getData, function (index, val) {
                        arrlabel.push(val.itemname);
                        arrdata.push(val.itemcount);
                    });
    
                    var ctx = document.getElementById("myChart").getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: arrlabel,
                            datasets: [{
                                label: "My First dataset",
                                data: arrdata
                            }]
                        }
                    });
                }
            })
        </script>
        <style>
            .container {
                width: 30%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ItemID" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating">
                <Columns>
                    <asp:BoundField DataField="ItemID" HeaderText="ItemID"></asp:BoundField>
                    <asp:TemplateField HeaderText="ItemName">
                        <EditItemTemplate>
                            <asp:TextBox ID="NameTxt" runat="server" Text='<%# Bind("ItemName") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="NameLab" runat="server" Text='<%# Bind("ItemName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="ItemCount">
                        <EditItemTemplate>
                            <asp:TextBox ID="CountTxt" runat="server" Text='<%# Bind("ItemCount") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="CountLab" runat="server" Text='<%# Bind("ItemCount") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:CommandField HeaderText="Operation" ShowEditButton="True" />
                </Columns>
            </asp:GridView>
            <br />
            <div class="container">
                <div>
                    <canvas id="myChart"></canvas>
                </div>
            </div>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 9:03 AM
  • User1126057398 posted

    Thanks Jenifer.

    I had done it in code behind ie in .cs.I had created one method and called it after user adds/edit/delete data in datatable
    private void displayChart()
    {
    DataTable tb = (DataTable)ViewState["Activities"];
    // List<ActivityChartData> listChartData = new List<ActivityChartData>();
    IEnumerable<ActivityChartData> groupedByCategory = tb.AsEnumerable()
    .GroupBy(row => row.Field<int>("CATEGORY_CODE"))
    .Select(g => new ActivityChartData
    {
    CategoryId = g.Key,
    Category = g.Select(r => r.Field<string>("CATEGORY")).FirstOrDefault(),
    HoursSpent = g.Sum(r => r.Field<decimal>("DURATION_HOUR"))
    });
    if(groupedByCategory.Count() > (int)CommonEnum.NumberAlphabets.Zero)
    {
    String chart = "";
    chart = "<canvas id=\"chart-canvaspn1\"></canvas><script>";
    chart += "new Chart(document.getElementById(\"chart-canvaspn1\"),{type: 'horizontalBar', data:{ labels: [";
    // put data from database to chart
    String label = "";
    foreach (ActivityChartData ac in groupedByCategory)
    label += "'" + ac.Category.ToString() + "',";
    label = label.Substring(0, label.Length - 1);
    chart += label;

    chart += "],datasets: [{ data: [";

    // put data from database to chart
    String value = "";
    foreach(ActivityChartData ac in groupedByCategory)
    value += ac.HoursSpent.ToString() + ",";
    value = value.Substring(0, value.Length - 1);

    chart += value;
    chart += "],label: \"Hours Spent\", borderColor: \"#3e95cd\",backgroundColor: \"#ffc266\", scaleShowGridLines: false,showScale: false,fill: true}"; // Chart color
    chart += "]}, options: { title: { display: true}, legend: {position: 'bottom'},scales: { xAxes: [{gridLines: {display:false}, ticks:{beginAtZero:true}}], yAxes: [{gridLines:{display:false},barPercentage: 0.2,maintainAspectRatio:false}]}}"; // Chart title
    chart += "},{ responsive: true});";
    chart += "</script>";

    ltActivityChart.Text = chart;
    }
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 12:59 PM

All replies

  • User839733648 posted

    Hi geetasks,

    According to your description, I suggest that you could achieve your requirement following two steps.

    The key point is that you should use database as the connection.

    First, create a gridview and bind it to database. Write a RowUpdating event to update the value in the gridview dynamically.

    Second, pass the data from the database to the chart you want to show using Ajax. You should pay attention to the format of the chart.

    When you update the value in the gridview,the page will refresh and the graph will update automatically.

    Here is my testing code and you could refer to.(I use barchart as example)

    .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>
            $.ajax({
                type: "POST",
                url: "ChartjsDemo.aspx/getData",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var getData = result.d;
                    var arrlabel = [];
                    var arrdata = [];
                    $.each(getData, function (index, val) {
                        arrlabel.push(val.itemname);
                        arrdata.push(val.itemcount);
                    });
                    var showdata = {
                        labels: arrlabel,
                        datasets: [{
                            label: "My First dataset",
                            data: arrdata
                        }]
                    };
                    var el = document.createElement('canvas');
                    $("#myChart")[0].appendChild(el);
                    var ctx = el.getContext('2d');
                    var chart = new Chart(ctx).Bar(showdata);
                }
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ItemID" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating">
            <Columns>
                <asp:BoundField DataField="ItemID" HeaderText="ItemID" ></asp:BoundField>
                <asp:TemplateField HeaderText="ItemName">
                    <EditItemTemplate>
                        <asp:TextBox ID="NameTxt" runat="server" Text='<%# Bind("ItemName") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="NameLab" runat="server" Text='<%# Bind("ItemName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="ItemCount">
                    <EditItemTemplate>
                        <asp:TextBox ID="CountTxt" runat="server" Text='<%# Bind("ItemCount") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="CountLab" runat="server" Text='<%# Bind("ItemCount") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:CommandField HeaderText="Operation" ShowEditButton="True" />
            </Columns>
        </asp:GridView>
            <br />
            <div id="myChart"></div>
        </form>
    </body>
    </html>

    code behind.

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindGridView();
                }
            }
            string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
            public void BindGridView()
            {
                SqlConnection con = new SqlConnection(constr);
                con.Open();
                SqlCommand cmd = new SqlCommand("select * from tb_ChartJs", con);
                SqlDataAdapter sda = new SqlDataAdapter(cmd);
                DataSet ds = new DataSet();
                sda.Fill(ds);
                GridView1.DataSource = ds;
                GridView1.DataBind();
                con.Close();
            }
    
            protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
            {
                GridView1.EditIndex = e.NewEditIndex;
                BindGridView();
            }
    
            protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
            {
                string id = GridView1.DataKeys[e.RowIndex].Values[0].ToString();
                string itemname = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("NameTxt")).Text;
                string itemcount = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("CountTxt")).Text;
                string strUpdate = "update tb_ChartJs set ItemName='" + itemname + "',ItemCount='" + itemcount + "'where ItemID=" + id;
                SqlConnection con = new SqlConnection(constr);
                con.Open();
                SqlCommand cmd = new SqlCommand(strUpdate, con);
                cmd.ExecuteNonQuery();
                con.Close();
                GridView1.EditIndex = -1;
                BindGridView();
            }
    
            public class PostData
            {           
                public string itemname { get; set; }
                public int itemcount { get; set; }
                //public string color { get; set; }
            }
    
            [WebMethod]
            public static List<PostData> getData()
            {
                List<PostData> postdata = new List<PostData>();
                string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
                using (SqlConnection con = new SqlConnection(constr))
                {
                    string myquery = "SELECT * FROM tb_ChartJs";
                    SqlCommand cmd = new SqlCommand();
                    cmd.CommandText = myquery;
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        if (sdr.HasRows)
                        {
                            int count = 0;
                            while (sdr.Read())
                            {
                                PostData pData = new PostData();
                                pData.itemname = sdr["ItemName"].ToString();
                                pData.itemcount = Convert.ToInt32(sdr["ItemCount"]);
    
                                postdata.Add(pData);
                                count++;
                            }
                        }
                    }
                    con.Close();
                    return postdata;
                }
                           
            }

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 19, 2019 8:26 AM
  • User1126057398 posted

    Thanks for replying. Jenifer, I had tried but it's not working. Is it possible to attach the solution?

    Monday, June 24, 2019 9:28 AM
  • User839733648 posted

    Hi geetasks,

    Thanks for replying. Jenifer, I had tried but it's not working. Is it possible to attach the solution?

    How does your code not work?

    Is there any error message or information when you run the code?

    If possible, please provide more details like detailed code so that it will be easier for use to help with you.

    Best Regards,

    Jenifer

    Tuesday, June 25, 2019 1:55 AM
  • User1126057398 posted

    Jenifer, I had resolved by setting AutoDirectMode to Off in App_Start/RouteConfig.cs : settings.AutoRedirectMode = RedirectMode.Off;
    and using jquery-3.3.1.min.js.

    Though now chart is displaying ok but the issue is that in my case initially there will be no record(in datatable which further binds gridview), then, records are added one by one. When I added one record say 'Apple' in your case it's not displaying any bar chart. I had tested the same for your code by creating a breakpoint and inserting only one record in 'postdata'. It's not displaying any bar. 

    Tuesday, June 25, 2019 7:57 AM
  • User839733648 posted

    Hi geetasks,

    geetasks

    Though now chart is displaying ok but the issue is that in my case initially there will be no record(in datatable which further binds gridview), then, records are added one by one. When I added one record say 'Apple' in your case it's not displaying any bar chart. I had tested the same for your code by creating a breakpoint and inserting only one record in 'postdata'. It's not displaying any bar. 

    The issue happens because of using the old version of ChartJS. That may be a bug. The latest version has already fixed that.

    I've modified the version to the latest from: https://cdnjs.com/libraries/Chart.js and it could show one data now.

    Here is working code.

    You should pay attention that the way of defining the chart is different from that of the old version.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" type="text/javascript"></script>
        <script>
            $.ajax({
                type: "POST",
                url: "ChartjsDemo.aspx/getData",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var getData = result.d;
                    var arrlabel = [];
                    var arrdata = [];
                    $.each(getData, function (index, val) {
                        arrlabel.push(val.itemname);
                        arrdata.push(val.itemcount);
                    });
    
                    var ctx = document.getElementById("myChart").getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: arrlabel,
                            datasets: [{
                                label: "My First dataset",
                                data: arrdata
                            }]
                        }
                    });
                }
            })
        </script>
        <style>
            .container {
                width: 30%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ItemID" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating">
                <Columns>
                    <asp:BoundField DataField="ItemID" HeaderText="ItemID"></asp:BoundField>
                    <asp:TemplateField HeaderText="ItemName">
                        <EditItemTemplate>
                            <asp:TextBox ID="NameTxt" runat="server" Text='<%# Bind("ItemName") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="NameLab" runat="server" Text='<%# Bind("ItemName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="ItemCount">
                        <EditItemTemplate>
                            <asp:TextBox ID="CountTxt" runat="server" Text='<%# Bind("ItemCount") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="CountLab" runat="server" Text='<%# Bind("ItemCount") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:CommandField HeaderText="Operation" ShowEditButton="True" />
                </Columns>
            </asp:GridView>
            <br />
            <div class="container">
                <div>
                    <canvas id="myChart"></canvas>
                </div>
            </div>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 9:03 AM
  • User1126057398 posted

    Thanks Jenifer.

    I had done it in code behind ie in .cs.I had created one method and called it after user adds/edit/delete data in datatable
    private void displayChart()
    {
    DataTable tb = (DataTable)ViewState["Activities"];
    // List<ActivityChartData> listChartData = new List<ActivityChartData>();
    IEnumerable<ActivityChartData> groupedByCategory = tb.AsEnumerable()
    .GroupBy(row => row.Field<int>("CATEGORY_CODE"))
    .Select(g => new ActivityChartData
    {
    CategoryId = g.Key,
    Category = g.Select(r => r.Field<string>("CATEGORY")).FirstOrDefault(),
    HoursSpent = g.Sum(r => r.Field<decimal>("DURATION_HOUR"))
    });
    if(groupedByCategory.Count() > (int)CommonEnum.NumberAlphabets.Zero)
    {
    String chart = "";
    chart = "<canvas id=\"chart-canvaspn1\"></canvas><script>";
    chart += "new Chart(document.getElementById(\"chart-canvaspn1\"),{type: 'horizontalBar', data:{ labels: [";
    // put data from database to chart
    String label = "";
    foreach (ActivityChartData ac in groupedByCategory)
    label += "'" + ac.Category.ToString() + "',";
    label = label.Substring(0, label.Length - 1);
    chart += label;

    chart += "],datasets: [{ data: [";

    // put data from database to chart
    String value = "";
    foreach(ActivityChartData ac in groupedByCategory)
    value += ac.HoursSpent.ToString() + ",";
    value = value.Substring(0, value.Length - 1);

    chart += value;
    chart += "],label: \"Hours Spent\", borderColor: \"#3e95cd\",backgroundColor: \"#ffc266\", scaleShowGridLines: false,showScale: false,fill: true}"; // Chart color
    chart += "]}, options: { title: { display: true}, legend: {position: 'bottom'},scales: { xAxes: [{gridLines: {display:false}, ticks:{beginAtZero:true}}], yAxes: [{gridLines:{display:false},barPercentage: 0.2,maintainAspectRatio:false}]}}"; // Chart title
    chart += "},{ responsive: true});";
    chart += "</script>";

    ltActivityChart.Text = chart;
    }
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 12:59 PM