Passing Django view data to JavaScript Chart

Question

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

Yes, You've to pass context inside template by adding your script inside <script>..</script> tag — Ankit Tiwari
– Ankit Tiwari, Commented Jan 2, 2022 at 10:50

Ryszard Orlikowski · Accepted Answer · 2022-01-02 13:03:08Z

1

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>

edited Jan 2, 2022 at 13:03

answered Jan 2, 2022 at 12:56

Ryszard Orlikowski

1323 bronze badges

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

Collectives™ on Stack Overflow

Passing Django view data to JavaScript Chart

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related