Home>

Thank you for browsing.

I am currently writing a bar graph using Chart.js for studying, but I would like to get the data (numerical value) used for the bar graph in js and display it in html. (I want to output the data set in labels and data in datasets to th, td of table tag ...)
However, even if I search for that method, no sample site appears, so I am in trouble.
At that time, I would like to use table to make it easier to understand visually, and I do not think about using plugins.

Corresponding source code
<! DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1">
  <title>Chart prototype</title>
  <link rel = "stylesheet" href = "style.css">
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
    
       Chart prototype 
      
        
           LineChart 
        <canvas>
        </canvas>
          
          <table>
            <tr>
              <th></th>
              <td></td>
            </tr>
          </table>
          <table>
            <tr>
              <th></th>
              <td></td>
            </tr>
          </table>
          <table>
            <tr>
              <th></th>
              <td></td>
            </tr>
          </table>
          
        
      
    
  <script type = "text/javascript" src = "./ js/index.js"></script>
</body>
</html>
@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
}
body {
  color: # 333;
  height: 100%;
  max-width: 100%;
}
.content_index {
  text-align: center;
  background-color: # 1e90ff;
  color: #fff;
  padding: 1% 0;
}
.chart {
  padding: 0 4% 4%;
}
.chart_index {
  text-align: center;
  margin-top: 4%;
}
.chart_figure {
  border: 1px solid # a9a9a9;
  margin-top: 4%;
}
.chart_table {
  display: flex;
  justify-content: space-around;
  padding: 0 16%;
  margin-top: 4%;
}
//Line graph
var plc = document.getElementById ("js_line_chart");
var protoLineChart = new Chart (plc, {
  type:'line',
  data: {
   // Legend label
    labels: ['January','February','March','April','May'],
    datasets: [
    {
      label:'Number of visitors', // Label of data item
      fill: false, // background fill
      lineTension: 0, // Straighten the drawing line
      data: [120,140,180,150,210], // Graph data
      borderColor: "rgba (200,112,126,1)"
    }, {
      label:'Number of PV', // Label of data item
      fill: false, // background fill
      lineTension: 0, // Straighten the drawing line
      data: [190,230,380,320,480], // Graph data
      borderColor: "rgba (80,126,164,1)"
    }, {
      label:'Number of sessions', // Label of data item
      fill: false, // background fill
      lineTension: 0, // Straighten the drawing line
      data: [160,180,220,190,300], // Graph data
      borderColor: "rgba (230,180,34,1)"
    }
    ]
  },
  options: {
    title: {
    display: true,
    text:'A site visitor analysis' // Graph title
    },
    scales: {
    yAxes: [{
      ticks: {
      suggestedMax: 250, // maximum
      suggestedMin: 0, // Minimum value
      stepSize: 50, // Numerical unit of vertical label
      }
    }]
    },
  }
});
Supplementary information (FW/tool version, etc.)

The Chart.js used is obtained from the CDN.
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js
I thought that if I declare a variable with var in data: [] of js, I can narrow down the data I want to get, but I gave up because I could not declare it in the first place. (Error: Uncaught SyntaxError: Unexpected token'var')