All geek questions in one place

Creating a dynamic chart with chart.js

I am using the jQuery Chart.js plugin to create a histogram. I can create a static diagram, but I want to create a dynamic diagram. I want to draw a chart from data that is read from an html table. How to set a dynamic data set in chart.js chart.

This is my code.

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Bar Chart</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script src="js/Chart.js"></script> </head> <body> <div style="width:50%;"> <canvas id="canvas_bar"></canvas> </div> <div class="dataset"> <table> <tr> <th>Year</th> <th>Income</th> <th>Expenditure</th> <th>Profit/Loss<th> </tr> <tr> <td>2012</td> <td>10000</td> <td>5000</td> <td>5000</td> </tr> <tr> <td>2013</td> <td>11500</td> <td>7500</td> <td>4000</td> </tr> <tr> <td>2014</td> <td>9800</td> <td>4700</td> <td>5100</td> </tr> <table> <div> <script> var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; var barChartData = { labels : ["2012","2013","2014"], datasets : [ { fillColor : "rgba(95,137,250,0.5)", strokeColor : "rgba(95,137,250,0.9)", highlightFill: "rgba(95,137,250,0.75)", highlightStroke: "rgba(95,137,250,1)", data : [10000,11500,9800] }, { fillColor : "rgba(245,75,75,0.5)", strokeColor : "rgba(245,75,75,0.8)", highlightFill : "rgba(245,75,75,0.75)", highlightStroke : "rgba(245,75,75,1)", data : [5000,7500,4700] }, { fillColor : "rgba(98,223,114,0.5)", strokeColor : "rgba(98,223,114,0.8)", highlightFill : "rgba(98,223,114,0.75)", highlightStroke : "rgba(98,223,114,1)", data : [5000,4000,5100] } ] }; window.onload = function(){ var ctx = document.getElementById("canvas_bar").getContext("2d"); window.myBar = new Chart(ctx).Bar(barChartData, { responsive : true }); } </script> </body> </html>
+5
source share
2 answers

you can extract values ​​from a table using the jquery text () function, having built the correct data structure for chart.js, you can dynamically generate chart data from the table.

First of all, you need to extract the shortcuts from the table. you can select rows and, iterating over each row, you can get label data from the first columns.

 function generateLabelsFromTable() { var labels = []; var rows = jQuery("tr"); rows.each(function(index){ if (index != 0) // we dont need first row of table { var cols = $(this).find("td"); labels.push(cols.first().text()); } }); return labels; }

Similarly, you can generate chart data, iterate the html table.

 function generateDataSetsFromTable() { var data; var datasets = []; var rows = jQuery("tr"); rows.each(function(index){ if (index != 0) // we dont need first row of table { var cols = $(this).find("td"); var data = []; cols.each(function(innerIndex){ if (innerIndex!=0) // we dont need first columns of the row data.push($(this).text()); }); var dataset = { fillColor : colors[index%3].fillColor, strokeColor : colors[index%3].strokeColor, highlightFill: colors[index%3].highlightFill, highlightStroke: colors[index%3].highlightStroke, data : data } datasets.push(dataset); } }); return datasets; }

After writing these functions you can change your barChartData like this

 var barChartData = { labels : generateLabelsFromTable(), datasets : generateDataSetsFromTable() };

You must also define an array of colors at the beginning to preserve the current style of the chart. This array is used above when assigning a chart dataset.

 var colors = []; colors.push( { fillColor : "rgba(95,137,250,0.5)", strokeColor : "rgba(95,137,250,0.9)", highlightFill: "rgba(95,137,250,0.75)", highlightStroke: "rgba(95,137,250,1)" }); colors.push( { fillColor : "rgba(245,75,75,0.5)", strokeColor : "rgba(245,75,75,0.8)", highlightFill : "rgba(245,75,75,0.75)", highlightStroke : "rgba(245,75,75,1)" }); colors.push( { fillColor : "rgba(98,223,114,0.5)", strokeColor : "rgba(98,223,114,0.8)", highlightFill : "rgba(98,223,114,0.75)", highlightStroke : "rgba(98,223,114,1)", });

Remember to enable jquery.

Fiddle

+6
source

All the answers mentioned on this page are from a previous version of ChartJs, in which the charting method is completely different

previous version

 new Chart(ctx).Bar(barChartData, { responsive : true });

A new version

 new Chart(ctx,{ type: 'doughnut' });

If you want to create a dynamic chart for the new version, then just add convas to any container you want, and then the call chart method. Full code is

  $('#pieChartContainer').html(''); $('<canvas id="pieChart"></canvas>').appendTo($("#pieChartContainer")); data1={}; data1.labels=["M", "T", "W", "T", "F", "S", "S"]; data1.datasets=[ {backgroundColor:["#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e"],data: [12, 19, 3, 17, 28, 24, 7]} ]; var ctx = $("#pieChart").get(0).getContext("2d"); var myChart = new Chart(ctx, { type: 'doughnut', data: data1 });
+1
source

Source: https://habr.com/ru/post/1205327/

More articles:


All Articles