Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  August 2023

  probably beccause I am missing the [...] parts

  Given that those are the parts that populate the chart, you are spot on

  You would use the rows().data() method to get the data from the table, and then plot that into Highcharts using their API. Perhaps you can show us what your DataTable looks like?

  Allan
• carrarachristophe Posts: 100Questions: 24Answers: 2

  August 2023

  Hi Allan,

  Thank you for your message.
  My datatable is highlighted in yellow. It contains the same columns as the table of my working example.
  
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  August 2023

  That's one axis (presumably horizontal). Is the data in the 5th column the one you want to plot it against? If so:

  var myTable = new DataTable.Api('#myTable'); // or $('#myTable').DataTable();, `table` if you already have it, etc
  
  var xData = myTable.column(0).data().toArray();
  var yData = myTable.column(4).data().toArray();
  

  That uses column().data() to get the data for the column selected.

  Allan
• carrarachristophe Posts: 100Questions: 24Answers: 2

  August 2023

  Hi Allan,

  I am sorry but I don't know how to use this information.
  Here is my code

      var table = $('#quotes').DataTable( {
          ajax: 'php/table.quotes.php',
          columns: [
              {"data": "currency_rate.quote_datetime"},
              {"data": "currency_rate.quote_open"},
              {"data": "currency_rate.quote_high"},
              {"data": "currency_rate.quote_low"},
              {"data": "currency_rate.quote_last"}
          ]
          });
          
  //  var xData = quotes.column(0).data().toArray();
  //  var yData = quotes.column(4).data().toArray();
          
      var chart = Highcharts.chart("container", {
          data: {
              table: quotes,
              complete: function(options) {
                  options.series.forEach(series => {
                      series.data = series.data.map(function(data) {
                          if (typeof data[1] === 'string') {
                              return [data[0], parseInt(data[1].replace(/,/g, ''))];
                          } else {
                              return [data[0], data[1]];
                          }
                      });
                  });
              }
          },
          chart: {
              type: 'line',
              displayErrors: true
          },
          accessibility: {
              enabled: true
          },
          title: {
              text: "Test Data"
          },
          xAxis: {
              type: 'category'
          },
      });
  
  
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  August 2023

  Here is a simple example based on the HighCharts link you gave originally: https://jsbin.com/dohejepido/1/edit?html%2Cjs%2Coutput= .

  I've only done a single series - the rest can readily be added.

  Allan
• carrarachristophe Posts: 100Questions: 24Answers: 2

  August 2023

  Hi Allan,
  Thank you.
  I will work on trying to add some more columns, but this time, when I apply the code to my Datatable, I get the following error message: "Uncaught TypeError: d[1] is undefined".
  I don't understand as both tables are very similar.
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  August 2023

  Can you update Allan's example to show the issue so we can take a look?

  Kevin
• carrarachristophe Posts: 100Questions: 24Answers: 2

  August 2023

  The problem is that I cannot update Allan's example because I get no error message with the table id="example1", which works fine.
  The error message comes when linking the Highchart to my "real table".
  I will try to give access.
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  August 2023

  Yes - we'll need to be able to see the issue to be able to offer any help debugging it.

  Allan