how to display 2 same highcharts without duplicate the code - javascript

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>

Related

Highlight a slice of pie chart in highcharts on click of a 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

How to make mPDF wait for my JS to finish

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/

Highstock (Highcharts) Tooltip without delimiter scale y values

I'm trying show multiples values in tooltip.
In old version of Highstock (2.0.3) it's working fine!
But in last release, not work =(
Working fine version with highstock-2.0.3:
<!-- ##### !!! HERE - WORKING FINE !!! ##### -->
<script src="http://code.highcharts.com/stock/2.0.3/highstock.js"></script> <!-- OLD Version -->
<!--script src="https://code.highcharts.com/highcharts.js"></script--> <!-- NEW Version -->
<div id="container" style="height: 400px"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
plotBorderWidth: 0,
backgroundColor: null,
events: {
load: function() {
valueX('#xxx');
}
}
},
xAxis: {
categories: [1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014],
title: {
text: ''
},
labels: {
y: 30,
style: {
fontSize: '13px'
}
}
},
yAxis: {
opposite: false,
gridLineWidth: 0.5,
labels: {
enabled: true,
},
title: {
text: ''
},
min: 0,
max: 85,
startOnTick: false
},
tooltip: {
shared: true,
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
},
series: [
{
animation: false,
name: 'A',
min: 0,
max: 1000,
data: [113.000,153.000,156.000,155.000,123.000,109.000,95.000,67.000,111.000,106.000,95.000,88.000,88.000,107.000,90.000,79.000,59.000,65.000,66.000],
type: 'line',
showInLegend: false,
color: 'none', // color 'transparent' não funciona no IE 8
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
tooltip: {
shared: true,
useHTML: true,
pointFormat: '{point.y} AAA <br />',
valueDecimals: 2
}
},
{
animation: false,
name: 'B',
data: [196429.000,192757.000,185378.000,186675.000,179462.000,167270.000,165125.000,157333.000,159636.000,160324.000,153598.000,147554.000,151092.000,149217.000,152051.000,152902.000,153945.000,155758.000,159915.000],
type: 'line',
showInLegend: false,
color: 'none', // color 'transparent' não funciona no IE 8
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
tooltip: {
shared: true,
useHTML: true,
pointFormat: '{point.y} BBB<br/>',
valueDecimals: 2
}
},
{
animation: false,
name: 'C',
data: [57.530,79.370,84.150,90.10,68.540,65.160,57.530,42.580,69.530,66.120,61.850,59.640,58.240,71.710,59.190,51.670,38.330,41.730,41.270],
shared: true,
type: 'line',
lineWidth: 5,
tooltip: {
useHTML: true,
showInLegend: false,
pointFormat: '{point.y} CCC<br/>',
valueDecimals: 2
},
},
{
data: "[null]",
visible: false,
showInLegend: false
}
]
http://jsfiddle.net/mad7a8b1/1/
========================================
Not Working with last version highstock-5.0.1:
<!-- ##### !!! HERE - NOT WORKING !!! ##### -->
<script src="https://code.highcharts.com/highcharts.js"></script> <!-- NEW Version -->
<!--script src="http://code.highcharts.com/stock/2.0.3/highstock.js"></script--> <!-- OLD Version -->
<div id="container" style="height: 400px"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
plotBorderWidth: 0,
backgroundColor: null,
events: {
load: function() {
valueX('#xxx');
}
}
},
xAxis: {
categories: [1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014],
title: {
text: ''
},
labels: {
y: 30,
style: {
fontSize: '13px'
}
}
},
yAxis: {
opposite: false,
labels: {
enabled: true,
style: {
}
},
title: {
text: ''
},
min: 0,
max: 85,
startOnTick: false
},
tooltip: {
shared: true,
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0,
},
series: [
{
animation: false,
name: 'A',
min: 0,
max: 1000,
data: [113.000,153.000,156.000,155.000,123.000,109.000,95.000,67.000,111.000,106.000,95.000,88.000,88.000,107.000,90.000,79.000,59.000,65.000,66.000],
type: 'line',
showInLegend: false,
color: 'none', // color 'transparent' não funciona no IE 8
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
tooltip: {
shared: true,
useHTML: true,
pointFormat: '{point.y} AAA <br />',
valueDecimals: 2
}
},
{
animation: false,
name: 'B',
data: [196429.000,192757.000,185378.000,186675.000,179462.000,167270.000,165125.000,157333.000,159636.000,160324.000,153598.000,147554.000,151092.000,149217.000,152051.000,152902.000,153945.000,155758.000,159915.000],
type: 'line',
showInLegend: false,
color: 'none', // color 'transparent' não funciona no IE 8
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
tooltip: {
shared: true,
useHTML: true,
pointFormat: '{point.y} BBB<br/>',
valueDecimals: 2
}
},
{
animation: false,
name: 'C',
data: [57.530,79.370,84.150,90.10,68.540,65.160,57.530,42.580,69.530,66.120,61.850,59.640,58.240,71.710,59.190,51.670,38.330,41.730,41.270],
shared: true,
type: 'line',
lineWidth: 5,
tooltip: {
useHTML: true,
showInLegend: false,
pointFormat: '{point.y} CCC<br/>',
valueDecimals: 2
},
},
{
data: "[null]",
visible: false,
showInLegend: false
}
]
});
});
http://jsfiddle.net/vtju3n4a/2/
Please: check head includes to view the JSs. ;-)
Thanks!

Data From Ajax Response Can't Be Loaded In HighChart

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.

How can I remove the white border from HighCharts pie chart?

I am using High-charts to show pie charts, can any one tell me how can I remove this white border around the radius. My code is given below also the screen shot image of chart.
I have no lot of experience with high-charts if anyone know this please help me. The documentation is also very tough to read and understand
$(function () {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor:'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%']
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [
{
name: 'Incoming',
y: 40,
color: '#87b22e'
},
{
name: 'Outgoing',
y: 30,
color: 'black'
},
{
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function () {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>

You need to set the plotOptions.pie.borderWidth property to 0:
$(function() {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor: 'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%'],
borderWidth: 0 // < set this option
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [{
name: 'Incoming',
y: 40,
color: '#87b22e'
}, {
name: 'Outgoing',
y: 30,
color: 'black'
}, {
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function() {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>

Categories

Resources