Populate HTML5 Canvas Chart from comma separated string value using JavaScript in ASP.Net

Last Reply 8 months ago By dharmendr

Posted 8 months ago

i am storing value like first title and 2nd point...

sending value in form of string and convert it to array inside javascript ,values comes but it assume it single value.

chart not showing

            DataTable dt = new DataTable();
            string values = "";
            if (ds.Tables[0].Rows.Count > 0)
            {
                dt.Columns.Add("task_title");
                dt.Columns.Add("resume_recived");

                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    string jobid = ds.Tables[0].Rows[i][0].ToString();
                    string jobtitle = ds.Tables[0].Rows[i][1].ToString();
                    string resumecount = sql.getsinglevallue("select count(applicationid) from applications where jobid='" + jobid + "' and clientid='" + Session["idclient"].ToString() + "'");
                    dt.Rows.Add(jobtitle, resumecount);
                    if (i < (ds.Tables[0].Rows.Count - 1))
                    {
                    values+=jobtitle+","+ resumecount+",";
                    }
                    else
                    {
                        values += jobtitle + "," + resumecount;
                    }
                }
            }
            ScriptManager.RegisterStartupScript(Page, GetType(), "disp_confirm", "<script>Showpointchart('" + values + "','" + ds.Tables[0].Rows.Count + "')</script>", false);

 

        function Showpointchart(dt,jobcount) {
             var jobarray = dt.split(',');
              // alert(title);
              //$('#myModal').modal('show');
             //$('#myModal').on('shown.bs.modal', function () {
             var task_titles="";
             var resumecount="";
             for (var i = 0; i < jobcount; i++) {
                 //coz on second is point and on first is title
                 if (i % 2 == 0) {
                     if (i == jobcount - 2) {
                         task_titles += jobarray[i];
                     }
                     else{
                     task_titles += jobarray[i] + ",";
                     }
                    
                 }
                 else {
                     if (i == jobcount - 1) {
                         resumecount += jobarray[i];
                     }
                     else {
                         resumecount += jobarray[i] + ",";
                     } 
                 }
             }
            
             var ctx = document.getElementById("bar-chart").getContext('2d');
             alert(task_titles);
             
             alert(resumecount);
                  var myChart = new Chart(ctx, {
                      type: 'bar',
                      data: {
                          
                          labels: [task_titles],
                          datasets: [{
                              label: "Points",
                              data: [3,5],
                              backgroundColor: ["#3e95cd"]
                          }]
                      },
                      options: {
                          legend: {
                              display: false
                          },
                          scales: {
                              yAxes: [{
                                  ticks: {
                                      beginAtZero: true
                                  }
                              }],
                              xAxes: [{
                                  ticks: {
                                      callback: function (value, index, values) {
                                          // return only first 4 charater of remark.
                                          //return (value.substr(0, 10) + "..");
                                          return (value);
                                      }
                                  }
                              }]
                          },
                          tooltips: {
                              callbacks: {
                                  title: function (tooltipItem, data) {
                                      // Returns text to render as the title of the tooltip.
                                      return data.labels[tooltipItem[0].index];
                                  }
                              }
                          }
                      }
                  });
              }

 

 <canvas id="bar-chart"  width="300" height="300"></canvas>

 

Posted 8 months ago

Hi mukesh1,

Check this example. Now please take its reference and correct your code.

HTML

<canvas id="bar-chart" width="300" height="100"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script type="text/javascript">
    function Showpointchart(dt, jobcount) {
        var jobarray = dt.split(',');
        var task_titles = new Array();
        var resumecount = new Array();
        for (var i = 0; i < jobarray.length; i++) {
            if (i % 2 == 0) {
                task_titles.push(jobarray[i]);
            }
            else {
                resumecount.push(jobarray[i]);
            }
        }
        var ctx = document.getElementById("bar-chart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: task_titles,
                datasets: [{ label: "Points", data: resumecount}]
            },
            options: {
                legend: { display: false },
                scales: {
                    yAxes: [{ ticks: { beginAtZero: true}}],
                    xAxes: [{ ticks: { callback: function (value, index, values) { return (value); } }}]
                },
                tooltips: {
                    callbacks: { title: function (tooltipItem, data) { return data.labels[tooltipItem[0].index]; } }
                }
            }
        });
    }
</script>

C#

protected void Page_Load(object sender, EventArgs e)
{
    System.Data.DataTable dtTask = new System.Data.DataTable();
    dtTask.Columns.Add("task_title");
    dtTask.Columns.Add("resume_recived");

    System.Data.DataTable dtJob = new System.Data.DataTable();
    dtJob.Columns.Add("jobtitle");
    dtJob.Columns.Add("resumecount");
    dtJob.Rows.Add(".Net", 20);
    dtJob.Rows.Add("SQL", 25);
    dtJob.Rows.Add("Java", 59);
    dtJob.Rows.Add("Testing", 17);

    string values = "";
    if (dtJob.Rows.Count > 0)
    {
        for (int i = 0; i < dtJob.Rows.Count; i++)
        {
            string jobtitle = dtJob.Rows[i][0].ToString();
            string resumecount = dtJob.Rows[i][1].ToString();
            dtTask.Rows.Add(jobtitle, resumecount);

            if (i < (dtJob.Rows.Count - 1))
            {
                values += jobtitle + "," + resumecount + ",";
            }
            else
            {
                values += jobtitle + "," + resumecount;
            }
        }
    }

    ScriptManager.RegisterStartupScript(Page, GetType(), "disp_confirm", "<script>Showpointchart('" + values + "','" + dtJob.Rows.Count + "')</script>", false);
}

Screenshot