Server is sending back data like this:
{"barData":
[
{"Accepted":[0,0,0]},
{"Rejected":[0,0,0]},
{"In_Process":[0,1,0]}]
}
In the browser, it shows up as such:
My perhaps (and very likely) incorrect belief was that this was the correct structure to populate a Highcharts stacked bar chart as seen here:
Example Stacked Bar in jsFiddle
The example in the documentation shows a fixed data set that appears like this:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
This is what I was attempting to emulate. So, at the end of all that, I get a zero plot. My Javascript looks like this:
$.ajax({
url : 'http://localhost:8080/afta/report/transfersbynetwork',
success : function(point) {
data = [];
$.each(point.barData, function(itemNo, item) {
data.push([ item[0], parseInt(item[1][0]), parseInt(item[1][1]), parseInt(item[1][2])]);
});
barchart = new Highcharts.Chart(baroptions);
baroptions.series[0].data = data;
},
cache : false
});
So where did I bone this up? I'm getting no plot and am quite convinced the problem is either in my presentation of the data from the server (possible) or in the javascript that's parsing the data structure and loading the series (highly likely).
Any insight would be appreciated.
Based on your structure, you need to change your function to process the data:
$(function () {
var point = {
"barData": [{
"Accepted": [1, 2, 3]
}, {
"Rejected": [3, 4, 5]
}, {
"In_Process": [0, 1, 0]
}]
},
data = [];
$.each(point.barData, function (itemNo, item) {
for (var prop in item) {
data.push({
name: prop,
data: [parseInt(item[prop][0]), parseInt(item[prop][1]), parseInt(item[prop][2])]
});
}
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: data
});
});
http://jsfiddle.net/9jVJb/
Related
I am using Highcharts Export Server and its an external server. I am sending a JSON request to it and want to get the image out there on the screen. I have the sample working if I just draw graph on the screen as shown in the fiddle below with the Graph as it looks like.
Normal Chart can be found here
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color: {
pattern: 'https://sampleproject-shivkumarganesh.c9users.io/img/Dots_Large.png',
width: 10,
height: 10
}
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1],
color: {
pattern:'https://sampleproject-shivkumarganesh.c9users.io/img/Grid.png',
width: 10,
height: 10
}
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
color: {
pattern:'https://sampleproject-shivkumarganesh.c9users.io/img/Bricks.png',
width: 15,
height: 15
}
}]
});
But when I try to host my server to print this using Highcharts Export Server, I get a graph which is nothing but Blank Lines as shown below:-
Edited Code Here with Export Server
$(function () {
$("#b").click(testPOST);
var exportUrl = 'http://export.highcharts.com/';
function testPOST() {
var optionsStr = '{"chart":{"type":"bar"},"title":{"text":"Stacked bar chart"},"xAxis":{"categories":["Apples","Oranges","Pears","Grapes","Bananas"]},"yAxis":{"min":0,"title":{"text":"Total fruit consumption"}},"legend":{"reversed":true},"plotOptions":{"series":{"stacking":"normal"}},"series":[{"name":"John","data":[5,3,4,7,2],"color":{"pattern":"https://sampleproject-shivkumarganesh.c9users.io/img/Dots_Large.png","width":10,"height":10}},{"name":"Jane","data":[2,2,3,2,1],"color":{"pattern":"https://sampleproject-shivkumarganesh.c9users.io/img/Grid.png","width":10,"height":10}},{"name":"Joe","data":[3,4,4,2,5],"color":{"pattern":"https://sampleproject-shivkumarganesh.c9users.io/img/Bricks.png","width":15,"height":15}}]}';
dataString = encodeURI('async=true&type=jpeg&width=400&options=' + optionsStr);
if (window.XDomainRequest) {
var xdr = new XDomainRequest();
xdr.open("post", exportUrl+ '?' + dataString);
xdr.onload = function () {
console.log(xdr.responseText);
$('#container').html('<img src="' + exporturl + xdr.responseText + '"/>');
};
xdr.send();
} else {
$.ajax({
type: 'POST',
data: dataString,
url: exportUrl,
success: function (data) {
console.log('get the file from relative url: ', data);
$('#container').html('<img src="' + exportUrl + data + '"/>');
},
error: function (err) {
debugger;
console.log('error', err.statusText)
}
});
}
}
});
Now, this seems to be weird because I am not able to understand why the export server is not able to render my images that I send a JSON Request.
I have no clue what I should do to make it work and print the use the PNG images to fill the graph. I am doing this in order to print and get the graphs with patterns for people who suffer from color blindness. We need to export it to PDF after getting a png.
NOTE:-
The Stack is as follows:-
Highcharts Export Server
pattern-fill plugin highcharts
Few PNG images
When i tried to pass the string value(data) to highchart series, it return blank chart. How to use the String value in series in highchart jquery plugin.
var data="{name: 'Jane',data: [1, 0, 4]},{name: 'John',data: [5, 7, 3]},{name: 'RAHUL', data: [1, 5, 4]}";
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series:[data]
});
Note: the data will be passed as dynamic.
Check this : http://jsfiddle.net/prathi89/FDjq7/26/
JSON.parse() is not working for you as your data is not a valid JSON string.
There is a trick, however, to force JavaScript to parse that kind of strings:
var data="{name: 'Jane',data: [1, 0, 4]},{name: 'John',data: [5, 7, 3]},{name: 'RAHUL', data: [1, 5, 4]}";
console.log(Function("return [" + data + "];")());
This is not clean and considered harmful, so if you can get your data in a valid JSON format - do it instead.
http://jsfiddle.net/neustroev_ai/FDjq7/27/
I have created a chart with drilldown using sample given on fiddle
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/async/
When I click on first level it is sucessfully adding chart for next level by using
chart.addSeriesAsDrilldown(e.point, series);
My problem is, now i want newly added chart also have drilldown. I dont know how to achieve this. Any help will thankful.
Regards
I found the solution to this. Actually when data is fetched from web service as json for the next level of drilldown I had to make sure the property drilldown needed to be set to true which I was not doing earlier after some research I found it. I have given some data in json format below with reference to the example on fiddle.
When first level was clicked I was going to web service and fetching data as
"{\"name\":\"Animals\",\"data\": [[\"Cows\", 2],[\"Sheep\", 3]],\"drilldown\": true}"
which was not enabling drilldown for the next level. In order to allow drill down further I had to modify the above data as below where in I have added property drilldown to be as true
(name == "Animals") resp = "{\"name\":\"Animals\",\"data\": [{\"name\":\"Cows\", \"y\": 2, \"drilldown\": \"true\"},{\"name\":\"Sheep\",\"y\": 3,\"drilldown\":\"true\"}]}";
That is all, seems simple :)
Will try to create sample on Fiddle if I get time and will update link if done so.
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
{
name: 'Toyota',
y: 4,
drilldown: true
},
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
})
});
I'm trying to embed a small chart (using Highcharts) on my webpage. I've provided an example of what I'm trying to do. When the page loads, the chart takes up the entire page by overwriting whats in the mainDiv (which I haven't included in here). I've tried modifying the dimensions of the division and the chart. I've also looked at the 'renderTo' parameter for 'chart', and tried rendering it as an object reference.
Does anyone know what might be causing this issue? Am I missing a critical parameter in my chart? Or have I written my code incorrectly? Thanks.
<!-- mainDiv is what's getting overwritten -->
<div id="mainDiv"></div>
<div id="container" style="width:10px; height:10px;"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
I fixed this by changing the id attribute of my element from "container" to just "contain" (and obviously changed any code that previously referenced "container" to just reference "contain").
For whatever reason this fixed my problem, although I'm still not quite sure why. Perhaps "container" is a keyword used by Highcharts.
Final code looked like this:
<!-- mainDiv is what's getting overwritten -->
<div id="mainDiv"></div>
<div id="contain" style="width:10px; height:10px;"></div>
<script>
$(function () {
$('#contain').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
Not sure if this will work but have you tried the renderTo: 'divname' option... Something like...
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
I was wondering if anyone knew of jsfiddle examples where stacked bar graphs with multiple values on a single point were changed after their creation. I've seen plenty of examples using setData for single points on a series, but none for multiple.
I currently have the following graphs and would like to put multiple values on each point.
window.jQuery(function () {
//var opportunities_by_month_chart;
opportunities_by_month_chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Pipeline By Month By Outcome'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['test', 'test2']
},
yAxis: {
min: 0,
title: {
text: 'Opportunity size in £'
}
},
tooltip: {
formatter: function () {
return 'Month: ' + this.x + '<br/>' +
this.series.name + ': £' + this.y + '<br/>' +
'Total: £' + this.point.stackTotal;
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
series: [{
name: 'Closed Won',
data: [],
color: 'green'
}, {
name: 'Closed Postponed',
data: [],
color: 'orange'
}, {
name: 'Closed Lost',
data: [],
color: 'red'
}, {
name: 'Other',
data: [],
color: 'blue'
}
]
});
});
http://jsfiddle.net/9FyGX/2/
If someone could point to an example or add an example to the jsfiddle it would make my day :D
As you said
chart.series[0].setData([1, 2, 3, 4], true);
chart.series[1].setData([2, 3, 4], true);
will work. However, the last parameter (true) tells highcharts to redraw the chart. Therefore it's more effecient to call the fist setData with false, and only redraw once you've finished adding the data.
chart.series[0].setData([1, 2, 3, 4], false);
chart.series[1].setData([2, 3, 4], true);