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/
Related
When i use this code, that should work
$('#somefieldname').change(function(){
$('#container').empty();
var link='highcharts.php';
var myjson= $.ajax({
url: link,
async: false
}).responseText;
myjson = myjson.replace("],]", "]]");
myjson=eval(myjson);
Highcharts.chart('container', {
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
format: '{value:%d.%m.%Y}',
rotation: 45,
align: 'left'
},
title: {
enabled: true,
text: 'Date of entry'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Value'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#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.y}'
}
}
},
series: [{
name: 'Value',
color: 'rgba(223, 83, 83, .5)',
data: myjson
}]
});
});
And I get these data from highcharts.php
[[new Date("01.01.2017").getTime(), 700],[new Date("07.03.2017").getTime(), 21000],[new Date("07.03.2017").getTime(), 25000],[new Date("07.03.2017").getTime(), 33000],[new Date("07.03.2017").getTime(), 27000],[new Date("07.03.2017").getTime(), 30000],[new Date("11.05.2017").getTime(), 0],[new Date("11.05.2017").getTime(), 0],[new Date("11.05.2017").getTime(), 0],[new Date("11.05.2017").getTime(), 0],]
I get graph with correct dates, graph looks nice, everying ok.
But when I change #somefiledname value and get this data, from highcharts.php I get nothing. Why?
[[new Date("31.01.2017").getTime(), 195000],[new Date("31.01.2017").getTime(), 225000],[new Date("31.01.2017").getTime(), 245000],[new Date("31.01.2017").getTime(), 185000],[new Date("31.01.2017").getTime(), 239000],[new Date("20.03.2017").getTime(), 1300],[new Date("20.03.2017").getTime(), 3200],[new Date("20.03.2017").getTime(), 2700],[new Date("20.03.2017").getTime(), 4200],[new Date("20.03.2017").getTime(), 1500],]
Data are like this because of this thread here
Highcharts scatter external data
I have 2 div of same content, I want to display the same pie charts inside the 2 div, however just the first one is showing, I know the idea of duplicate the js code and make the id like #container1, #container2, but is there a way to avoid code duplication.
Thank you.
Here is the js:
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
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: 'Unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
});
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
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: 'Unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
});
});
And HTML :
<div id='container' style="margin-top:300px">pie1</div>
<div id='container' style="margin-top:500px">pie2</div>
You can define the Highchart configuration object once and use it multiple times, like this:
$(document).ready(function () {
// Using classes to select multiple containers
var $containers = $(".container");
// You just set the configuration object once
var chartConfig = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
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: 'Unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
};
// And then for every container init Hightchart with the same object
$containers.each(function() {
$(this).highcharts(chartConfig);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container1" class="container">pie1</div>
<div id="container2" class="container">pie2</div>
I have trouble with performance of my highstock. All works, but time of plotting of my data is too slow, about 30 seconds. JSON is about 30000 points. Maybe problem in how I draw this data ? I already turn off animation, shadow, marks etc.
And here is my JS code:
$(function() {
Highcharts.setOptions({
global: {
useUTC: false,
timezoneOffset: - 3 * 60
}
});
function requestData() {
$.ajax({
url: 'values.php',
success: function(series) {
chart.addSeries({name: 'Temp1', data: series[0], yAxis:0}, false);
chart.addSeries({name: 'Temp2', data: series[1], yAxis:0}, false);
chart.redraw();
},
cache: false
});
}
chart = new Highcharts.StockChart({
chart: {
animation: false,
zoomType: 'xy',
renderTo: 'container',
events: {
load: requestData
}
},
title: {
text: 'Temperatures from DS18B20',
x: -20
},
plotOptions: {
spline: {
turboThreshold: 50000
}
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 10,
text: '10min'
}, {
type: 'minute',
count: 30,
text: '30min'
}, {
type: 'all',
text: 'all'
}],
buttonTheme: {
width:60
},
selected: 2
},
xAxis: {
type: 'datetime',
categories: true,
ordinal: false,
// tickInterval: 100*3600,
minTickInterval:100000,
labels: {
align: 'center',
formatter:function(){
return Highcharts.dateFormat('%H:%M:%S',this.value);
}
}
},
yAxis: {
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: false
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#DBFFDB',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 200,
shadow: true
},
tooltip: {
shared: true
},
series: []
});
});
I have data from ajax response in array, here it is:
"attd": [
{
"y": 1,
"name": "Attendance",
"sliced": true,
"selected": true
},
{
"y": 1,
"name": "SPJ in town",
"sliced": true,
"selected": true
}
]
i want pass this result into highchart, here's my code:
success: function(rs) {
var attdChart = $(".attdChart");
attdChart.unbind();
var jsonData = JSON.parse(rs);
if (jsonData.success) {
var data = jsonData.attd;
var data_array = [];
$.each(data, function(key, value){
data_array.push(value);
});
$('#containerPiechart').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
height: 200,
marginRight: 60
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
}
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 0
},
series: data_array
});
}
I tried to use console.log, here is the result:
It show the result. I assumed that the error in series: data_array cause when i give a hard code in there, the chart showed. But cause the code:series: data_array,there is no chart show.Help me please...
here's my sample code for pie chart that how i do that ,
var options1={
chart:{
renderTo: 'pie_chart',
type: 'pie',
options3d:{
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Title'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Time Fixed',
},
labels: {
overflow: 'justify'
},
tooltip:{
formatter: function() {
return this.series.name +': '+ this.y;
}
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true
},
showInLegend: true
},
series: {
animation:{ duration: 1000}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 50,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: []
}
// chart = new Highcharts.Chart(options1);
$.getJSON("your_ajax_call_file.php", function(json){
$.each(json, function(key, value) {
var series = {}; // <-------------------- moved and changed to object
series.name = key;
series.data = value;
options1.series.push(series); // <-------- pushing series object
});
var chart = new Highcharts.Chart(options1);
});
just tried out this method , it should helps you definitely . remember just put series as array in var options1.
I would like to have something similar to the image below, but the columns representing the classes all stack together now. How do I separate them and allow them to load dynamically as well?
Also I need a legend that says green is band 1, yellow is band 2, orange is band 3 and red is band 4, how do i do that as well? My code is in the JS Fiddle page. I am not allowed to use jQuery, need to use pure JavaScript.
var options = {
chart: {
renderTo : 'container',
type: 'column'
},
title: {
text: 'Topic & Subtopic Mastery'
},
subtitle: {
text: 'Average Level-Stream Mastery vs Average Class Mastery'
},
xAxis: {
categories: topics
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Mastery'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
shared: true,
valueSuffix: ' %'
},
plotOptions: {
column: {
grouping: false,
shadow: false
}
},
series: resultsData
};
http://jsfiddle.net/kscwx139/2/
I came up with a solution you are looking for with specifying x and y axis data for level and giving appropriate width to the point.
$(function() {
var chart;
$(document).ready(function() {
var i = 0;
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
if (i == 0) {
i++;
return Highcharts.Color(color)
.setOpacity(1)
.get('rgba');
} else {
i++;
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
}
});
var colors = Highcharts.getOptions().colors;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
borderColor: null
},
title: {
text: 'Mailboxes over Quota'
},
subtitle: {
text: 'Mailbox Size in MB'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: ["Overall Topic", "Topic 1", "Topic 2"],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Total',
align: 'high'
},
allowDecimals: false,
},
tooltip: {
formatter: function() {
return '' +
this.series.name + ': ' + Highcharts.numberFormat(this.y, 0, '.', ',');
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
series: [{
name: 'Level',
color: colors[0],
data: [{
y: 86,
x: 0.25
}, {
y: 80,
x: 1.25
}, {
y: 95,
x: 2.25
}],
pointWidth: 80
}, {
name: '4A',
data: [90, 88, 97]
}, {
name: '4B',
data: [95, 78, 92]
}, {
name: '4C',
data: [80, 69, 84]
}]
});
});
});
To show in label inside your column you can use below code.
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.series.name;
},
y: 25,
}
}
}
You can see it in action at this JSFIddle