title: Loop to create lines for graph chartjs
body: <p>So I make a project where we read out temperature detectors, and I need to make a line graph that shows the data.</p>
  
  <p>question:
  How do I make line graph so that it creates lines according to sensors that are connected.</p>
  
  <p>These are my arrays (this needs to be the Y value):</p>
  
  <p>These are the temperatures:   </p>
  
  <pre><code>array (size=76377)  
  0 =&gt;  
  array (size=4) //This is one recording  
  0 =&gt; 22,4 //This is sensor1  
  1 =&gt; 15,9 //This is sensor2  
  2 =&gt; 32,5 //This is sensor3  
  3 =&gt; NULL //This is sensor4  
  1 =&gt;  
  array (size=4)  
  0 =&gt; NULL  
  1 =&gt; NULL  
  2 =&gt; NULL  
  3 =&gt; 2,1  
  2 =&gt;  
  array (size=4)  
  0 =&gt; 8,2  
  1 =&gt; 18,5  
  2 =&gt; 20,3  
  3 =&gt; NULL
  </code></pre>
  
  <p>These are the moments that they record the temp (this needs to be the X value):</p>
  
  <pre><code>array (size=76476)  
     0 =&gt; string '2018-02-27 11:33:35' (length=19)  
     1=&gt; string '2018-02-27 11:34:23' (length=19)  
     2 =&gt; string '2018-02-27 11:37:25' (length=19)  
     3 =&gt; string '2018-02-27 11:37:58' (length=19)   
   4 =&gt; string '2018-02-27 11:38:16' (length=19)  
  </code></pre>
  
  <p>I use the code from this graph<br>
  <a href="http://www.chartjs.org/samples/latest/charts/line/multi-axis.html" rel="nofollow noreferrer">http://www.chartjs.org/samples/latest/charts/line/multi-axis.html</a></p>
  
  <p>code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
      var yas = &lt;?php echo json_encode($yas) ?&gt;;
      var datum = &lt;?php echo json_encode($datums) ?&gt;;
      var namen = &lt;?php echo json_encode($alleSensorNamen) ?&gt;;
  
      var lineChartData = {
              labels: datum,
              datasets: [{
                  label: 'My First dataset',
                  borderColor: window.chartColors.red,
                  backgroundColor: window.chartColors.red,
                  fill: false,
                  data: yas; //Here i need to enter the temp i guess
                  yAxisID: 'y-axis-1',
              }, {
                  label: 'My Second dataset',
                  borderColor: window.chartColors.blue,
                  backgroundColor: window.chartColors.blue,
                  fill: false,
                  data: [
                      randomScalingFactor(),
                      randomScalingFactor(),
                      randomScalingFactor(),
                      randomScalingFactor(),
                      randomScalingFactor(),
                      randomScalingFactor(),
                      randomScalingFactor()
                  ],
                  yAxisID: 'y-axis-2'
              }]
          };
  
          window.onload = function() {
              var ctx = document.getElementById('canvas').getContext('2d');
              window.myLine = Chart.Line(ctx, {
                  data: lineChartData,
                  options: {
                      responsive: true,
                      hoverMode: 'index',
                      stacked: false,
                      title: {
                          display: true,
                          text: 'Chart.js Line Chart - Multi Axis'
                      },
                      scales: {
                          yAxes: [{
                              type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                              display: true,
                              position: 'left',
                              id: 'y-axis-1',
                          }, {
                              type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                              display: true,
                              position: 'right',
                              id: 'y-axis-2',
  
                              // grid line settings
                              gridLines: {
                                  drawOnChartArea: false, // only want the grid lines for one axis to show up
                              },
                          }],
                      }
                  }
              });
          };
  
          document.getElementById('randomizeData').addEventListener('click', function() {
              lineChartData.datasets.forEach(function(dataset) {
                  dataset.data = dataset.data.map(function() {
                      return randomScalingFactor();
                  });
              });
  
              window.myLine.update();
          });
      &lt;/script&gt;
  </code></pre>