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
Related
Picture as a reference
I want to build this type of chart and my data set link is below. I'm unable to find any example regarding this.
https://docs.google.com/spreadsheets/d/1geCzzfBeyY8yDHAdEFWUSUf8ex3QWfqDtPg7ArOdTw0/edit?usp=sharing
From the referred image I can see that it is a stock chart, which demo base you can find here: https://www.highcharts.com/demo/stock
How to align the series to the particular yAxis you can find here: https://api.highcharts.com/highcharts/series.line.yAxis
Sample demo: https://jsfiddle.net/BlackLabel/95ptgrec/
// Create the chart
Highcharts.stockChart('container', {
yAxis: [{
title: {
text: 'axis1'
}
}, {
title: {
text: 'axis2'
}
}, {
title: {
text: 'axis3'
},
opposite: false
}],
series: [{
data: generateData()
}, {
data: generateData(),
yAxis: 1
}, {
data: generateData(),
yAxis: 2
}]
});
If you want to implement charts in Angular or React environment I encourage to use the official wrappers:
https://github.com/highcharts/highcharts-angular
https://github.com/highcharts/highcharts-react
I am trying to using highchart library into Xcode for showing chart In mobile application. Objective C to calling highchart library. For data load I have Included local .CSV file Into Xcode. Now If I am using below code to read the data from CSV file, I cant print the data and chart data also not loading.
My Code Below
$(function () {
$.get('data.csv', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : ''
},
rangeSelector : {
enabled : false
},
scrollbar : {
enabled : false
},
navigator : {
enabled : false
},
plotOptions: {
line: {animation: true},
series: {
marker: {
enabled: true,
fillColor: '#FFFFFF',
lineWidth: 2,
symbol: 'url()'
},
enableMouseTracking: true
}
},
series : [{
name : 'AAS Stock Price',
csv:data,
/*data : [
[1233705600000,13.36],
[1233792000000,13.78],
[1233878400000,14.25],
[1234137600000,14.64],
[1234224000000,13.98],
[1234310400000,13.83],
[1234396800000,14.18],
[1234483200000,14.17],
[1234828800000,13.50],
[1234915200000,13.48],
[1235001600000,12.95],
[1235088000000,13.00],
[1235347200000,12.42],
[1235433600000,12.89],
[1235520000000,13.02],
[1235606400000,12.74],
[1235692800000,12.76]],*/
tooltip: {
valueDecimals: 2
}
}]
});
});
});
data: {
csv: data // data is your param you set in get csv call
},
,
refer Documentation here
For loading data directly from CSV file you should add Highcharts data module and then set the data like:
$.get('data.csv', function(csv) {
$('#container').highcharts({
chart: {
type: 'column'
},
data: {
csv: csv
},
title: {
text: 'Fruit Consumption'
},
yAxis: {
title: {
text: 'Units'
}
}
});
});
More info about data module can be found in Highchars Docs - here.
I'm trying to replace the highcharts that I loaded using ajax. Apparently what I am doing is that I would get new values from the user, send the new values thru Ajax, then return an entirely new graph(different graph type with different data) so what I'm doing is this:
$.ajax({
type: "POST",
url: $("#searchForm").attr( 'action' ),
data: $("#searchForm").serialize(),
success: function(response) {
$('#container').highcharts({ response });
}
});
But what happens is that it just loads a blank graph.
this is my highcharts code:
chart: { type: 'bubble', zoomType: 'xy'}, title: { text: 'Day at a Glance' }, tooltip: {}, xAxis:
{categories:[ 'Delta Air Lines' ]}, yAxis: { title: { text: '# of Crew' } }, series: [{name: '# of
Passengers', URLs:[ '#'], data: [['1',1,0]], point: { events: {click: function() { var someURL =
this.series.userOptions.URLs[this.x]; if (someURL) window.open('http://'+someURL); }}} }]
Is there something wrong with the way I call my ajax or there is something wrong with my highcharts code?
In the response you need to get json, like
{
chart:{
//any options
},
series: [{
data:[1,2,3] //any points
}]
}
So you cannot use something like highcharts({ response }) but highcharts(response)
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
I am pulling data from the mtgox api, I can see in my console that all the data is reaching my chart correctly. However, I cannot get the data to display on my chart. Any help is appreciated thanks.
var now = new Date();
$('#container').highcharts({
chart: {
type: 'line',
},
title: {
text: 'Bitcoin Price',
},
subtitle: {
text: 'Source: MtGox.com',
},
xAxis: {
type: 'datetime'
},
plotOptions: {
series: {
pointStart: Date.UTC(now.getYear(), now.getMonth(), now.getDate()),
pointInterval: 24 * 3600 * 1000 // one day
}
},
yAxis: {
title: {
text: 'Price'
},
},
series: [{
name: 'Bitcoin',
data: series
}]
});
}
});
});
I think the issue is that you've wrapped part of your success callback in $(function () {...}). This attaches an event handler that will be fired when the DOM is ready. You won't need it in your AJAX success callback since that is already wrapped in $(document).ready(function() {...});
Remove the $(function () {...}) wrapper in your success callback and see if your chart works then.
EDIT
Also, you need to pass a year, month, and (optional) date to the Date.UTC function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC
Working Fiddle