I am new to javascript and trying to plot multiple graphs of the length of the dictionary in javascript using Canvasjs and flask. I have a dictionary with a list of tuples passing from flask to my template here is my dictionary.
{'923114566780479 (1).xlsx': [('181112949', 1), ('156860', 1), ('3007322293014', 3), ('3007789510214', 2)], 'Copy of 9231645678120167 (1).xlsx': [(383362396260316, 1), ('0310566103033882', 13), ('0315311456791689', 1), ('0315826247894310', 1)]}
In this dictionary, I have two keys because I have uploaded two files and I want two charts now if the user uploaded 5 or 6 then I want 5 or 6 graphs.
here is the code that I have tried
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
{%for key in first%}
var myvar = '{{key}}';
console.log(myvar);
{%endfor%}
</script>
<script>
window.onload = function () {
{% for key in first %}
$('#piechart').append('<div id="draw_chart'+myvar+'"></div>');
chart = new CanvasJS.Chart(myvar, {
animationEnabled: true,
exportEnabled: false,
theme: "light1", // "light1", "light2", "dark1", "dark2"
backgroundColor: "transparent",
data: [{
type: "doughnut",
startAngle: 20,
//innerRadius: 10,
indexLabelFontSize: 17,
indexLabelFontColor: "black",
indexLabel: "#percent%",
toolTipContent: "<b>{label}:</b> {y}",
dataPoints: [
{%for b in first[key]%}
{ y: {{[b][0][1]}}, label: "{{[b][0][0]}}" },
{%endfor%}
]
}]
});
var container = document.getElementById('draw_chart'+myvar).appendChild(document.createElement('div'));
chart.render();
{%endfor%}
}
</script>
<body>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="card-body" id="piechart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 90%;">
</div>
</div>
</div>
</div>
</body>
Any help will be appreciated.
Thanks In Advance.
The chart wrapper you are passing to create a chart is not suitable. Also, myvar will point to the key of the last element in your dictionary. So the container id should be id="draw_chart'+{{key}}+'" and you should pass the same value when creating a chart as new CanvasJS.Chart("draw_chart'+'{{key}}', {}) .
Take a look at this code snippet for sample code.
window.onload = function() { var charts = []; { % for key in first % } $('#piechart').append('<div id="draw_chart' + '{{key}}' + '" style="height: 300px;width: 100%;"></div>'); charts.push(new CanvasJS.Chart("draw_chart" + '{{key}}', { animationEnabled: true, exportEnabled: false, theme: "light1", // "light1", "light2", "dark1", "dark2" backgroundColor: "transparent", data: [{ type: "doughnut", startAngle: 20, //innerRadius: 10, indexLabelFontSize: 17, indexLabelFontColor: "black", indexLabel: "#percent%", toolTipContent: "<b>{label}:</b> {y}", dataPoints: [ { % for b in first[key] % } { y: { { [b][0][1] } }, label: "{{[b][0][0]}}" }, { % endfor % } ] }] })); { % endfor % } charts.forEach(chart => chart.render()) }