Google charts

by emilcieslar

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1" style="width: 100%; height: 450px;"></div>
<div id="chart_div2" style="width: 100%; height: 450px;"></div>

JavaScript

/**
      Data should be received from backend in the following format:
      ```js
      window.graphData = [
        // First graph
        {
          divId: 'chart_div1',
          data: [
            {
              id: 1,
              correct: 1,
              difficulty: 3,
              responseTime: 100,
              courseId: 1,
              type: 'task',
            },
            ...
          ]
        },

        // Second and further graphs...
        ...
      ]
    */


    /**
      **************************************************************************************
      * THIS IS JUST SAMPLE DATA THAT SHOULD BE OVERRIDEN BY WHAT WE RECEIVE FROM BACKEND. *
      **************************************************************************************
    */
    window.graphData = [
      // First graph
      {
        divId: 'chart_div1',
        data: [
          {
            id: 1,
            correct: 1,
            difficulty: 3,
            responseTime: 100,
            courseId: 1,
            type: 'task',
          },
          {
            id: 2,
            correct: 1,
            difficulty: 4,
            responseTime: 120,
            courseId: 1,
            type: 'lesson',
          },
          {
            id: 3,
            correct: -1,
            difficulty: 3,
            responseTime: 80,
            courseId: 1,
            type: 'task',
          },
          {
            id: 4,
            correct: 1,
            difficulty: 5,
            responseTime: 100,
            courseId: 1,
            type: 'lesson',
          },
          {
            id: 5,
            correct: -1,
            difficulty: 2,
            responseTime: 180,
            courseId: 1,
            type: 'task',
          },
          {
            id: 6,
            correct: -1,
            difficulty: 1,
            responseTime: 20,
            courseId: 1,
            type: 'task',
          },
        ]
      },

      // Second graph
...