HighCharts not displaying chart - highcharts

I have produce many scripts in the past that use the HighCharts functions but for some reason with the current script I am working on I have lost the plot.
I have a script that runs a MySQL query and produces the following result:
get_data.php
[{"name":"Room","data":[1267,1268,2371,1254,2374,1364,1378,1385,2372,2242,256,2237,2254,2261,2260,2273,2271,2268,2253,2379,2378,2377,2376,2233,2234,2243,2380,2383,2107,2108,2240,2246,2359,2381,2384,2361,2373,2395,1369,2398,2393,2391,2390,2387,2363,2109,2238,2239,2247,2248,2249,2251,2265,2266,2133,2117,2119,2118,2120,2106,2103,2101,2263,2389,2375,2369,2235,2258,1253,1266,1238,2264,2110,2114,2115,2394,2399]}]
I then have a script that calls Script1 and should display a chart.
Chart script:
$(function () {
var categories=[];
var data2 =[];
var chart;
$(document).ready(function() {
$.getJSON("get_data.php", function(json) {
$.each(json,function(i,el) {
if (el.name=="Room")
categories = el.data;
else data2.push(el);
});
$('#container1').highcharts({
chart: {
renderTo: 'container',
type: 'column',
marginTop: 80,
marginRight: 30,
marginBottom: 100, events :{
load: function(){
this.series[1].hide();
}
}
},
title: {
text: '',
x: -20, //center
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '11px'
}
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: categories,
labels: {
style: {
color: '#F00',
font: '9px Tahoma, Verdana, sans-serif'
}
}
},
yAxis: {
max:100,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: 'Percentage',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '9px'
}
},
stackLabels: {
enabled: true,
y: 10,
formatter: function() {
//console.log((this.axis.series[1].yData[this.x] ));
return (this.axis.series[1].yData[this.x] ) ;
},
style: {
color: '#000000',
font: '11px Tahoma, Verdana, sans-serif'
}
}
},
plotOptions: {
series: {
pointWidth: 15,
stacking: 'normal',
dataLabels: {
enabled: true,
rotation: -90,
color: '#000000',
align: 'center',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '9px',
textShadow: false,
fontFamily: 'Verdana, sans-serif'
}
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: data2
});
});
});
});

Related

Highcharts data label on last point of series not displayed

