Develop Reference

Pie chart with laravel and js

I am facing a problem to show data from database to pie chart. Anyone who have idea about this problem then please help me. I am using laravel5 and js(http://www.highcharts.com/demo/pie-basic)
I have a table named products which contain different items that belongs to different category and they are in categories column. I want to show these category and number of product in pie chart ie product =electronic & number=3,product=clothes & number=2 and so on
My controller function
public function category()
{
$data=[];
// this query select products from "categories" column with count
$recordsByCategories=\DB::table('products')
->select('categories','category_id', \DB::raw('count(*) as totalProducts'))
->groupBy('categories')
->get();
//I have made array to show data in pie chart accoding to js documentation given in above link
$data = array_merge_recursive($data, [
['name' => "{{$recordsByCategories->categories}}",
'y' => $recordsByCategories[0]->totalProducts,
],
]);
return view('dashboard.show',compact('data'));
Actual js is like this
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
And my view is like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 80%;min-width: 500px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Cases',
data: {!!json_encode($data)!!}, //I made changes here
}]
});
});
</script>

{{$data[0]}}
try as shown above.

How to change tooltip with jQuery highcharts

I'm trying to have my tooltips display my y value instead of the percentage they currently do. For example, when hovering over Yellow, the tooltip reads 22.6%. It should instead read 91.5 yellow skittles.
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: { text: 'Skittles By Color' },
subtitle: { text: '15.4 oz (437 g) Bag' },
tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' },
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'Color %',
data: [
{ name: 'Green', y: 64, sliced: true, selected: true, color: '#00ff00'},
{ name: 'Purple', y: 71, color: '#660066' },
{ name: 'Red', y: 88.0, color: '#dd0000' },
{ name: 'Orange', y: 91, color: '#ff6600' },
{ name: 'Yellow', y: 91.5, color: '#ffff00' }
]
}]
});
});
jsfiddle

Do you see the tooltip section in your code? That's what you need to change:
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
...should be...
pointFormat: '<b>{point.y} skittles</b>'
As demonstrated here: http://jsfiddle.net/jpotLvt7/11/.
When you have problems like this in the future, I'd recommend looking in your code to see if there are any parts that have names relevant to your issue. In this case, it wasn't too hard to find. You wanted to change the tooltip text, and there was a tooltip { ... } part of your code.

Highcharts 3D Pie

I drew a pie chart with highcharts, but in 3D mode my labels are separated from the chart.
You can see this jsfiddle.
If you change x and y values from dataLabels and run the example, you get the same result. The labels aren´t moved. Why? Do I need to define any parameter? With normal mode It works, but with 3D mode....BREAK!!
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title : {
text : 'Test'
},
tooltip : {
pointFormat: 'Value: <b>{point.percentage:.1f}%</b>'
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
depth: 35,
cursor: 'pointer',
dataLabels: {
enabled: true,
align: 'left',
format: '{point.name}',
connectorWidth: 5,
x:100,
y:300
}
}
},
series: [{
name: 'Test - Levels',
data: [
['Some Text Level 1', 74.25],
['Some Text Level 2', 17.82],
['Some Text Level 3', 7.92]
]
}]
});
});
UPDATED:
Bug found in HighCharts v4.0.1
BUG FIXED in HIGHCHARTS v4.0.3

Unforuantely it is known bug, reported to our developers here: https://github.com/highslide-software/highcharts.com/issues/3082
Please stay on track with the github thread, until publish a fix.

You cannot fix the label position.
Try it:
pie: {
allowPointSelect: true,
depth: 35,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}',
connectorWidth: 5
}
}
http://jsfiddle.net/8cK3M/8/

Highcharts backgroundColor for multiple charts is only applied to one chart

The following example is located at jsfiddle with the following link. http://jsfiddle.net/KWqU2/2/
Both Highcharts have a backgroundColor set within the chart options configuration.
The problem seems to be that no matter what I set the backgroundColor property to, the second chart defaults to the default and ignores whatever setting I have specified. My goal is to have both chart backgrounds transparent. I have tried backgroundColor:null, backgroundColor:'Transparent', backgroundColor:'rgba(255,255,255,0.1)' nothing seems to work.
Any ideas would be appreciated.
Here's the code for both charts:
var chart;
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container').highcharts({
chart: {
backgroundColor:'#000000',
size:'100%'
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: 200,
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
credits:{enabled:false},
exporting:{enabled:false},
colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Supports You', 3],
['Opposes You', 1],
['Absent on Supporting', 0],
['Absent on Opposing', 0]
]
}]
});
var chart2;
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container2').highcharts({
chart2: {
backgroundColor:'Transparent',
size:'100%'
},
legend:{
enabled: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: 200,
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
credits:{enabled:false},
exporting:{enabled:false},
colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Supports You', 3],
['Opposes You', 10],
['Absent on Supporting', 0],
['Absent on Opposing', 0]
]
}]
});

You are doing it wrong, chart2 is not an option. Change this :
$('#container2').highcharts({
chart2: {
backgroundColor:'Transparent',
size:'100%'
},
...
});
To this :
$('#container2').highcharts({
chart: {
backgroundColor:'Transparent',
size:'100%'
},
...
});
See the updated jsFiddle

Changing the way the data is shown in Highcharts

I have a little problem, I have a pie chart generated by highcharts - and it represents the data in percentage. So for example if I have two values 2 and 3, it will show on the chart drawn 40% and 60%. Instead of showing the data in pecentage I actually want to display those numbers on the chart drawn: 2 and 3. Anyone knows what would I have to change to display numbers and not percentage? Thanks!
chart:
{
renderTo: 'sunshine',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title:
{
text: 'Browser market shares at a specific website, 2010'
},
tooltip:
{
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions:
{
pie:
{
allowPointSelect: true,
cursor: 'pointer',
dataLabels:
{
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function()
{
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [
{
type: 'pie',
name: 'Browser share',
data: [
['Jan', 2],
['Feb', 3],
]
}]
});

Use the label formatter for the pie attribute. You can access the exact data point with the this.y value:
pie:
{
allowPointSelect: true,
cursor: 'pointer',
dataLabels:
{
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function()
{
return '<b>'+ this.point.name +'</b>: '+ this.y;
}
}
}