pedrorod
Posts: 44
Joined: Sun Oct 23, 2011 2:25 pm

Create Chart scatter (polynomial) from table

Hi

I have a table and I need to create a chart based on the table data.

I saw this example :https://www.highcharts.com/demo/column-parsed

but when I changed the :

Code: Select all

data: [
        [925.5, 2],
        [912, 3.8],
        [889.5, 4.8],
        [876, 6.3],
        [725.25, 14.3],
        [583.5, 20.5],
        [447.75, 23.5],
        [391.5, 24.8],
        [230.25, 28],
        [144, 28.5],
        [58.5, 29.3],
        [0.2, 29.3],
      ]
to

Code: Select all

    data: {
        table: 'datatable'
    },
It dosed work.
I try the table with headers and without.

What I'm doing wrong ?


Thanks in advanced







https://jsfiddle.net/pedrorod/3qudhaLe/3/

Code: Select all



<figure class="highcharts-figure">

  <p class="highcharts-description">
    Chart showing how an HTML table
  </p>


  <table id="datatable">
    <thead>
      <tr>
        <th></th>
        <th>Caudal</th>
        <th>Altura</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Apples</th>
        <td contenteditable='true'>925.5</td>
        <td contenteditable='true'>2</td>
      </tr>
      <tr>
        <th>Pears</th>
        <td contenteditable='true'>912</td>
        <td contenteditable='true'>3.8</td>
      </tr>
      <tr>
        <th>Plums</th>
        <td contenteditable='true'>889.5</td>
        <td contenteditable='true'>4.8</td>
      </tr>
      <tr>
        <th>Bananas</th>
        <td contenteditable='true'>876</td>
        <td contenteditable='true'>6.3</td>
      </tr>
      <tr>
        <th>Oranges</th>
        <td contenteditable='true'>725.25</td>
        <td contenteditable='true'>14.3</td>
      </tr>
      <tr>
        <th>Oranges</th>
        <td contenteditable='true'>583.5</td>
        <td contenteditable='true'>20.5</td>
      </tr>
      <tr>
        <th>Oranges</th>
        <td contenteditable='true'>447.75</td>
        <td contenteditable='true'>23.5</td>
      </tr>
      <tr>
        <th>Oranges</th>
        <td contenteditable='true'>391.5</td>
        <td contenteditable='true'>24.8</td>
      </tr>
      <tr>
        <th>Oranges</th>
        <td contenteditable='true'>230.25</td>
        <td contenteditable='true'>28</td>
      </tr>
      <tr>
        <th>Oranges</th>
        <td contenteditable='true'>144</td>
        <td contenteditable='true'>28.5</td>
      </tr>
      <tr>
        <th>Oranges</th>
        <td contenteditable='true'>58.5</td>
        <td contenteditable='true'>29.3</td>
      </tr>
      <tr>
        <th>Oranges</th>
        <td contenteditable='true'>0.2</td>
        <td contenteditable='true'>29.3</td>
      </tr>
    </tbody>
  </table>


<table id="datatable3">
    <tbody>
      <tr>
        <td contenteditable='true'>925.5</td>
        <td contenteditable='true'>2</td>
      </tr>
      <tr>
        <td contenteditable='true'>912</td>
        <td contenteditable='true'>3.8</td>
      </tr>
      <tr>
        <td contenteditable='true'>889.5</td>
        <td contenteditable='true'>4.8</td>
      </tr>
      <tr>
        <td contenteditable='true'>876</td>
        <td contenteditable='true'>6.3</td>
      </tr>
      <tr>
        <td contenteditable='true'>725.25</td>
        <td contenteditable='true'>14.3</td>
      </tr>
      <tr>
        <td contenteditable='true'>583.5</td>
        <td contenteditable='true'>20.5</td>
      </tr>
      <tr>
        <td contenteditable='true'>447.75</td>
        <td contenteditable='true'>23.5</td>
      </tr>
      <tr>
        <td contenteditable='true'>391.5</td>
        <td contenteditable='true'>24.8</td>
      </tr>
      <tr>
        <td contenteditable='true'>230.25</td>
        <td contenteditable='true'>28</td>
      </tr>
      <tr>
        <td contenteditable='true'>144</td>
        <td contenteditable='true'>28.5</td>
      </tr>
      <tr>
        <td contenteditable='true'>58.5</td>
        <td contenteditable='true'>29.3</td>
      </tr>
      <tr>
        <td contenteditable='true'>0.2</td>
        <td contenteditable='true'>29.3</td>
      </tr>
    </tbody>
  </table>



	 <button onclick="mychart3()">Visualizar3</button>

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

</figure>





Code: Select all

function mychart3() {

  Highcharts.chart('container3', {
    chart: {
      type: 'scatter', //spline
      zoomType: 'xy',
    },
    title: {
      text: 'Polynomial regression - with extrapolation and different style'
    },
    subtitle: {
      text: 'Grupo BME '
    },
    xAxis: {
      title: {
        enabled: true,
        text: 'Caudal (l/m)'
      },
      startOnTick: true,
      endOnTick: true,
      showLastLabel: true
    },
    yAxis: {
      title: {
        text: 'Altura (mt)'
      }
    },
    legend: {
      layout: 'vertical',
      align: 'left',
      verticalAlign: 'top',
      x: 100,
      y: 70,
      floating: true,
      backgroundColor: '#FFFFFF',
      borderWidth: 1
    },
    plotOptions: {
      scatter: {
        marker: {
          radius: 5,
          states: {
            hover: {
              enabled: true,
              lineColor: 'rgb(100,100,100)'
            }
          }
        },
        states: {
          hover: {
            marker: {
              enabled: false
            }
          }
        },
        tooltip: {
          headerFormat: '<b>{series.name}</b><br>',
          pointFormat: '{point.x} l/m, {point.y} mt'
        }
      }
    },
    series: [{
      regression: true,
      regressionSettings: {
        type: 'polynomial',
        order: 2,
        lineWidth: 5,
        decimalPlaces: 3,
        name: "%eq | r2: %r",
        //name: 'equat'+'%eq' +'r:'+ '%r'+'r2:'+ '%r2',
        hideInLegend: false,
        color: 'rgba(223, 183, 83, .9)',
        dashStyle: 'dash'
      },
      name: 'Test input',
      color: 'rgba(223, 83, 83, .5)',

      data: [
        [925.5, 2],
        [912, 3.8],
        [889.5, 4.8],
        [876, 6.3],
        [725.25, 14.3],
        [583.5, 20.5],
        [447.75, 23.5],
        [391.5, 24.8],
        [230.25, 28],
        [144, 28.5],
        [58.5, 29.3],
        [0.2, 29.3],
      ]

    }]
  });
	
}


mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Create Chart scatter (polynomial) from table

Hello pedrorod,

Thanks for contacting us with your question.

It looks like this plugin doesn't accept data in default parsed format. You can adjust it with complete callback.
Demo: https://jsfiddle.net/BlackLabel/fuqjx1p2/
API reference: https://api.highcharts.com/highcharts/data.complete,
https://api.highcharts.com/highcharts/data.parsed

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
pedrorod
Posts: 44
Joined: Sun Oct 23, 2011 2:25 pm

Re: Create Chart scatter (polynomial) from table

that is Ok !
Thanks
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Create Chart scatter (polynomial) from table

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”