I want to display a data label on the last point of a series in a line chart and added this code:
dataLabels: {
enabled: true,
formatter: function() {
if (this.x == this.series.data[this.series.data.length - 1].x) {
return 'Test';
} else {
return null;
}
}
},
Unfortunately the data label is not dislayed. See fiddle
Your series contains 63 points, but only 23 of them have defined y property and are displayed. You need to filter the visible points and get the last of them, for example by:
dataLabels: {
enabled: true,
formatter: function() {
var visiblePoints = this.series.points.filter(p => typeof p.y === 'number');
if (this.x == visiblePoints[visiblePoints.length - 1].x) {
return 'Test';
} else {
return null;
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/e50jspxu/
You can look this =>
working example
Highcharts.chart('container', {
chart: {
height: 800,
style: {
color: '#2e4964',
},
events: {
load() {
let chart = this;
chart.series.forEach(s => {
s.setState('inactive')
})
}
}
},
title: {
text: 'Corona',
align: 'left',
y: 20,
margin: 0,
style: {
color: '#292929',
fontWeight: '700',
fontWeight: '600',
fontSize: '22px',
fontFamily: 'Fira Sans,sans-serif'
}
},
subtitle: {
text: 'Verlauf der Pandemie in den Ländern',
align: 'left',
useHTML: true,
style: {
fontFamily: 'Poppins',
fontWeight: '400',
color: '#373737',
fontSize: "14px"
}
},
xAxis: [{
type: 'linear',
min: 1,
max: 40,
tickInterval: 5,
tickLength: 5,
labels: {
style: {
fontFamily: 'Poppins',
fontWeight: '400',
color: '#373737',
fontSize: "14px"
}
},
title: {
text: ''
}
}],
yAxis: [{
type: 'logarithmic',
max: 40000,
// minorTickInterval: 1,
min: 100,
title: {
text: null
},
labels: {
style: {
fontFamily: 'Poppins',
fontWeight: '400',
color: '#373737',
fontSize: "14px"
}
}
}],
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
legend: {
enabled: true,
reversed: false,
title: {
text: 'Länder an- und abwählen:',
style: {
fontFamily: 'Poppins',
fontWeight: '600',
color: '#373737',
fontSize: "14px"
}
},
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
width: 300,
maxHeight: 200,
x: -8,
padding: 10,
floating: false,
borderWidth: 0,
shadow: false,
itemMarginTop: 1,
itemStyle: {
fontFamily: 'Poppins',
fontWeight: '400',
color: '#373737',
fontSize: "14px"
}
},
// tooltip: {
// shared: false,
// useHTML: true,
// headerFormat: '<span style="white-space:normal;font-size: 14px;font-weight: 400;min-width: 200px;color: black;font-family:Poppins,sans-serif">Tag {point.x}</span><br>',
// pointFormat: '<span style="color:{point.color};">● </span><span style="white-space:normal;font-size: 14px;font-weight: 400;min-width: 200px;color: black;font-family:Poppins,sans-serif;margin-top: 50px;">{series.name} : </span><span style="white-space:normal;font-size: 14px;font-weight: 800;min-width: 200px;color: black;font-family:Poppins,sans-serif">{point.y:,.0f}<br/></b></span>',
// },
tooltip: {
useHTML: true,
enabled: true,
outside: true,
formatter: function() {
return '<div style="white-space:normal;font-size: 14px;font-weight: 400;min-width: 120px;color: #373737;font-family:Poppins">' + 'Tag ' + this.x + '<br>' + this.series.name + ': <b>' + Highcharts.numberFormat(this.point.y, 0) + '</b>';
}
},
credits: {
href: '',
position: {
align: 'right',
y: -35,
},
text: 'Quellen: JHU CSSE, WHO CDC, NHC, Dingxiangyua',
style: {
cursor: 'arrow',
fontFamily: 'Poppins',
fontWeight: 'normal',
fontSize: "12px"
}
},
plotOptions: {
series: {
dataLabels: {
align: 'right',
enabled: true,
allowOverlap: true,
formatter: function() {
if (this.x == this.series.data[this.series.data.length - 1].x) {
return '<span style="color: #373737;font-weight: normal">' + Highcharts.dateFormat("%e. %B", this.x) + '</span>:<br>' + '<span style="color: #003f6e;font-weight: bold">' + Highcharts.numberFormat(this.y, 0) + '</span>';
} else {
return null;
}
},
style: {
textOutline: 0,
fontFamily: 'Poppins',
fontWeight: '400',
color: '#000',
fontSize: "12px"
}
},
marker: {
symbol: 'circle',
enabled: false
}
}
},
data: {
googleSpreadsheetKey: '13gjvlHhCZKlNcC1DV3nStGeWLBLWx3gxTO3SN9F3GQc',
complete: function(options) {
options.series[0].data.forEach(point => {
if (point[1] === 0) {
point[1] = null;
}
});
}
},
series: [{
color: '#8ebfd7',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: 'rgb(70, 151, 190)',
opacity: 0.5,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#266f9a',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#1c2b54',
opacity: 1,
dataLabels: {
enabled: true,
formatter: function() {
if (this.x == this.series.data[this.series.data.length - 1].x) {
return 'Test';
} else {
return null;
}
}
},
states: {
hover: {
opacity: 1
}
}
},
{
color: '#780081',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#9c00b3',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#b3007b',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#b30012',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#b36d00',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#b39c00',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#a3b300',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#59b300',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#12b36b',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#00b394',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#00a8b3',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#0091b3',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#373737',
name: 'Verdopplung alle 3 Tage',
clip: false,
dashStyle: 'dot',
showInLegend: false,
states: {
inactive: {
opacity: 1
}
},
}
]
});

Highcharts series (column) names of x axis

I have a script that returns a chart (Highcharts) and it works fine apart from not displaying the names of the columns on the x axis. Can anyone see where I have gone wrong.
My Json:
[{"data":[30.95]},{"data":[2.38]},{"data":[66.67]}]
My script:
$(function () {
var colors = ['#FF0000','#FF9900','#009900'];
colorIterator = 0;
var chart;
$(document).ready(function() {
$.getJSON("../charts/1-2-4-reports_chart.php?TAG=<?php echo $_POST['SectionVar'];?>&From=<?php echo $StartDate;?>&To=<?php echo $EndDate;?>", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
height: 200,
marginRight: 25,
marginBottom: 25,
plotBackgroundColor: '#FCFFC5',
style: {
fontFamily: 'serif',
fontSize: '8px',
}
},
title: {
text: 'Net Promoter Score: <?php echo $_POST['SectionVar'];?>',
x: -20,
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'normal',
fontSize: '11px'
} //center
},
subtitle: {
text: '',
},
xAxis: {
categories: ['Detractors', 'Passives', 'Promoters'],
title: {
text: ''
}
},
yAxis: {
//reversedStacks: false,
endOnTick: false,
max:101,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: '',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
plotLines: [{
color: '#808080'
}]
},
credits: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>Guest responses: '+ this.y +'<br/>'+ this.series.name +'</b><br/>Month:'+
this.x;
}
},
navigation: {
buttonOptions: {
verticalAlign: 'top',
y: -10,
x: -20
}
},
legend: {
enabled: false,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 1
},
colors: [
'#FF0000',
'#FF9900',
'#009900',
],
plotOptions: {
column: {
colorByPoint: false
},
series: {
type: 'column',
cursor: 'pointer',
pointWidth: 30,
point: {
events: {
//click: function() {
//location.href = "feedback-items_detractors_iframe.php?FromDate1=<?php echo $StartDate;?>&ToDate1=<?php echo $EndDate;?> target='iframe2'";
//}
}
},
legendIndex:0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
//borderRadius: 5,
//backgroundColor: 'rgba(252, 255, 255, 255)',
//borderWidth: 1,
//borderColor: '#AAA',
y: -6,
format: '{y:.2f} %', // one decimal
y: -20, // 10 pixels down from the top
this.series.name
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
exporting: {
chartOptions: { // specific options for the exported image
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
fallbackToExportServer: false
},
series: json,
});
});
});
});
Many thanks in advance for your time.
You made some syntax errors in your code, fixed version below:
$(function() {
var colors = ['#FF0000', '#FF9900', '#009900'];
var colorIterator = 0;
var chart;
$(document).ready(function() {
const json = [{"data":[30.95]},{"data":[2.38]},{"data":[66.67]}]
setTimeout(function() {
chart = Highcharts.chart('container', {
chart: {
renderTo: 'container1',
type: 'column',
height: 200,
marginRight: 25,
marginBottom: 25,
plotBackgroundColor: '#FCFFC5',
style: {
fontFamily: 'serif',
fontSize: '8px',
}
},
title: {
text: '',
x: -20,
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'normal',
fontSize: '11px'
} //center
},
subtitle: {
text: '',
},
xAxis: {
categories: ['Detractors', 'Passives', 'Promoters'],
title: {
text: ''
}
},
yAxis: {
//reversedStacks: false,
endOnTick: false,
max: 101,
showFirstLabel: false,
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickWidth: 1,
tickLength: 2,
tickInterval: 10,
gridLineColor: '#ddd',
title: {
text: '',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
plotLines: [{
color: '#808080'
}]
},
credits: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>Guest responses: ' + this.y + '<br/>' + this.series.name + '</b><br/>Month:' +
this.x;
}
},
navigation: {
buttonOptions: {
verticalAlign: 'top',
y: -10,
x: -20
}
},
legend: {
enabled: false,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 1
},
colors: [
'#FF0000',
'#FF9900',
'#009900',
],
plotOptions: {
column: {
colorByPoint: false
}
},
series: {
type: 'column',
cursor: 'pointer',
pointWidth: 30,
point: {
events: {
}
},
legendIndex: 0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
y: -6,
format: '{y:.2f} %', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
},
exporting: {
chartOptions: { // specific options for the exported image
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
fallbackToExportServer: false
},
series: json,
});
});
});
});
https://jsfiddle.net/0kjojak9/

