How to create multiple line charts from one js function

Question

I'm trying to use Google line charts as part of a flask project of mine. However I don't just want one graph, I have a dictionary of lists, with each of those lists needing to be converted into a line chart. However I'm very much not experienced with js and am unsure why nothing is showing up on the page at the moment. Any help would be much appreciated

GraphData={
1:[['Col1','Col2'],[Row1,Row1],[Row2,Row2]],
2:[['Col1','Col2'],[Row1,Row1],[Row2,Row2],[Row3,Row3]}
3:[['Col1','Col2','Col3',[Row1,Row1,Row1],[Row2,Row2,Row2]}


#In the <head> area:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    {% for Vars in GraphData %}
        <script type="text/javascript">
            var Data =GraphData[Vars]
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
            var data = google.visualization.arrayToDataTable(Datas}

            var options = {
                title: 'Graph Data',
                curveType: 'function',
                legend: { position: 'bottom' }
            };
            var chart = new google.visualization.LineChart(document.getElementById(Vars));

            chart.draw(data, options);
            }
        </script>
    {%endfor%}


and in the <body> section:

{% for Vars in GraphData %}
<div id={{Vars}} style="width: 900px; height: 500px"></div>
{% endfor %}

Answer 1

First of convert your data to JSON and if needed parse it .
Create a function processAllCharts() that loops all your data
Call that function as callback: google.charts.setOnLoadCallback(processAllCharts);
Inside that loop send every piece of data to drawChart
Create dynamically your chart DIVs

 const GraphData = [ [ ['Year', 'Foo', 'Bar'], ['2017', 2000, 400], ['2018', 660, 1120], ['2019', 1030, 540], ], [ ['Year', 'Lorem', 'Ipsum'], ['2014', 780, 1400], ['2015', 998, 770], ['2016', 660, 1120], ], [ ['Year', 'Dolor', 'Sit Amet'], ['2017', 660, 1120], ['2018', 1030, 540], ], ]; const EL_gAllCharts = document.querySelector("#gAllCharts"); const chartOptions = { title: 'Graph Data', curveType: 'function', legend: { position: 'bottom' } }; function drawChart(data) { // Create charts const EL_gChart = document.createElement("div"); EL_gChart.classList.add("gChart"); gAllCharts.append(EL_gChart); const gData = google.visualization.arrayToDataTable(data) const chart = new google.visualization.LineChart(EL_gChart); chart.draw(gData, chartOptions); } function processAllCharts() { GraphData.forEach(drawChart); } google.charts.load('current', {'packages': ['corechart']}); google.charts.setOnLoadCallback(processAllCharts);

 .gChart { height: 260px; }

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="gAllCharts"></div>

How to create multiple line charts from one js function

Question

1 answers

solution1
0 ACCPTED 2021-02-14 14:24:50

How to create multiple line charts from one js function

Question

1 answers

solution1 0 ACCPTED 2021-02-14 14:24:50

solution1
0 ACCPTED 2021-02-14 14:24:50