line.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Datatopie - Simple and lightweight vanillaJS charts</title>
  <link rel="stylesheet" href="./dist/css/style.css">

</head>
<body>
<div class="graph_wrapper" data-graph="line" style="width:800px;height:400px;">
</div>

<!-- <script src="./dist/js/app.js"></script> -->
<script src="./dist/js/graph-lineV2.js"></script>
<script defer>
  // TODO : Use proxies to update only the necessary parts when the data or the config change.
// let [header, datas] = _tableToJson(table)

const lineChart = {
  "config": {
    "mainTitle": "A very simple line chart about income",
    "legendKey": "label",
    "titleY": 'nombre',
    "titleX": 'Date',
    "wrapper": document.querySelector('[data-graph="line"]')
  },
  "data": [
    {
      "label": "02/06/2022",
      "visitors": 5,
      "views": 26
    },
    {
      "label": "03/06/2022",
      "visitors": 150,
      "views": 234
    },
    {
      "label": "04/06/2022",
      "visitors": 15,
      "views": 34
    },
    {
      "label": "05/06/2022",
      "visitors": 0,
      "views": 0
    },
    {
      "label": "06/06/2022",
      "visitors": 300,
      "views": 345
    }
  ]
}


const graphLine = new GraphLine(lineChart.data, lineChart.config);
graphLine.init();
// graphLine.debug();


</script>
</body>
</html>