Highcharts not display chart

I am having an issue displaying my chart. I am creating a script that displays three charts with a print button to print all the chart to one PDF.
The JSON call is returning:
[{"name":"Month"},{"name":"percent","data":[9.52]}]
I am not getting any errors in the browser console, can any one see where I am going wrong.
$(function () { //1
var chart1, chart2, chart3;
var categories=[];
//var chart;
var data2 =[];
$(document).ready(function() { //2
$.getJSON("../charts/1-2-4-detractors_month_chart.php?From=<?php echo $_GET['From'];?>&To=<?php echo $_GET['To'];?>", function(json) { //3
$.each(json,function(i,el) { //4
if (el.name=="Month")
categories = el.data;
else data2.push(el);
});
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
marginTop: 25,
marginRight: 25,
marginBottom: 25,
plotBackgroundColor: '#FCFFC5',
style: {
fontFamily: 'serif',
fontSize: '8px',
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
categories: categories,
labels: {
enabled: false
}
},
yAxis: {
endOnTick: false,
max:101,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: '',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
plotLines: [{
color: '#808080'
}]
},
legend: {
enabled: false,
},
colors: ['#FF0000','#FF2F2F'],
plotOptions: {
column: {
colorByPoint: true
},
series: {
cursor: 'pointer',
pointWidth: 20,
point: {
events: {
//click: function() {
//location.href = "feedback-items_detractors_iframe.php?FromDate1=<?php echo $StartDate;?>&ToDate1=<?php echo $EndDate;?> target='iframe2'";
//}
}
},
legendIndex:0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 255, 255)',
borderWidth: 1,
borderColor: '#AAA',
y: -6,
format: '{y:.2f} %', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
tooltip: {
style: {
fontSize: '7pt',
fontFamily: 'Verdana, sans-serif'
},
valueDecimals: 1,
formatter: function() {
return '<b>Guest responses:<br/> '+ this.y +'%</b>';
}
},
navigation: {
buttonOptions: {
verticalAlign: 'top',
y: -10,
x: -20
}
},
credits: {
enabled: false
},
series: data2,
lang: {
noData: "No data"
},
noData: {
style: {
fontWeight: 'normal',
fontSize: '12px',
color: '#303030'
}
},
});
});
});
//});
//--------------------------------------------------------------------
$("#print").click(function () {
printCharts([chart1, chart2, chart3]);
});
//--------------------------------------------------------------------
function printCharts(charts) {
var origDisplay = [],
origParent = [],
body = document.body,
childNodes = body.childNodes;
// hide all body content
Highcharts.each(childNodes, function (node, i) {
if (node.nodeType === 1) {
origDisplay[i] = node.style.display;
node.style.display = "none";
}
});
// put the charts back in
$.each(charts, function (i, chart) {
origParent[i] = chart.container.parentNode;
body.appendChild(chart.container);
});
// print
window.print();
// allow the browser to prepare before reverting
setTimeout(function () {
// put the chart back in
$.each(charts, function (i, chart) {
origParent[i].appendChild(chart.container);
});
// restore all body content
Highcharts.each(childNodes, function (node, i) {
if (node.nodeType === 1) {
node.style.display = origDisplay[i];
}
});
}, 500);
}
});

