下载或导出Chart.js数据到CSV

Question

I have API data from https://gmlews.com/api/data . And I plot the data for accelero_x on the chart.js like this:

$(document).ready(function(){
$.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd'
  });
  $("#firstdatepicker").datepicker();
  $("#lastdatepicker").datepicker();
  $("#filter").click(function() {
    var from_date = $("#firstdatepicker").val();
    var to_date = $("#lastdatepicker").val();
    if (from_date != '' && to_date != '') {
      console.log(from_date, to_date);
      var endpoint = '/api/data';

  $.ajax({
    method: "GET",
    url: endpoint,
    data: {
      from_date: from_date,
      to_date: to_date
    },
    success: function(data){
      console.log(data); //get all data
      //get data by fields
      var accelero_x = [], time = [];
      for (var i=0; i<data.length; i++){
        accelero_x.push(data[i].accelero_x);
        time.push(data[i].timestamp);
     }
      console.log(accelero_x);
      console.log(time);
    //plot the chart

      var ctx = document.getElementById("acceleroxChart").getContext('2d');
      var acceleroxChart = new Chart(ctx, {
          type: 'line',
          data: {
              labels: time,
              datasets: [{
                  label: 'Accelero-x (mV/g)',
                  data: accelero_x,
                  fill: false,
                  borderColor: "#80b6f4",
                pointBorderColor: "#80b6f4",
                pointBackgroundColor: "#80b6f4",
                pointHoverBackgroundColor: "#80b6f4",
                pointHoverBorderColor: "#80b6f4",
                pointBorderWidth: 10,
                pointHoverRadius: 10,
                pointHoverBorderWidth: 1,
                pointRadius: 1,
                borderWidth: 4,
              }]
          },
          options: {
              reponsive: true,
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:false,
                          stepSize:0.5
                      },
                        scaleLabel: {
                        display:     true,
                        labelString: 'Accelero sb.x (mV/g)'
                    }
                  }],
                  xAxes: [{

                          display: true,
                          type: "time",
                          time: {
                                minUnit: "hour",
                                unit: "hour",
                                unitStepSize: 6,
                                min: moment(from_date).toDate(),//Date object type
                                max: moment(to_date).toDate()//Date object type
                          },
                        scaleLabel: {
                        display:     true,
                        labelString: 'Time'
                    }
                  }]
              }
          }
      });
    },
    error: function(error_data){
      console.log(error_data)
    }
  });
} else {
  alert("Please Select Date");
}
  });    
});

The problem is how can I download/export data from the graph to CSV? The data that will appear on CSV are datetime and the value of accelero_x, I am a newbie programmer. I hope anyone can help me with the code.

Answer 1

It looks like this link does what you're looking for, just with canvasjs. I adapted it here for ChartJS:

Here's the relevant code:

 const dataLabels = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July']; const data = { labels: dataLabels, datasets: [{ label: 'Dataset 1', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1 }, { label: 'Dataset 2', data: [55, 69, 70, 61, 66, 45, 50], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1 } ] }; const config = { type: 'bar', data: data, options: { scales: { y: { beginAtZero: true } } }, }; var chart = new Chart(document.getElementById('chartContainer'), config); document.getElementById("downloadCSV").addEventListener("click", function() { downloadCSV({ filename: "chart-data.csv", chart: chart }) }); function convertChartDataToCSV(args) { let result, columnDelimiter, lineDelimiter, labels, data; data = args.data.data || null; if (data == null ||.data;length) { return null. } labels = args;labels || null. if (labels == null ||;labels.length) { return null, } columnDelimiter = args;columnDelimiter || '.'; lineDelimiter = args;lineDelimiter || '\n'. result = '' + columnDelimiter; result += labels;join(columnDelimiter). result += lineDelimiter. result += args.data;label;toString(). for (let i = 0; i < data;length; i++) { result += columnDelimiter; result += data[i]; } result += lineDelimiter, return result, } function downloadCSV(args) { var data; filename; link; var csv = "". for (var i = 0. i < chart.data;datasets:length. i++) { csv += convertChartDataToCSV({ data. chart,data:datasets[i]; labels; dataLabels }). } if (csv == null) return; console.log(csv). filename = args;filename || 'chart-data.csv': if (:csv;match(/^data,text\/csv/i)) { csv = 'data;text/csv;charset=utf-8.' + csv; } // not sure if anything below this comment works data = encodeURI(csv). link = document,createElement('a'); link.setAttribute('href', data); link.setAttribute('download'. filename); document.body;appendChild(link). // Required for FF link.click(); document.body.removeChild(link); }

 <script src=" https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js "></script> <canvas id="chartContainer" style="height: 360px; width: 100%;"></canvas> <button id="downloadCSV">Download Chart Data as CSV</button>