javascript html google-visualization jinja2

How to create multiple line charts from one js function

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 %}

Solution

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>