When using JSON with a pyramid chart in Highcharts, I don't get any errors in the console log but no data is displayed.
I have charts.php which outcome is this:
{"success":1,"data":[{"name":"John Spoon","data":300}, {"name":"Dave Jones","data":200},{"name":"Other","data":500}]}
This is what I've tried, which returns no data.
<div id="chart" style=
"height:600px;width:100%;"></div>
<script>
$(function () {
$("#chart").html("Loading Activity Log Graph...");
var options = {
chart: {
type: 'pyramid',
renderTo: 'chart',
marginRight: 100
},
title: {
text: 'Activity',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: true
}
}
},
legend: {
enabled: false
},
name: 'Activity Count',
series: [{}]
};
$.ajax({
url: "charts.php",
type:'post',
dataType: "json",
success: function(data){
options.series = data.data;
var chart = new Highcharts.Chart(options);
}
});
});
</script>
This is my desired outcome, showing without the use of JSON:
http://jsfiddle.net/0dyy44hz/
What do I need to change for it to show data?
Looking at the pyramid example, the data must be in the form of a single series with each data point as an array of [name, value]. You have two options, change your PHP to output the correct format or modify the PHP output in javascript. Since you didn't post your PHP code, I'll do the later:
var data = {"success":1,"data":[{"name":"John Spoon","data":300}, {"name":"Dave Jones","data":200},{"name":"Other","data":500}]};
options.series = [{
data: $.map(data.data, function(i){ // loop outputted data
return [[i.name, i.data]]; // coerce into an array of [name,value]
})
}];
Here's a working example.
Related
I'm trying to create a heat map using Highcharts but it's not loading properly (just lines instead of the heat map itself).
I'm loading the data from a JSON file:
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
xAxis: {
categories: $scope.loadDays()
},
yAxis: {
categories: $scope.loadHours(),
title: null,
reversed: true
},
series: [{
name: null,
borderWidth: 1,
data: [],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
$scope.getHeatMapData = function(data) {
var response = [];
$scope.data = data;
if(data && $scope.data.timestamps && $scope.data.info) {
$scope.data.timestamps.forEach(function(element, index) {
if ($scope.data.info[index]) {
response.push([
moment(element).day(),
moment(element).hour(),
$scope.data.info[index]
]);
}
});
}
return response;
};
The data is being logged correctly to the console but, for some reason, the heat map isn't loading.
I've also created a Plunker where you can see its behavior.
Any ideas?
I was making a mistake when reloading the chart. I just had to add the type to the event:
chartConfig.chart = { type: 'heatmap', events: { load: callback } };
Plunker
I am loading Highcharts like this.
var options = {
credits: {
enabled: false
},
chart: {
renderTo: 'chart_box',
type: 'areaspline'
},
title: {
text: ''
},
xAxis: {
crosshairs: true,
labels: {
step: 5,
rotation: -45
}
},
series: []
};
Then I have a function which is called when graph needs to be loaded. Upon calling the function, data is fetched through AJAX and assigned to series and date lie this:
$.ajax({
url: 'url/charts',
type: 'post',
data: data
}).done(function(data) {
var dateCount = data.dates.length;
var stepCount = 1;
if (dateCount > 10) {
stepCount = 5;
}
options.xAxis.categories = data.dates;
$.each(data.series, function(name, elem) {
options.series.push({
name: name.replace('_', ' ').toUpperCase().trim(),
data: elem
})
});
chart = new Highcharts.Chart(options);
});
The issue here is that even though I have given step as 5 , it is showing dates with 15 dates interval. I mean in xAxis labels. It seems like it will be multiplied by three always. If I give 2, it will show 6 days interval in labels. Everything working fine in a chart which is not using AJAX to load data.
I am attempting to take the example produced by Highcharts here http://www.highcharts.com/maps/demo/color-axis and substitute the data loaded by the $.getJson with a local JSON file called 'testdata1.json'.
The code I've modified below produces no errors yet the map does not render. I think it's because the testdata1.json is loaded late, after the javascript is executed. If so, is there a better way I should be doing this -- perhaps waiting for the data to load before executing the JS file? I attempted to do this by placing a
$(document).ready(
in front of the function but it didn't work. Any thoughts are greatly appreciated, I think it's something relatively minor that is just escaping me.
Thank you.
$(function () {
// Map options
var options = {
chart : {
renderTo: '#map',
borderWidth : 1
},
title : {
text : 'US population density (/km²)'
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series : [{
animation: {
duration: 1000
},
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled: true,
color: 'white',
format: '{point.code}'
},
name: 'Population density',
tooltip: {
pointFormat: '{point.code}: {point.value}/km²'
}
}]
};
$.getJSON('static/data/testdata1.json', function (data) {
// Make codes uppercase to match the map data
$.each(data, function () {
this.code = this.code.toUpperCase();
});
options.series.data= data;
var chart = new Highcharts.Chart(options)
});
});
You have three problems. Here's a fiddle based on their sample that uses your approach, but still uses their data, and works: http://jsfiddle.net/g29k24vw/1/
Here are the important parts:
chart : {
renderTo: 'container',
borderWidth : 1,
type: 'map'
},
And:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&callback=?', function (data) {
// Make codes uppercase to match the map data
$.each(data, function () {
this.code = this.code.toUpperCase();
});
options.series[0].data= data;
var chart = new Highcharts.Chart(options);
});
Note the differences here:
You need to specify the chart type in options if you're going to instantiate the chart object directly instead of using the jQuery helper.
renderTo doesn't want a hash in front of the element name.
options.series[0].data, not options.series.data...series is actually an array of objects.
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 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.