Highcharts: Switch Rows/Columns on chart from HTML table

JavaScript
1

I am generating a line chart from an HTML table, however I need the rows/columns switched. Any ideas?

Example here:

Code here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>



</head>

<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<table cellspacing="0" cellpadding="5" id="datatable">

  <tr>
    <td>&nbsp;</td>
    <td>2013</td>
    <td>2014</td>
    <td>2015</td>
    <td>2016</td>
    <td>2017</td>
    <td>2018</td>
    <td>2019</td>
    <td>2020</td>
  </tr>
  <tr>
    <td>Ford</td>
    <td>612</td>
    <td>638</td>
    <td>663</td>
    <td>678</td>
    <td>719</td>
    <td>752</td>
    <td>788</td>
    <td>827</td>
  </tr>
  <tr>
    <td>Chevy</td>
    <td>539</td>
    <td>682</td>
    <td>710</td>
    <td>725</td>
    <td>741</td>
    <td>758</td>
    <td>771</td>
    <td>782</td>
  </tr>
  <tr>
    <td>GMC</td>
    <td>923</td>
    <td>926</td>
    <td>927</td>
    <td>929</td>
    <td>931</td>
    <td>933</td>
    <td>935</td>
    <td>938</td>
  </tr>
  <tr>
    <td>Porche</td>
    <td>644</td>
    <td>645</td>
    <td>648</td>
    <td>651</td>
    <td>653</td>
    <td>655</td>
    <td>658</td>
    <td>660</td>
  </tr>
</table>

<script>
Highcharts.chart('container', {
    data: {
        table: 'datatable'
    },
    chart: {
        type: 'line'
    },
    title: {
        text: 'Cars'
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: 'Units'
        }
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                this.point.y + ' ' + this.point.name.toLowerCase();
        }
    }
});
</script>
</body>
</html>
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.