I have some data I wish to display on a chart but it just shows the title and no points get drawn. The JSON data I receive is correct as per my knowledge, I think it's somewhere in the chart function but I can't really point it out.
This is what I have so far:
data.php (the output):
{"name":"Temperature","data":[34,28,29,28,34,28,32,27,24,30,25,32,34,28,34,33,24,33,30,27,24,27,26,29]}
The important bits of the html:
<script>
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Temperature vs. Time',
x: -20 //center
},
xAxis: {
categories: ['12AM', '1AM', '2AM', '3AM', '4AM', '5AM', '6AM', '7AM', '8AM', '9AM', '10AM', '11AM','12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM', '10PM', '11PM']
},
yAxis: {
title: {
text: 'Temperature'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: json
});
});
});
});
</script>
It's supposed to show temperature per hour but unfortunately nothing comes up. Any idea what could be wrong?
series should be an array. So you need to just change:
series: json
To:
series: [json]
Working example: http://codepen.io/anon/pen/Kfgsd
Documentation: http://www.highcharts.com/docs/chart-concepts/series
your problem i think that you haven't specified where your chart should be inserted to, afaik you either should specify the renderTo option for the class constructor options or use the $('#container').haighcharts({...}) jquery helper
Related
I want to create a stacked column chart using highcharts.js with datetime data
It works on line type, but not working on column. The result were flat 100%.
What i need is the chart will appear as stacked column. what do i missed?
I tried stacked: 'normal' on plotOptions, but still not working.
Please advise, thank you
My highcharts options:
var optionsProcessTime = {
global: {
useUTC: false
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [],
labels:{
formatter: function(){
return '#'+this.value;
}
}
},
yAxis: {
title: {
text: ''
},
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S',
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S'
},
labels:{
format: '{value:%H:%M:%S}'
},
gridLineWidth: 0
},
tooltip: {
enabled: true,
type: 'datetime',
formatter: function(){
return Highcharts.dateFormat('%H:%M:%S',new Date(this.y))
}
},
legend: {
enabled : false
},
plotOptions: {
series: {
pointPadding: 0.05,
groupPadding: 0
},
column: {
stacking: 'normal'
},
line: {
marker: {
radius: 2,
fillColor: '#ad050b'
},
dashStyle: 'ShortDash',
lineWidth: 1,
}
},
series: []
}
My Json output:
[{
"name":"Checker",
"data":[86,87,91,92,93,94,99,100,101]},
{
"name":"Estimate",
"type":"column",
"data":[1517018400000,1517014800000,1517014800000,1517018400000,1517017200000,1517015700000,1517013900000,1517013900000,1517013900000]},
{
"name":"Process",
"type":"column",
"data":[1517018400000,1517013666000,1517014800000,1517016664000,1517015107000,1517014984000,1517013604000,1517013900000,1517013900000]
}]
I suggest to disable, for debugging only, your definition for yAxis.labels. You will see original labels and realize how it works :)
In short, stacking renders each value on top of the previous one, for example: 1517018400000 + 1517018400000 = 3034036800000 so it renders point in 2066 year. And since all columns starts from zero (0) the distance is quite big: 136 years. Take a look: http://jsfiddle.net/BlackLabel/L4Lgbvvm/45/
Why it works for a line chart then? Simply, line type doesn't start at zero as column does. You can achieve the same result (without stacking) for column too, by setting series.threshold to null: http://jsfiddle.net/BlackLabel/n1s4sqps/
What about stacking? I'm not sure how this should work.. it works the same way for columns and lines, compare stackings:
line: http://jsfiddle.net/BlackLabel/n1s4sqps/1/
column: http://jsfiddle.net/BlackLabel/n1s4sqps/2/
If you could explain how stacking should be rendered in your opinion, let me know, maybe we can find some solution for it. An image of such stacking would be great.
I can get the noData overlay working when there are no series data values, and I can get the x-axis displaying along with the noData label by setting a xAxis.max value, but I can't get the x-axis labels displaying.
Any ideas?
Ideally I would be able to do this without any fake series data (as without data I don't have any series names to provide). This is used in a column chart of well defined x values (like in the js fiddle below, with known fruits, where only each series counts are dynamic)
Closest I've been able to get is this jsfiddle:
http://jsfiddle.net/eLdn6Lfc/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
xAxis: {
categories: ['Mulligatawny', 'Crab bisque', 'Lima bean', 'Wild mushroom'],
max:3
},
series: [{
data: []
}],
lang: {
noData: "No Soup For You!"
},
});
});
You also need to set min limit to x-axis if there is no data.
Working solution here
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Mulligatawny', 'Crab bisque', 'Lima bean', 'Wild mushroom'],
min: 0,
max: 3
},
series: [{
showInLegend: false,
data: []
}],
lang: {
noData: "No Soup For You!"
},
});
I was wondering if there was a way of delaying the loading of a Highcharts' chart on page load. At the moment my chart is loading as soon as the page opens which is causing my code to crash as the script has not had enough time to fetch the data for the chart.
Does anyone know how to get around this?
There's a couple ways of doing this. One is to initialise the chart when you receive the data (example using jQuery post, data looks like [5,6,8,11]):
$(function(){
$.post('test_highchart.asp', {actn:'load-data'}, function(dat){
$('#chart').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Delayed Loading'
},
xAxis: {
title: {
text: 'Values'
}
},
series:[{
name: 'value',
data: dat
}]
});
}, 'json');
});
Or you can initialise the chart on load then pump the data into the chart when you get it (again data looks like [5,6,8,11]):
$(function(){
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
type: 'bar'
},
title: {
text: 'Delayed Loading'
},
xAxis: {
title: {
text: 'Values'
}
},
series:[{
name: 'values',
id: 'series1',
data: []
}]
});
// load data:
$.post('test_highchart.asp', {actn:'load-data'}, function(dat){
$.each(dat, function (val) {
// add points to chart:
window.chart.get('series1').addPoint(val);
});
}, 'json');
});
check http://www.highcharts.com/docs/working-with-data/live-data for details.
cheers
I have a JSON file of the following format :
[
{ name: 'Pay Off',
data: [ [2850,0],
[3135,0],
[3420,0],
[3705,0],
[3990,0],
[4275,0],
[4560,0],
[4845,0],
[5130,0],
[5415,0],
[5700,0],
[5985,285],
[6270,570],
[6555,855],
[6840,1140],
[7125,1425],
[7410,1710],
[7695,1995],
[7980,2280],
[8265,2565],
[8550,2850]
]
},
{
name: 'Profit',
data: [ [2850,-250],
[3135,-250],
[3420,-250],
[3705,-250],
[3990,-250],
[4275,-250],
[4560,-250],
[4845,-250],
[5130,-250],
[5415,-250],
[5700,-250],
[5985,35],
[6270,320],
[6555,605],
[6840,890],
[7125,1175],
[7410,1460],
[7695,1745],
[7980,2030],
[8265,2315],
[8550,2600]
]
}
]
I have to plot graph for 'Pay Off' and 'Profit' together. Even more plots maybe added to the list as per requirement. The data array has x-axis as 0th element and y-axis as 1st element.
What I am currently doing is the following -
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'PayOff Curve'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: []
};
$.getJSON('data.json', function(list) {
var newseries = {
name: '',
data: []
};
$.each(list, function(i,item){
newseries.name = item.name;
newseries.data = item.data;
options.series.push(newseries);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
But I don't any graph at all. I can't figure out the issue with it as I am new to both JavaScript and Python. Please suggest an efficient method to do this.
Thanks for your help..
Your JSON isn't proper one, try to validate it. Properties names shold have double quotes, change from: name: 'Pay Off' to: "name": "Pay Off"
Your JSON is valid for a highcharts series - you don't need to try to transform it at all:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'PayOff Curve'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: []
};
$.getJSON('data.json', function(list) {
options.series = list; // <- just assign the data to the series property.
var chart = new Highcharts.Chart(options);
});
});
If that still doesn't work, open the console to see whether there's a JavaScript error.
Here's a fiddle.
I have a problem with Shield UI Chart. I need to hide all text on my X axis, that is dateTime. But i can't visualize the chart when I add the code that hides the axis.
Below is the code that I am using. Will appreciate any assistance fixing it.
<script type="text/javascript"> $(function () { $("#chart").shieldChart({
axisX: {
axisTickText: {
enabled: false
}
axisType: 'datetime'
},
axisY: {
title: {
text: "Total Sales statistics"
}
},
primaryHeader: {
text: "Aaron's cars sales"
}, dataSeries: [{ seriesType: 'bar',
collectionAlias: 'New Cars Sales Volumes',
data: [325000, 425000, 316000, 378000, 390000]
}, {
seriesType: 'bar',
collectionAlias: 'Used Cars Sales Volumes',
data: [125000, 175000, 158000, 130000,101000,98000]
}]
});
});
</script>
You have forgotton to put a comma between the different properties. You have axisTickText:{} and there must be a comma, because there is one more property following- axisType.
axisX: {
axisTickText: {
enabled: false
},
axisType: 'datetime'
},