0👍
✅
Ok anyway I solve it by myself. Here is the answer for other if have the same problem. Sorry if there’s bad practices in my js. I’m not a pro.
function pieChart2(){
var chartContainer = $('.chart-container');
chartContainer.each(function(index){
var $this = $(this),
canvas = $this.find('canvas'),
ctx = canvas.get(0).getContext("2d"),
chartData = [];
$this.find('.chart-data').find('li').each(function(){
var li = $(this);
chartData.push({
value: li.data('value'),
color: li.data('color'),
label: li.text()
})
});
window.myDoughnut = new Chart(ctx).Doughnut(chartData, {
segmentShowStroke : false,
showTooltips: false,
percentageInnerCutout : 55,
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
});
var legend = myDoughnut.generateLegend();
$this.append(legend);
});
};
pieChart2();
1👍
To create new graphs to dynamics elements inserted you can create a DOM Observer. I create a fiddle with a example in
$(function () {
$('.graph').each(function(index, canvas) {
createGraph(
canvas,
$(canvas).data('labels'),
$(canvas).data('datasets'),
$(canvas).data('options')
);
$(canvas).data('renderizado', true);
});
$(document).on('DOMNodeInserted', function(e) {
if ($(e.target).hasClass('graph')) {
createGraph(
e.target,
$(e.target).data('labels'),
$(e.target).data('datasets'),
$(e.target).data('options')
);
$(e.target).data('renderizado', true);
}
});
$('#adicionar').on('click', function () {
$('#graphs').append('<canvas width="400" height="250" class="graph" data-options=\'{"showLines": true}\' data-renderizado=false data-labels=\'["January","February","March","April","May","June","July"]\' data-datasets=\'[{"label":"My First dataset","fill":false,"lineTension":0.1,"backgroundColor":"rgba(75,192,192,0.4)","borderColor":"rgba(75,192,192,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0.0,"borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff","pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":5, "pointHitRadius":10,"data":[56, 55, 40, 65, 59, 80, 0]}]\'></canvas>');
});
});
function createGraph (canvas, labels, datasets, options) {
Chart.Line(canvas,{
data:{labels: labels, datasets: datasets},
options:options
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="graphs">
<canvas width="400" height="250" class="graph" data-options='{"showLines": true}' data-renderizado=false
data-labels='["January","February","March","April","May","June","July"]'
data-datasets='[{"label":"My First dataset","fill":false,"lineTension":0.1,"backgroundColor":"rgba(75,192,192,0.4)","borderColor":"rgba(75,192,192,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0.0, "borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff", "pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":5, "pointHitRadius":10,"data":[65, 59, 80, 0, 56, 55, 40]}]'></canvas>
</div>
<input type="button" value="Add Data" id="adicionar">
Source:stackexchange.com