Create Chart scatter (polynomial) from table
Posted: 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 :
to
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/
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],
]Code: Select all
data: {
table: 'datatable'
},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],
]
}]
});
}