Develop Reference

How to fetch json array data into highcharts in angularjs

I want to display a bar graph using highcharts.I am devoloping an app in play framework(play-java),in which I return a response from the java api which contains data in json format.It contains a field 'name' which contains data like 'Data','Gadgets','Others' etc.I want the x axis of the chart to take these values from json array which gets returned in response.
Here is the code for the response in .js
for(var i=0;i<response.data.result.length;i++)
{
$scope.total=$scope.total+parseInt(response.data.result[i].item_price);
}
var j=0;
console.log(response.data.result);
while(j<response.data.result.length)
{
$scope.jsonArray=[{
name:response.data.result[j].category_name,
y: (parseInt(response.data.result[j].item_price)/$scope.total)*100,
}]
$scope.renderChart();
}
The code for bar graph
$scope.renderChart = function()
{
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Your Expenses'
},
subtitle: {
text: 'Your total spent money is '+$scope.total+'.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Money spent in percentage'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Categories',
colorByPoint: true,
data:$scope.jsonArray
}]
});
}
I know that I can't use the while loop in the response code mentioned.That's where i am looking help for.The y axis should calculate the percentage value .I want to generate 'names' for x axis and percentage for y axis of the chart.Thanks in advance..

All we have to do is to just initialize the jsonArray as empty before doing the looping.Add a for loop so that it iterates through the array and assigns the values appropriately.
The changed code
$scope.jsonArray = [];
for(var i=0;i<response.data.result.length;i++)
{
$scope.jsonArray[i]={
name:response.data.result[i].category_name,
y: (parseInt(response.data.result[i].item_price)/$scope.total)*100,
}
$scope.renderChart();
console.log(response.data.result[i]);
}
console.log($scope.jsonArray);
})
Anyway thanks....

javascript highcharts builder function

I am trying to make a function which will be building Highcharts charts dynamically based on parameters passed. I do it the following way:
function makeChart(name, title, series)
{
var options = {
chart: {
type: 'areaspline',
renderTo: name
},
credits: { enabled: false },
legend: { enabled: true },
title: {
text: title
},
xAxis: {
type: 'datetime'
},
yAxis: {
gridLineDashStyle: 'dot',
title: {
text: 'Quantity'
}
},
plotOptions: {
areaspline: {
animation: false,
stacking: '',
lineWidth: 1,
marker: { enabled: false }
}
},
series: [] //chart does not display except title. It will draw if I paste the data here manually
};
this.chart = new Highcharts.Chart(options);
for (index = 0; index < series.length; ++index) {
options.series[index] = {'name':series[index][0], 'data':series[index][1], 'color':series[index][2], 'fillOpacity': .3};
}
}
makeChart('container2', 'second chart', [['thisisname1', [20,21,22,23,24,25,26,27,28], '#d8d8d8']]);//calling function with test parameters
But everything I can see is the charts title. I guess the problem is in adding data to series array. I tried to add it with several ways but it did not work, although I see that the data has been added if I console.log(options.series). Any ideas how to fix that? Thank you.

Place this.chart = new Highcharts.Chart(options); after the for loop.
You're adding the data after the chart has been initialized, for it to work this way you need to tell HighCharts to redraw itself, easier option is to init after the loop. :)

Highcharts data csv load

i'm having trouble displaying chart from my csv file.it doesn't plot chart. maybe my parser it is the problem. firebug says no major errors but i'm stuck i dont know how to make it work. please help..
this is how my csv looks like:
1437931522,30
1437931555,30.25
1437931768,30.25
1437931785,29.75
1437931802,30.25
1437932702,30.5
1437933601,29.75
1437933974,30
end of file is \n, but seems to not showing right here so I inserted extra enter
this is the code:
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: true
}
});
var mydata = [];
var times = [];
$.get('data.csv', function(data) {
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
if(lineNo=>0)
{
times.push(new Date(items[0]*1000).toUTCString());
mydata.push(items[1])
}
});
});
$('#container').highcharts({
title: {
text: 'Temperature',
x: -20 //center
},
subtitle: {
text: 'test1',
x: -20
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b %e, %Y',
year: '%Y'
},
categories: times
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Temp',
data: mydata
}]
});
});``
is it ok, to get csv just with 'data.csv' if it is in the same directory or I have to set entire url?
this ismy fiddle:
http://jsfiddle.net/skoky2/yw25z6ow/1/

