I have some data that is returned via Django view, I'm trying to render the data in an Apex Pie Chart.
So I need to pass the data into JavaScript as this is where the data series is.
var pieColors = getChartColorsArray("#pie_chart"),
options = {
chart: {
height: 320,
type: "pie"
},
series: [44, 55, 41, 17, 15],
labels: ["Series 1", "Series 2", "Series 3", "Series 4", "Series 5"],
colors: pieColors,
legend: {
show: !0,
position: "bottom",
horizontalAlign: "center",
verticalAlign: "middle",
floating: !1,
fontSize: "14px",
offsetX: 0
},
responsive: [{
breakpoint: 600,
options: {
chart: {
height: 240
},
legend: {
show: !1
}
}
}]
};
(chart = new ApexCharts(document.querySelector("#pie_chart"), options)).render();
How do I pass the data in as it needs to be dynamic in the sense that the data in the pie chart could change based on other actions within the app?
Should just embed the JS into my HTML template and then set the series values to
series: [{{ value.1 }}, {{ value.2 }}, ...],
Thanks
If you are using <script> block in your html template, you can pass context data
series: [{{value.1}}, {{value.1}}...],
or
series: [
{% for value in data %}
{{value}},
{% endfor %}
],
other way is adding variable in html template, then you are able to use 'values' inside script.js file
<script>
var values = JSON.parse("[{{value.1}}, {{value.2}},]")
</script>
<script src="{% static 'js/script.js' %}"></script>