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

Create Chart scatter (polynomial) from table

Thu Dec 02, 2021 11:13 pm

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: 1074
Joined: Tue Jul 13, 2021 11:34 am

Re: Create Chart scatter (polynomial) from table

Fri Dec 03, 2021 1:55 pm

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

Fri Dec 03, 2021 4:32 pm

that is Ok !
Thanks

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

Re: Create Chart scatter (polynomial) from table

Fri Dec 03, 2021 5:33 pm

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

Return to “Highcharts Usage”