I am trying to render a pie chart on the server using PHP and PhantomJS but I am having no luck so far. I followed a lot of guides and threads here and this is what I have tried so far but I am getting a 0 error code which I have no idea what it means.
pieChart.php
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
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: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
});
</script>
Test.js
var page = require('webpage').create();
var url = 'pieChart.php';
page.open(url, function (status) {
page.render('pieChart.png');
phantom.exit();
});
Test.php
$error = exec('/usr/bin/phantomjs test.js', $op, $code);
echo $code; // prints 0 on screen
Related
I need to disable the ability to click items in the legend in a HighChart. Normally I would use the following on a point or series as appropriate:
events: {
legendItemClick: function() {
return false;
}
However the page I'm working on requires the entire HighChart to be defined within a JSON object, for example:
{
"chart": { "type":"column"},
"xAxis": { "categories":[a, b, c, d] },
"series": [{
"name": "name",
"data": [0,1,2,3]
}]
}
Obviously I can't put a function within a JSON, so I'm struggling to find a way to disable legendItemClick.
I could override the site templates to build the chart in JS, and then I could solve my problem. But I've been requested to try to make it work within the current system.
I would welcome any suggestions.
EDIT: Added some clarity on why I can't use a function.
Using json data, update your series data as
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
legendActive:true, //attribute for legend, true means click will work
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true,
legendActive:false,
}, {
name: 'Firefox',
y: 10.38,
legendActive:false,
}, {
name: 'Safari',
y: 4.77,
legendActive:false,
}, {
name: 'Opera',
y: 0.91,
legendActive:false,
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
legendActive:false,
}]
Use function for legend click
point: {
events: {
legendItemClick: function() {
return this.legendActive; //this is property from series data
}
}
}
$(document).ready(function() {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
point: {
events: {
legendItemClick: function() {
return this.legendActive;
}
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
legendActive: true,
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true,
legendActive: false,
}, {
name: 'Firefox',
y: 10.38,
legendActive: false,
}, {
name: 'Safari',
y: 4.77,
legendActive: false,
}, {
name: 'Opera',
y: 0.91,
legendActive: false,
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
legendActive: false,
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
How do I Highlight a slice of pie chart in highcharts on click of a div? More like copying the highlighting functionality of legends but from a differrent div.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
For example in the highchart above I want a different div to do what legends do here. Here is the link to jsfiddle http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-legend/
To do this make the chart a variable and interact with it like a typical javascript Object:
// Build the chart
$(function() {
var chart = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
$('#button').click(function() {
var point = chart.series[0].data[3]; //Or any other point
point.select();
chart.tooltip.refresh(point);
});
})
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<div id="button" style="background-color:grey; width:100px;color:white;">Select Safari</div>
edit: words
I am working with mPDF and Highchart. Both are working, but sometimes the PDF is created before the chart has finished loading (the chart tooks about 2 secods to load). I was wondering if it is possible to delay the mPDF execution, so it waits for the chart.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'RDBMS',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
colors: ['#6495ED', '#FFA07A','#9ACD32','#9370DB','#87CEFA'],
title: {
text: 'Servidores por RDBMS'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.y} <br> {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RDBMS',
colorByPoint: true,
data: [{
name: 'Mysql',
y: 40, //Dado dinamico
sliced: true,
selected: true
}, {
name: 'Oracle',
y: 6, //Dado dinamico
sliced: true
}, {
name: 'SQL Server',
y: 22, //Dado dinamico
sliced: true
}, {
name: 'DB2',
y: 9, //Dado dinamico
sliced: true
}, {
name: 'PostgreSQL',
y: 1, //Dado dinamico
sliced: true
}]
}]
});
var opts = chart.options;
opts = $.extend(true, {}, opts);
delete opts.chart.renderTo;
var strOpts = JSON.stringify(opts);
$.post(
'http://export.highcharts.com/',
{
content: 'options',
options: strOpts ,
type: 'image/jpg',
width: '100px',
scale: '1',
constr: 'Chart',
async: true
},
function(data){
var imgUrl = 'http://export.highcharts.com/' + data;
$('#charts').append("<img src='" + data + "' >");
}
);
This is my code that creates my chart. I call this function at the end of my page, after a table.
And this is what my page looks like printscreen
You need to disable animation
plotOptions: {
series: {
animation: false
}
}
Link to API doc
Execute mPDF after series initial animation is finished. You can do that using afterAnimate event.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.events.afterAnimate
Example:
http://jsfiddle.net/domfxfhs/
**edit - I have narrowed it down to this line breaking it - pointFormat: '{series.name}: {point.percentage:.1f}%'
Any ideas why that would happen?
I used highcharts a few years ago and I'm just getting reacquainted. For some reason I can't get anything other than a pie chart working.
Using the basic bar example works fine:
<script>
$(function () {
var myChart = Highcharts.chart('stats_container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
But when I go to use any other example, like a pie chart:
<script>
$(function () {
var myChart = Highcharts.chart('stats_container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
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: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
});
</script>
I get a http 500 error. I tried a highstock example too, and the same problem happened. Can anyone see where I am going wrong? I can put in the series and other details for the pie chart, but it's when I start putting in the tooltip & plotoptions that it breaks. Thanks
I use smarty templates, and the js wasn't within a {literal} tag. Oooops
I have small width of div and In that I want to show pie chart, But some labels of chart are going out of parent.
Here is what I did.
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
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: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "Microsoft Internet Explorer",
y: 56.33
}, {
name: "Chrome",
y: 24.03,
sliced: true,
selected: true
}, {
name: "Firefox",
y: 10.38
}, {
name: "Safari",
y: 4.77
}, {
name: "Opera",
y: 0.91
}, {
name: "Proprietary or Undetectable",
y: 0.2
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/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="min-width: 310px; height: 400px; max-width: 350px; margin: 0 auto;border:1px solid #F00;"></div>
#laxmikant-dange Do like this http://jsfiddle.net/Nishith/cnanbsm0/1/
Set desired width ,for your case I set datalabel's width 60 pixels.
dataLabels: {
style: {
width: '60px'//whatever width you want
},