Menu
For example my table would be like this:
agree neutral disagree
q1 10 4 4
q2 16 1 1
q3 18 0 0
q4 15 2 1
q5 13 5 0
and I would like to make q1 a pie chart with agree, neutral, and disagree as the different sectors, and similarly for q2, q3..etc.
<script type="text/javascript">
$(function () {
var chart;
$('#container').highcharts({
data: {
table: document.getElementById('datatable')
},
chart: {
type: 'column'
},
title: {
text: ''
},
yAxis: {
allowDecimals: false,
title: {
text: 'Persons'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.point.y +' individuals said '+ this.point.name.toLowerCase();
}
},
});
});
/**********************************************
**********************************************/
$(function () {
var chart;
$('#container2').highcharts({
data: {
table: document.getElementById('datatable')
},
chart: {
type: 'pie'
},
title: {
text: ''
},
yAxis: {
allowDecimals: false,
title: {
text: 'Persons'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.point.y +' individuals said '+ this.point.name.toLowerCase();
}
},
});
});
/**********************************************/
/**********************************************/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container3',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: ''
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
legend: {
enabled:true
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: '50%',
dataLabels: {
enabled: false
}
}
},
series:
[
{
type: 'pie',
name: 'testname1',
center: [70, 140],//+130 to the x-axis
showInLegend:true,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
}
,{
type: 'pie',
name: 'testname2',
center: [200, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname3',
center: [330, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname4',
center: [460, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname5',
center: [590, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname6',
center: [720, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname7',
center: [850, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname8',
center: [980, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
}
]
},function(chart) {
$(chart.series[0].data).each(function(i, e) {
e.legendItem.on('click', function(event) {
var legendItem=e.name;
event.stopPropagation();
$(chart.series).each(function(j,f){
$(this.data).each(function(k,z){
if(z.name==legendItem)
{
if(z.visible)
{
z.setVisible(false);
}
else
{
z.setVisible(true);
}
}
});
});
});
});
});
});
});
</script>
NOTE: The first chart successfully pulls data from the table I am using.
The other two is my attempt at trying to answer my question.
Here is the result of the code I posted:
http://tinypic.com/r/11uyj3s/8
520
Example: http://jsfiddle.net/4Kn5t/
You need to set three extra options for each chart, to tell which rows should be used for a pie:
$('#container2').highcharts({
data: {
table: document.getElementById('datatable'),
switchRowsAndColumns: true, // use rows as points
startRow: 1,
endRow: 2 // use row == 2
},
chart: {
type: 'pie'
},
title: {
text: 'Data extracted from a HTML table in the page'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.point.y +' '+ this.point.name.toLowerCase();
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
