JSFiddle - React, Tailwind, and code Playground

by Biswajit Paul

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<div id="logChartContainer" class="my-5" style="height: 370px; width: 100%;"></div>

JavaScript

fetch('https://web.tektriks.com/data.php')
.then(data => data.json())
.then(resp => {
  let logChartData = resp;
  let log_line1_data = [];
  let log_line2_data = [];
  let log_line3_data = [];
  let log_line4_data = [];
  let log_line5_data = [];
  let log_line6_data = [];

  logChartData.forEach(row => {
    log_line1_data.push({
      x: Number( row[0] ),
      y: Number( row[1] )
    });

    log_line2_data.push({
      x: Number( row[0] ),
      y: Number( row[2] )
    });

    log_line3_data.push({
      x: Number( row[0] ),
      y: Number( row[3] )
    });

    log_line4_data.push({
      x: Number( row[0] ),
      y: Number( row[4] )
    });

    log_line5_data.push({
      x: Number( row[0] ),
      y: Number( row[5] )
    });

    log_line6_data.push({
      x: Number( row[0] ),
      y: Number( row[6] )
    });
  });
  
  var log_chart = new CanvasJS.Chart("logChartContainer", {                        
    animationEnabled: true,
    zoomEnabled: true,
    creditText: "",
    title: {
      text: "Plot 1"
    },
    axisX:{
      crosshair: {
        enabled: true,
        snapToDataPoint: true
      }
    },
    axisY: {
      title: "score",
      interval: 8,
      gridThickness: 0
    },
    toolTip: {
      shared: true
    },
    legend: {
      cursor: "pointer"
    },
    data: [{
      type: "line",
      name: "+1",
      color: "#f00",
      showInLegend: true,
      markerSize: 0,
      lineThickness: 1,
      dataPoints: log_line1_data
    },
           {
             type: "line",
             name: "+2",
             color: "#0f0",
             showInLegend: true,
             markerSize: 0,
             lineThickness: 1,
             dataPoints: log_line2_data
           },
           {
             type: "line",
             name: "+3",
             color: "#00f",
             showInLegend: true,
             markerSize: 0,
             lineThickness: 1,
             dataPoints: log_line3_data
           },
           {
            ...