I have a sample Highchart that I'm try to load JSON data without any luck. I see the data return in firebug but the chart bar and line doesn't get drawn. You can see my chart here jsfiddle.net. I know I'm missing something, but I can't seem to put my fingers on it. Any help would greatly appreciated, thank you in advance.
This is my code:
$(function() {
var options = {
chart: {
renderTo: 'container',
zoomType: 'xy'
},
title: {
text: 'JSON Chart'
},
subtitle: {
text: '2012 vs 2011'
},
credits: false,
xAxis: [{
categories:['1','2','3','4','5','6','7','8','9','10']
}],
yAxis: [{ // Primary yAxis
min: 0,
max: 15000,
tickInterval: 1000,
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
},
style: {
color: '#89A54E'
}
},
title: {
text: '2012',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
min: 0,
max: 15000,
tickInterval: 1000,
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
},
style: {
color: '#4572A7'
}
},
title: {
text: '2011',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
formatter: function() {
return Highcharts.numberFormat(this.y, 0);
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 40,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: '2011',
type: 'column',
yAxis: 1,
data: []
}, {
name: '2012',
type: 'spline',
data: []
}]
};
});
$.getJSON('data.cfm', function(json) {
options.series = json;
var chart = new Highcharts.Chart(options);
})
Here's what data.cfm return:
[[9233,14837,11442,8080,10302,5373,2450,9612,18656,8999],[7963,7845,8646,5130,2570,8936,17487,9141,6728,6046]];
Shoulnt it be?
options.series[0].data=json[0];
options.series[1].data=json[1];
This might be of use: http://livecoding.gabrielflor.it/3351656
Related
I'm newbie to highchart and I've got a demo for polar chart using highcharts
Highcharts.chart('container', {
chart: {
polar: true,
type: 'area'
},
accessibility: {
description: 'ASDFR'
},
title: {
text: '',
x: -120
},
pane: {
size: '100%',
startAngle:-42
},
xAxis: {
categories: ['ATT', 'TEC', 'TAC', 'DEF', 'CRE'],
tickmarkPlacement: 'on',
lineWidth: 0,
labels:{
formatter: function(){
return this.value + '???'
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name} <b>{point.y:,.0f}</b></span>'
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
series: [{
name: '',
data: [73, 80, 80, 54, 92],
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
pane: {
size: '70%'
}
}
}]
}
});
How can I show the value of the series right in the xAxis label e.g ATT 73, TEC 80, TAC 80...
You can get the associated value through series data. Example:
xAxis: {
...,
labels: {
formatter: function() {
return this.value + ' ' + this.chart.series[0].yData[this.pos];
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/pyohzk8c/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter
I have a highchart, as showed on the appended image.
I am attempting to format the legend of only my last data stacked. In this case, index 1 always.
Any help on how to achieve this?
My main goal, being, on there always showing a value i have in a variable, which will be the max value possible.
createChart: function (id, chartData, maxYValues, chartTitle, chartNames, dataToMax) {
var me = this;
debugger;
me.highChart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: id
},
title: {
text: chartTitle,
fontSize: '8px'
},
xAxis: {
labels: {
overflow: 'justify'
},
categories: chartNames
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
stackLabels: {
enabled: true,
format: maxYValues
},
title: {
enabled: false
}
},
colors: ['#afafaf', '#f89c1c', '#3aaa80'],
credits: {
enabled: false
},
tooltip: {
pointFormat: '<span>{point.name}</span>'
},
plotOptions: {
series: {
colors: ['#3aab80', '#3aab80'],
colorByPoint: true,
borderWidth: 0,
dataLabels: {
enabled: true,
headerFormat: '{point.y + point.name}',
format: '{y} mb',
verticalAlign: 'top',
y: -20
}
},
column: {
stacking: "percent"
},
area: {
dataLabels: {
enabled: false
}
}
},
legend: {
labelFormat: '<b>{point.y} MB</b><br/>',
labelFormatter: function () {
if (me.series.data.index === 1) {
return maxYValues;
}
}
},
series: [{
showInLegend: false,
data: chartData,
color: '#3aab80'
}, {
showInLegend: false,
data: dataToMax,
legend: {
labelFormat: maxYValues + 'MB</b><br/>'
}
}],
navigation: {
menuItemStyle: {
fontSize: '8px'
}
}
});
},
Thank you
UPDATE: Added code snipped, and updated the image to what my current code is showing
I need help with this heatmap chart
$(document).ready(function(){
var grf_heatmap = {
chart: {
type: 'heatmap',
renderTo:'map',
height: 600,
marginTop: 40,
marginBottom: 40
},
title: {
text: 'heatmap'
},
xAxis: {
categories: []
},
yAxis: {
categories: []
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: '#990041'
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
series: [{
turboThreshold:0,
borderWidth: 1,
point: {
events: {
click: function(e) {
//this.slice();
//console.log(e);
location.href = e.point.options.url;
e.preventDefault();
}
}
},
data:[],
dataLabels: {
enabled: true,
color: 'black',
style: {
textShadow: 'none',
HcTextStroke: null
}
}
}]}
$.getJSON("data.php", function(json) {
grf_heatmap.yAxis.categories = json[0]['data'];
grf_heatmap.xAxis.categories = json[2]['data'];
grf_heatmap.series[0].data = json[1]['data'];
chart = new Highcharts.Chart(grf_heatmap);
});
})
data.php retuns a json like this
[{"name":"EjeY",
"data":["NameA"]},
{"name":"datos",
"data":["{x:0,y:0,value:1,url:'test.php'}",
"{x:1,y:0,value:3,url:'test.php'}"]},
{"name":"EjeX",
"data":["1","2"]}
]
but the result is a blank chart.
what am i doing wrong?,
if i use only the json for xAxis and yAxis categories and complete the chart with this data
data[{x:0,y:0,value:1,url:'test.php'},{x:1,y:0,value:3,url:'test.php'}],
it works
Tanks,
I want to reduce space between bar chart series data. Below mentioned is the image which gives a clear picture :
Can anyone suggest the best approach to do it?
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635],
pointWidth: 22,
}, {
name: 'Year 1900',
data: [133, 156, 947],
pointWidth: 22
}]
});
});
http://jsfiddle.net/fMdk3/5/
The options you want to play with are pointPadding (padding between bars) and groupPadding (padding between seies).
e.g.
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0.1,
}
},
e.g. http://jsfiddle.net/BZzWQ/
The graph does not show the y-axis values. Could anyone help me with this? thanks.
If I put the value of prueba in the series data, everything worsk correctly
the prueba array and the dinero array are displayed correctly.
Thanks,
$.getJSON('http://localhost/jquery/grafica4.php', function(data) {
var dinero = [];
var categories = [];
var prueba = [79, 71, 66,44,42,38,32,10];
$.each(data, function(index, value) {
categories.push(data[index].producto_id);
dinero.push(data[index].cantidad);
alert("hola");
});
alert(dinero);
alert(prueba);
chart4 = new Highcharts.Chart({
chart: {
renderTo: 'container3',
type: 'column'
},
title: {
text: 'Productos más vendidos'
},
xAxis: {
categories: categories
},
yAxis: {
min: 0,
title:
text: 'Cantidad'
},
labels: {
formatter: function() {
return this.value; // clean, unformatted
}
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
'<b>'+'Producto:'+this.x +'</b>'+'<br/>'+ this.y+ ' unidades';
}
},
plotOptions: {
column: {
pointPadding: 0.3,
borderWidth: 0
}
},
series: [{
name: 'Cantidad',
data: dinero
}],
exporting: {
filename: 'Facturacion-de-empleados'
}
});
});