Highcharts display multiple lines (series) of data - highcharts

I am trying to craete a chart with 4 lines of data. The issue I have is for wahtever reason I can't get the data to display.
My JSON:
[{"Average":["Apr","May","Jun","Jul"],"Good":["Apr","May","Jun","Jul"],"Excellent":["Apr","May","Jun","Jul"],"Not used":["Jan","Apr","May","Jun","Jul"]},{"name":"Poor","data":[1,2]},{"name":"Average","data":[1,1,4,1]},{"name":"Good","data":[1,1,4,1]},{"name":"Excellent","data":[1,1,4,1]},{"name":"Not used","data":[1,1,2,4,1]}]
My Code:
$(function () {
var categories=[];
var data2 =[];
var chart;
$(document).ready(function() {
$.getJSON("../charts/1-2-4-overall_year_chart.php?From=<?php echo $YearStart;?>&To=<?php echo $YearEnd;?>", function(json) {
$.each(json,function(i,el) {
if (el.name=="Month")
categories = el.data;
else data2.push(el);
});
$('#container1').highcharts({
chart: {
renderTo: 'container',
type: 'line',
marginTop: 25,
marginRight: 25,
marginBottom: 25,
plotBackgroundColor: '#FCFFC5',
style: {
fontFamily: 'serif',
fontSize: '8px',
}
},
title: {
text: ''
},
colors: [
'#ff0000',
'#f49004',
'#3abf05',
'#8b8c8a',
],
subtitle: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Percentage %'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
data2: [{
name: 'Detractor',
color: '#00FF00',
y: 1
}, {
name: 'Passive',
color: '#FF00FF',
y: 5
}]
}],
credits: {
enabled: false
},
lang: {
noData: "No data"
},
noData: {
style: {
fontWeight: 'normal',
fontSize: '12px',
color: '#303030'
}
},
});
});
});
});
Can anyone see where I am going wrong.
Many thanks in advance for your time.

Related

Why my polar chart is rendered as a line chart? (Highcharts latest version)

I followed some instructions and tutorials online but failed to create a polar chart.
It ends up a normal line chart.
What's wrong with my code? Any tips?
Thanks,
Highcharts.chart('container', {
title: {
text: null
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '{point.y}'
},
pane: {
size: '95%'
},
chart: {
type: 'area',
polar: true,
spacingTop: 0
},
credits: {
enabled: false
},
xAxis: {
categories: ["John","Weta","Marry"],
tickmarkPlacement: 'on',
lineWidth: 2,
labels: {
style: {
fontSize: window.screenshotMode ? '36px' : '18px'
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 2,
min: 0,
max: 100,
labels: {
style: {
fontSize: window.screenshotMode ? '36px' : '18px'
}
}
},
plotOptions: {
series: {
borderWidth: 4,
borderColor: '#a00'
}
},
series: [{
data: [68,97,964]
}]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
highchart-more is required to run the polar charts so you will need to include highchart-more.js library.
<script src="https://code.highcharts.com/highcharts-more.js"></script>
Highcharts.chart('container', {
title: {
text: null
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '{point.y}'
},
pane: {
size: '95%'
},
chart: {
type: 'area',
polar: true,
spacingTop: 0
},
credits: {
enabled: false
},
xAxis: {
categories: ["John","Weta","Marry"],
tickmarkPlacement: 'on',
lineWidth: 2,
labels: {
style: {
fontSize: window.screenshotMode ? '36px' : '18px'
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 2,
min: 0,
max: 100,
labels: {
style: {
fontSize: window.screenshotMode ? '36px' : '18px'
}
}
},
plotOptions: {
series: {
borderWidth: 4,
borderColor: '#a00'
}
},
series: [{
data: [68,97,964]
}]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px"></div>
API Reference : https://api.highcharts.com/highcharts/chart.polar

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 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 not displaying chart

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
});
});
});
});

How to set tick length in y-axis to 0 or remove tickline from y axis in highchart?

for x axis 'tickLength: 0' is working and I can remove the tick from x-axis label,but same thing not working for y axis. Please suggest me the right way to remove the y axis tick line.
$(function () {
Highcharts.setOptions({
colors: ['#C9F4F4']
});
$('.container').highcharts({
chart: {
type: 'area',
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul','Aug','Sep','Oct','Nov','Dec'],
tickmarkPlacement: 'on',
overflow:'false',
gridLineWidth: 1,
//tickLength: 0,
startOnTick:true,
title: {
enabled: false
}
},
yAxis: {
min: 100,
max: 1000,
tickInterval: 100,
gridLineWidth: 1,
title: {
enabled: false
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
shared: true,
formatter: function () {
return this.y;
}
},
plotOptions: {
series: {
lineColor: '#00CFCF',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#00CFCF',
enabled: false,
}
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 900, 1000, 1000,200,750,630,400,75]
}]
});
});
here is the JSFiddle
Is it the desired effect? http://jsfiddle.net/xznu95mv/5/
In xAxis part,
Change startOnTick: true, to startOnTick: false,
Add min: 0.5
Ref: How to remove the gap between yAxis and data?

Resources