I am trying to get data to load on my chart from an API. All the data is getting to the chart correctly, but the chart doesn't load and I get the unresponsive script error. I'm using Highcharts. Any suggestions? Thanks. My code is below.
Model
public function ajax_get_chart() {
$quotes = $this->rest->get('api/1/BTCUSD/trades/fetch');
$series_data = array();
$results = $quotes->return;
$i = 0;
foreach ($results as $quote)
{
$series_tmp = array(
'date' => $quote->date,
'price' => $quote->price
);
$series_data[]= $series_tmp;
$i= $i+1;
}
die (json_encode($series_data));
return TRUE;
}
Javascript
$(document).ready(function() {
var chart;
$.ajax({
url: "/chart/ajax_get_chart", // the URL of the controller action method
dataType: "json",
success: function(result)
{
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
title: {
text: 'Price'
}
},
yAxis: {
min: 0,
title: {
text: 'Date'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
plotOptions: {},
series: result
});
}
});
});
Sounds like the problem is that there's too much data to present.
You can try using a speedier browser (Chrome usually works pretty fast), limiting the data, or trying another charting library.
Limiting the data is probably the most likely one to work. If you need to show all the data, the best way to go about it would be to only load partial data and then if the user for example scrolls the chart, load the missing data.
Another way to present more data at the same time would be to calculate averages for the data on server. For example, if the ticker data is from every second, you could pre-calculate hourly or even daily averages on the server. This generally allows you to show a relatively accurate chart without causing performance problems, and many libraries also support dynamically loading more accurate data if you zoom the chart.
Highcharts can not handle so huge number of data, but using Highstock with dataGrouping or lazy-loading you should be able to handle a lot of points, see demo.
Also this article should help.
Related
I am trying to get JSON from Poloniex's public API method (specifically the returnChartData method) to display chart history of cryptocurrencies against one another into a Highchart Stockchart graph (looking like the demo one here.).
This is part of my JavaScript code to use the Poloniex returnChartData callback, get the JSON from it and implement it into the 'data' segment of the chart. So far it is not working and I can't for the life of me figure out what I need to change.
var poloniexUrl = "https://poloniex.com/public?command=returnChartData¤cyPair=BTC_XMR&start=1405699200&end=9999999999&period=14400";
$.getJSON(poloniexUrl, function(data){
results = data;
});
// Creates Chart
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'cryptoChart',
backgroundColor: 'white'
},
title: {
text: currentTitle
},
series: [{
data: results,
turboThreshold: 1000
}],
xAxis: {
original: false
},
rangeSelector: {
selected: 1
},
plotOptions: {
line: {
gapSize: 2
}
}
});
Would love any help!
Refer to this live demo: http://jsfiddle.net/kkulig/0f4odg5q/
If you use turboThreshold the points' options need to be given as an integer or an array (Explanation: https://api.highcharts.com/highstock/plotOptions.series.turboThreshold). In your case the format is JSON, so I disabled turboThreshold to prevent Higcharts error 12 (https://www.highcharts.com/errors/12):
turboThreshold: 0
$.getJSON is asynchronous - the best way to make sure that data variable is initialized is using it inside callback function (second argument of getJSON):
$.getJSON(poloniexUrl, function(data) {
// Creates Chart
var chart = new Highcharts.StockChart({
chart: {
(...)
The data that you fetch looks like candlestick series - I changed the type of the series:
type: 'candlestick'
Date will be properly understood by Highcharts if it's kept in the x property of JSON object (not date):
data: data.map((p) => {
p.x = p.date;
return p
}),
I am using data from a csv file to generate a line graph using Highchart. Here is my code:
/* Define Initial and basic Options */
var options = {
chart: {
type: 'line',
renderTo: 'graph_container'
},
title: {
text: 'FanniemaeAcquisition Cash Flow'
},
yAxis: {
title: {
text: 'Amount($)'
}
},
series: []
};
/* Parse CSV File */
$.get('{% static "data/FanniemaeAcquisitions.csv" %}', function(csv) {
var lines = csv.split('\n');
var series = {
name: '',
data: []
};
$.each(lines, function (lineNo, line) {
var items = line.split(',');
$.each(items, function (itemNo, item) {
if(itemNo == 1){
if (lineNo == 0){
series.name = item;
} else {
series.data.push(parseFloat(item));
}
}
});
});
options.series.push(series);
console.log(options.series);
});
// Create the chart
var chart = new Highcharts.Chart(options);
However this isn't working. I tried testing it by manually inputting data like so:
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
},
and that works fine. So I took a look at the variables being passed to series. The one that works(manual input):
The one that doesn't work(From CSV):
Any ideas?
EDIT: Okay. something weird is going on here. Highchart isn't showing on the webpage but it showing when I download as PNG. The weirder part is that it shows on the webpage if I MANUALLY add in number values but when I extract the values form CSV the graph disappears... But when I download as PNG it shows the graph...Any ideas??
SECOND EDIT: Okay, so when I do: console.log(JSON.stringify(options.series[0].data));
nothing shows up. This would mean that the values parsed from the csv file appear after the graph is generated. So how do I fix this? lol
The problem was due to Javascript's Asynchronous Issues. I simply wrapped my function in a $.when and it worked!
I draw a plot like this:
var items = $.get("./moonlight_sonata_diameter.data", function(data) {
items = data.split(/\r?\n/).map( pair => pair.split(/\s+/).map(Number) );
$(function () {
plot = $.plot($("#placeholder"),
[ { data: linePoints} ], {
series: {
lines: { show: true }
},
crosshair: { mode: "x" },
grid: { hoverable: true, autoHighlight: false },
yaxis: { min: 0, max: 5 }
});
});
});
Now at a later moment in time, I want to update the crosshair of the plot. However, because it is embedded in so many functions, I don't know how to access it as I am not familiar with jQuery.
Within the script, I can run:
plot.setCrosshair({x: 100})
However, in another script, at another time, there is no object called plot. Is there a way to access it still?
Actually you have put your plot creation code in document ready function and your
plot.setCrosshair({x:100}) is executed just before your plot creation code. so A simple settimeout will do the trick.
just replace
plot.setCrosshair({x: 4})
with
setTimeout(function(){ plot.setCrosshair({x: 41})}, 3000);
and this will work fine. if you call your setCrosshair function after loading the complete dom then you will not need of setTimeout function. I hope this will help and if not then let me know.
Check it at http://plnkr.co/edit/3cMHmzWEIk6c39mblb0Z?p=preview
I have a highstock graph in a file called charts.php that reloads the graph data from a secondary file called data.php. Seeing as I have 5 series in my highstock graph I have to call the data.php file 5 times, each time using a different variable, but when I set the variable in my charts.php file it only uses the last set value of this variable. Is is possible to solve this, or is this just the way PHP works? Do I have to create 5 separate data.php files in order for this to work?
Here's basically what my code looks like (showing 2 series to keep it short):
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'chart'
},
title : { text : 'MyChart' },
series : [
{
name : 'Unit 0',
data : [],
tooltip: { valueDecimals: 1, valueSuffix: ' kW' },
},
{
name : 'Unit 1',
data : [],
tooltip: { valueDecimals: 1, valueSuffix: ' kW' },
}
]
});
<?php $_SESSION["unit"] = 0; ?>
$.getJSON( "data.php", function (data) {
chart.series[0].setData( data );
});
<?php $_SESSION["unit"] = 1; ?>
$.getJSON( "data.php", function (data) {
chart.series[1].setData( data );
});
So the problem is that both series[0] and series[1] use the last value of my variable, which in this case is $_SESSION["unit"] = 1. Is the a way to make this work? Any better alternatives?
Maybe if I could create data for all of the series in one file and somehow split that data and pass it to series[0] and series[1] separately, but I have no idea how to do that..
Any help is appreciated.
Maybe you could modify your data.php file, so instead of using $_SESSION["unit"] to determine which var to use, use $_GET["unit"] instead. Then, in your code above, it would be:
$.getJSON( "data.php?unit=0", function (data) {
chart.series[0].setData( data );
});
$.getJSON( "data.php?unit=1", function (data) {
chart.series[1].setData( data );
});
It depends on your needs, if the $unit values are always the same I would just call data.php once and update all the graphs at once using the JS response.
If $unit has a dynamic variable I would send it along with the $.getJSON function.
var data = {
unit: $_GET['unit']
};
$.getJSON( "data.php", data, function (response) {
updateGraph(graph, response);
});
For more on getJSON on the structure of the function, visit http://api.jquery.com/jquery.getjson/
I have been going in circles for a few hours with this and have exhausted all the similar stackoverflow threads and also highcharts docs, so hopefully someone can help.
I am trying to plot a pie chart with a gender split. I have worked with line charts before and so had my data in the format for x and y axis, like this:
[{"y":"Mr","x":"145"},{"y":"Miss","x":"43"},{"y":"Mrs","x":"18"},{"y":"Ms","x":"2"}]
This was getting me somewhere, i could tap into the json and pull out the ints but i couldnt for the life of me get the titles associated with the figures...
function genderData() {
$.getJSON('/statsboard/gender', function(data_g) {
$.each(data_g, function(key_g, val_g) {
obj_g = val_g;
genderChart.series[0].addPoint(parseInt(obj_g.x));
//genderChart.xAxis[0].categories.push(obj_g.y);
});
});
}
I then just called the function genderData as follows:
genderChart = new Highcharts.Chart({
chart: {
renderTo: 'gender',
events: {
load: genderData
}
}
title: {
text: 'Gender Split'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
},
},
series: [{
type: 'pie',
name: 'Gender Split',
data: []
}]
});
So i ended up with an accurate chart but with out the labels, and they would just default to 'slice'...
So close but no cigar ;-)
Soooo i altered my serverside code to return the following format as per the docs :-), now returning the following:
[{"Mr":"145"},{"Miss":"43"},{"Mrs":"18"},{"Ms":"2"}]
This looks pretty much spot on to me, but alas, when i try to accomodate for this on the js code, everything falls apart.
I have been looking at this:
Write JSON parser to format data for pie chart (HighCharts)
but cant get the practice applied here to fit my circumstances.. Can anyone help?
The forms:
[{"name": "Mr", "y": 145}, ...]
or
[["Mr", 145], ...]
will work. Notice the second form is an array of arrays not an array of objects (you were close).
See basic-pie demo (click view options and scroll down to data), series.data docs, and series.addPoint docs for more info.
If you make the server side return the data in one of the two above forms you can just do:
function genderData() {
$.getJSON('/statsboard/gender', function(data_g) {
genderChart.series[0].setData(data_g, true);
});
}
You can set your points as follows:
genderChart.series[0].addPoint({
name: key_g,
y: val_g
});
By rearranging my Json to have "name" and "y" as the keys i was able to make progress i.e:
[{"name":"Mr","y":"145"},{"name":"Miss","y":"43"},{"name":"Mrs","y":"18"},{"name":"Ms","y":"2"}]
Then by looping through the json data and parsing the "y" value as a int with the function parseInt() in the JS i was able to get my desired result...
function genderData() {
$.getJSON('/statsboard/gender', function(data_g) {
$.each(data_g, function(key_g, val_g) {
obj_g = val_g;
genderChart.series[0].addPoint({
name: obj_g.name,
y: parseInt(obj_g.y)
});
console.log(obj_g.y)
});
});
}
I know this question has been solved. but the map function for array might be a good choice in these cases, I love map in functional language!
data = [{"y":"Mr","x":"145"},{"y":"Miss","x":"43"},
{"y":"Mrs","x":"18"},{"y":"Ms","x":"2"}];
var series = data.map(function(e){ return parseInt(e.x); });
.... hight chart ....