How to add the elements dynamically from the html table for chart.js

Question

Can anyone help with this issue?

I am using chart.js for developing charts into my asp.net mvc C# application.

The issue is I am unable to add the elements dynamically from the html table to the chart.

<canvas id="myChart" width="600" height="400"></canvas> //html5 canvas    
   <script type="text/javascript">    
            var ctx = document.getElementById("myChart").getContext("2d");    
            var data = {                                 
                datasets: [    
                           {
                              fillColor: "rgba(223,104,27,0.5)",    
                              strokeColor: "rgba(220,220,220,1)",    
                              data: getcountdata1()    
                            },    
                            {    
                               fillColor: "rgba(151,187,205,0.5)",    
                               strokeColor: "rgba(151,187,205,1)",    
                               data: getcountdata2()    
                          }]    
   myNewChart = new Chart(ctx).Line(data, options);

The above is working fine, becausse in datasets I am hardcoding the number of elements in datasets, but in reality this should check the HTML table and get the data from the table.

Now the question is how can I make the datasets to get dynamic values based on the number of rows in the table?

For example I have written a Javascript function (I have tried the following coed):

var data: 
{            
 datasets: getdata()
}

function getdata()
{
rows = document.getElementById('tblresult').getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;    
for(i=0;i<rows;i++)
{
  datasetdata[i] = [
             {
                 fillColor: getrandomfillcolor(),    
                 strokeColor: getrandomstrokecolor(),    
                 data: getcountdata()

             }]
}

function getrandomfillcolor()
{
}

function getrandomstrokecolor()
{
}

function getcountdata()
{
}

return datasetdata

             }

I have tried several times but was not able to find a solution for this.

Armen · Accepted Answer · 2013-07-25 22:44:40Z

0

You need to pass each row to getcountdata() function

rowsDomElements = document.getElementById('tblresult').getElementsByTagName('tbody')[0].getElementsByTagName('tr');

for(i=0;i<rowsDomElements.length;i++)
{
    datasetdata[i] = [
    {
         fillColor: getrandomfillcolor(),
         strokeColor: getrandomstrokecolor(),
         data: getcountdata(rowsDomElements[i])
    }]
}

function getcountdata(row)
{
    //create data as needed
}

answered Jul 25, 2013 at 22:44

Armen

2871 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2465036 Over a year ago

SYNTAX ERROR WAS THE PROBLEM

user2465036 Over a year ago

Instead of datasetdata[i] = [ { fillColor: getrandomfillcolor(), strokeColor: getrandomstrokecolor(), data: getcountdata(rowsDomElements[i]) }] we have to datasetdata[i] = { fillColor: getrandomfillcolor(), strokeColor: getrandomstrokecolor(), data: getcountdata(rowsDomElements[i]) }

user2465036 Over a year ago

Take the [] from the datasetdata ..Thanks

Collectives™ on Stack Overflow

How to add the elements dynamically from the html table for chart.js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related