Highcharts converting a column chart to a pie chart

After reading many posts and tutorials concerning pie charts I am totally stuck. I have a column chart which work fine but I need to convert/change it to a pie chart.
The data for the chart comes from a data table via a query and is returns in Json format.
[{"name":"Month","data":["Jun"]},{"name":"percent","data":[55.68]},{"data":[20.45]},{"data":[7.95]},{"data":[15.91]}]
The big issue I am having is using the json result as I do when using a column chart.
My current column chart:
$(function () {
var categories=[];
var data4 =[];
var chart;
$(document).ready(function() {
$.getJSON("../charts/1-2-4-overall_month_chart.php?From=<?php echo $StartDate;?>&To=<?php echo $EndDate;?>", function(json) {
$.each(json,function(i,el) {
if (el.name=="Month")
categories = el.data;
else data4.push(el);
});
$('#container1').highcharts({
chart: {
renderTo: 'container',
type: 'column',
marginTop: 25,
marginRight: 25,
marginBottom: 25,
plotBackgroundColor: '#FCFFC5'
},
title: {
text: '',
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: categories,
labels: {
enabled: true
}
},
yAxis: {
endOnTick: false,
max:101,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: 'Percentage %',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
plotLines: [{
color: '#808080'
}],
labels: {
align: 'left',
x: 0,
y: -2
}
},
legend: {
enabled: false,
itemStyle: {
font: '11px Trebuchet MS, Verdana, sans-serif',
color: '#000000'
},
itemHoverStyle: {
color: '#000000'
},
itemHiddenStyle: {
color: '#444'
}
},
colors: [
'#ff0000',
'#f49004',
'#3abf05',
'#8b8c8a',
],
plotOptions: {
column: {
colorByPoint: false
},
series: {
pointPadding: 3.25,
cursor: 'pointer',
pointWidth:30,
point: {
events: {
click: function() {
window.location.href = "1-4-detractors_chart_month.php";
}
}
},
legendIndex:0,
dataLabels: {
enabled: true,
//rotation: -90,
color: '#000000',
align: 'right',
cursor: 'pointer',
format: '{point.y:.2f}', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
tooltip: {
enabled: false,
},
navigation: {
buttonOptions: {
verticalAlign: 'top',
y: -10
}
},
credits: {
enabled: false
},
series: data4,
lang: {
noData: "No data for your date<br /> selection"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '12px',
color: '#303030'
}
},
});
});
});
});
check Basic pie for more info. I have made some change in code specially in processing data for pie chart from ajax response. Check for the comments and I have also commented out code which are not required by pie chart
$(function() {
var categories = [];
var data4 = [];
var chart;
$(document).ready(function() {
/* $.getJSON("../charts/1-2-4-overall_month_chart.php?From=<?php echo $StartDate;?>&To=<?php echo $EndDate;?>", function(json) {
$.each(json,function(i,el) {
if (el.name=="Month")
categories = el.data;
else data4.push(el);
}); */
var data = [{
"name": "Month",
"data": ["Jun"]
}, {
"name": "percent",
"data": [55.68]
}, {
"data": [20.45]
}, {
"data": [7.95]
}, {
"data": [15.91]
}]
$.each(data, function(i, el) {
if (el.name == "Month")
categories = el.data;
//below is some change check https://www.highcharts.com/demo/pie-basic
else data4.push({
name: el.name,
y: el.data[0]
});
});
//console.log(JSON.stringify(data4))
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'pie', //change to pie
marginTop: 25,
marginRight: 25,
marginBottom: 25,
plotBackgroundColor: '#FCFFC5'
},
title: {
text: '',
},
subtitle: {
text: '',
x: -20
},
/* xAxis: {
categories: categories,
labels: {
enabled: true
}
},
yAxis: {
endOnTick: false,
max: 101,
showFirstLabel: false,
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickWidth: 1,
tickLength: 2,
tickInterval: 10,
gridLineColor: '#ddd',
title: {
text: 'Percentage %',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
plotLines: [{
color: '#808080'
}],
labels: {
align: 'left',
x: 0,
y: -2
}
},*/
legend: {
enabled: false,
itemStyle: {
font: '11px Trebuchet MS, Verdana, sans-serif',
color: '#000000'
},
itemHoverStyle: {
color: '#000000'
},
itemHiddenStyle: {
color: '#444'
}
},
colors: [
'#ff0000',
'#f49004',
'#3abf05',
'#8b8c8a',
],
plotOptions: {
/* column: {
colorByPoint: false
},*/
series: {
pointPadding: 3.25,
cursor: 'pointer',
pointWidth: 30,
point: {
events: {
click: function() {
window.location.href = "1-4-detractors_chart_month.php";
}
}
},
legendIndex: 0,
dataLabels: {
enabled: true,
//rotation: -90,
color: '#000000',
align: 'right',
cursor: 'pointer',
format: '{point.y:.2f}', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
tooltip: {
enabled: false,
},
navigation: {
buttonOptions: {
verticalAlign: 'top',
y: -10
}
},
credits: {
enabled: false
},
series: [{
data: data4
}],
lang: {
noData: "No data for your date<br /> selection"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '12px',
color: '#303030'
}
},
});
});
//});
});
<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>

HIghCharts. DataLables not show. IE8

I am using Highcharts gauges. Work perfectly in Chrome.
however the gauge datalable does not appear in IE8.
how to display solidgauge's datalabels of highcharts in IE8?
in chrome, datalabels display OK.
thanks in advance..
<script type="text/javascript">
$(function () {
/**
* Dark theme for Highcharts JS
* #author Torstein Honsi
*/
// Load the fonts
Highcharts.createElement('link', {
href: 'http://fonts.googleapis.com/css?family=Unica+One',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
Highcharts.theme = {
colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
chart: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, '#2a2a2b'],
[1, '#3e3e40']
]
},
style: {
fontFamily: "'Unica One', sans-serif"
},
plotBorderColor: '#606063'
},
title: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '20px'
}
},
subtitle: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase'
}
},
xAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
title: {
style: {
color: '#A0A0A3'
}
}
},
yAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
tickWidth: 1,
title: {
style: {
color: '#A0A0A3'
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
}
},
plotOptions: {
series: {
dataLabels: {
color: '#B0B0B3'
},
marker: {
lineColor: '#333'
}
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
},
legend: {
itemStyle: {
color: '#E0E0E3'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#606063'
}
},
credits: {
style: {
color: '#666'
}
},
labels: {
style: {
color: '#707073'
}
},
drilldown: {
activeAxisLabelStyle: {
color: '#F0F0F3'
},
activeDataLabelStyle: {
color: '#F0F0F3'
}
},
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
theme: {
fill: '#505053'
}
}
},
// scroll charts
rangeSelector: {
buttonTheme: {
fill: '#505053',
stroke: '#000000',
style: {
color: '#CCC'
},
states: {
hover: {
fill: '#707073',
stroke: '#000000',
style: {
color: 'white'
}
},
select: {
fill: '#000003',
stroke: '#000000',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: '#505053',
inputStyle: {
backgroundColor: '#333',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
},
navigator: {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(255,255,255,0.1)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
},
xAxis: {
gridLineColor: '#505053'
}
},
scrollbar: {
barBackgroundColor: '#808083',
barBorderColor: '#808083',
buttonArrowColor: '#CCC',
buttonBackgroundColor: '#606063',
buttonBorderColor: '#606063',
rifleColor: '#FFF',
trackBackgroundColor: '#404043',
trackBorderColor: '#404043'
},
// special colors for some of the
legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#C0C0C0',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
var gaugeOptions = {
chart: {
type: 'solidgauge',
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70,
},
labels: {
y: 16,
}
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled:true,
useHTML: true,
backgroundColor:'#000000',
color:'#FF6699',
crop:false,
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
enabled:true,
backgroundColor:'#000000',
color:'#FF6699',
crop:false,
style: {
color: '#FF6699',
fontWeight: 'bold',
fontSize:'25px'
}
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// The RPM gauge
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5,
title: {
text: 'RPM'
}
},
series: [{
name: 'RPM',
data: [1],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
// Bring life to the dials
setInterval(function () {
// Speed
var chart = $('#container-speed').highcharts();
if (chart) {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}
// RPM
chart = $('#container-rpm').highcharts();
if (chart) {
var point = chart.series[0].points[0],
newVal,
inc = Math.random() - 0.5;
newVal = point.y + inc;
if (newVal < 0 || newVal > 5) {
newVal = point.y - inc;
}
point.update(newVal);
}
}, 2000);
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>
<div style="width: 600px; height: 400px; margin: 0 auto; " >
<div id="container-speed" style="width: 300px; height: 200px; float: left; "></div>
<div id="container-rpm" style="width: 300px; height: 200px; float: left; "></div>
</div>

Resources