You should use the following code in your main module
data: {
csv: csv
},
Ref: data-module

1) If you use datetime type of xAxis, you should no use categories. You can define tickPositions
2) Point value should be number not string, so replace:
mydata.push(items[1])
with
mydata.push(parseFloat(items[1]))

i managed to get it work. but I noticed that this chart works only in IE 8, not in firefox or chrome. firefox with ie tab aslo works

Highcharts not displaying data on live site

I'm writing a stacked bar chart that is working fine on my local machine, however when it is running on a live server it doesn't plot any of the data points. I've considered that it could be the api is taking longer on the live site to get the data, or maybe highcharts is not loading fast enough, but the x-axis populates the values correctly and the library is loading locally (also happens with CDN).
I can even log the values of the chart series and see everything fine. It just doesn't display any data with a line designating 0 on the Y axis. Anyone have any idea what the issue could be?
$.getJSON( 'URL TO API', function(data){
// Sample data output
// data = [
// { 'name' : 'Items', data : [ 'item1', 'item2', 'item3'] }
// { 'name' : 'losses', data : [2, 3, 1] }
// { 'name' : 'Wins', data : [5, 2, 0] }
// ]
var chart = new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'chart',
},
title: {
text: 'Wins and Losses'
},
xAxis: {
categories: data[0]['data']
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: 'Total'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal',
}
},
series: [
{
name : data[1]['name'],
data : data[1]['data']
},
{
name : data[2]['name'],
data : data[2]['data']
},
]
});
});

Json in perfect form but Highcharts chart won't populate

New to highcharts and as the title said I am trying to pull json from a webservice and place it into the chart (bar chart) but I am getting some weird behavior. after I pull the data down through $http.get() I try and set the series to that string of json like series: '$scope.jsondata'. It will fill some legends (more than expected) so it is getting the data. but the bars on the chart wont show.
On the other hand when I go to the url where I am getting the json and just copy and paste all of the json into the series field, it works perfectly.
I have a plunker here I have been working on that shows what I am talking about. You can just paste:
[
{
"name":"Kaia",
"data":[19]
},
{
"name":"Deborah",
"data":[86]
},
{
"name":"Phoebe",
"data":[77]
},
{
"name":"Rory",
"data":[17]
},
{
"name":"Savannah",
"data":[15]
}
]
...into the series field and everything works.
EDIT I havent yet, but I am planning to use $interval to update the data every x seconds. Something like :
$http.get(fullUrl).success(function(data2) {
$scope.records = [];
data2.forEach(function(r) {
$scope.records.push(r);
});
});
mainInterval = $interval(function() {
$http.get(fullUrl).success(function(data2) {
$scope.records = [];
data2.forEach(function(r) {
$scope.records.push(r);
});
});
}, 5000);
So like one of the answers suggested I put the chart creation in the callback of the $http.get() but I think that'd hinder the $interval

You can move the creation of the Chart into the callback of the get call to simplify things. http://plnkr.co/edit/utQG34xOQmtbOukTK71e?p=preview
Note I also updated series: '$scope.jsondata' to series: $scope.jsondata.
$http.get('https://api.myjson.com/bins/38qm9').success(function(ret) {
$scope.jsondata = ret;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Active Users'
},
xAxis: {
categories: ['user']
},
yAxis: {
min: 0,
title: {
text: 'Total Score',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'top',
x: -40,
y: 100,
floating: false,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: false
},
credits: {
enabled: false
},
series: $scope.jsondata
});
console.debug($scope.jsondata);
});