I trying to use highchart's ajax functionality to draw this graph
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-negative/
Here is my javascript code
$(document).ready(function() {
$.getJSON('http://localhost/dashboard/graphdata', function(data) {
console.log(data);
var options = $('#container').highcharts({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: data
});
});
});
This is the response of http://localhost/dashboard/graphdata
"\"\\\"[{name: 'John', data: [5, 3, 4, 7, 2]},\\\\n {name: 'Jane', data: [2, -2, -3, 2, 1]},\\\\n {name: 'Joe', data: [3, 4, 4, -2, 5]}]\\\"\""
However instead of a graph I'm getting this
First you need to intialize your high charts then you need to get the value from ajax.
$(document).ready(function() {
var options = {
chart: {
renderTo: 'chart',
defaultSeriesType: 'column'
},
title: {
text: 'Voting Results'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'votes'
}
},
series: [{}]
};
$.getJSON('http://localhost/dashboard/graphdata', function(data) {
options.series[0].name = "Votes";
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
Just add this line below console.log() in your code. It will convert string to json format
//data = "\"\\\"[{name: 'John', data: [5, 3, 4, 7, 2]},\\\\n {name: 'Jane', data: [2, -2, -3, 2, 1]},\\\\n {name: 'Joe', data: [3, 4, 4, -2, 5]}]\\\"\"";
data = data.replace(/\\+n\s*/g,'');
data = data.replace(/.*?\[/,'[');
data = data.replace(/\}\][\\\"]+$/,'}]');
data = data.replace(/'/g,'"');
data = data.replace(/([a-z\_\-0-9]+)\:/g,'"$1":');
data = JSON.parse(data);
We have to make little clean up with the string. Also reference: http://api.jquery.com/jquery.parsejson/
Related
I'm creating a chart with Highchart library and I have a set of data like this: [x,y], with x: value and y: occurrence. I tried to use this to present normal distribution line but it uses yData to calculate instead of xData. Does anyone have any ideas to solve this?
var data = [[1,5], [2,4], [2.9, 3], [3.3,1], [4.5, 19], [4.7, 25], [4.9, 15],
[5.4, 10], [5.6, 11], [6.2, 2]];
Highcharts.chart('container', {
title: {
text: 'Bell curve'
},
xAxis: [{
title: {
text: 'Data'
},
alignTicks: false
}, {
title: {
text: 'Bell curve'
},
alignTicks: false,
opposite: true
}],
yAxis: [{
title: { text: 'Occurence' }
}, {
title: { text: 'Bell curve' },
opposite: true
}],
series: [{
name: 'Bell curve',
type: 'bellcurve',
xAxis: 1,
yAxis: 1,
baseSeries: 1,
zIndex: -1
}, {
name: 'Data',
type: 'scatter',
data: data,
accessibility: {
exposeAsGroupOnly: true
},
marker: {
radius: 3
}
}]
});
jsfiddle link: https://jsfiddle.net/Lvehqmaz/1/
You can add a mocked series and hide it, as you suggested. Example: https://jsfiddle.net/BlackLabel/1ykt65av/
Or modify the way of calculating data. Source code: https://code.highcharts.com/modules/histogram-bellcurve.src.js
(function(H) {
H.wrap(H.seriesTypes.bellcurve.prototype, 'setMean', function(proceed) {
this.mean = H.correctFloat(
H.seriesTypes.bellcurve.mean(this.baseSeries.xData)
);
});
H.wrap(H.seriesTypes.bellcurve.prototype, 'setStandardDeviation', function(proceed) {
this.standardDeviation = H.correctFloat(
H.seriesTypes.bellcurve.standardDeviation(this.baseSeries.xData, this.mean)
);
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/7cryn8vd/
API Reference: https://api.highcharts.com/highcharts/series.bellcurve.showInLegend
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I am working on updating HighCharts stack bar charts dynamically along with their drilldown charts but I am stick to one problem that async drilldown not getting updated.
In my scenario series data is completely dynamic and also
corresponding drilldown columns.
There one more small issue because of color:null of drilldown series, each time series color are different and because it's dynamic so I can't set static colors is there any way to make color same like default color scheme of simple column chart
Here is issue reproducible JSFiddle
I have used following methods (second method is commented in JSFiddle)
First method use chart.update API
Second method use
chart.options.merge API
// Create the chart
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
type: 'column',
name: 'Animals',
data: [2, 3],
color: null
},
'Fruits': {
type: 'column',
name: 'Fruits',
data: [7, 3],
color: null
}
};
const series = [];
series.push(drilldowns['Animals']);
series.push(drilldowns['Fruits']);
series.forEach(serie => {
chart.addSingleSeriesAsDrilldown(e.point, serie);
});
chart.applyDrilldown();
}
},
drillup: function() {
var newOptions = {
legend: {
enabled: true
}
};
this.update(newOptions);
}
}
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
column: {
stacking: 'normal'
},
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
}]
}]
});
$('#update').click(function() {
// First Method
chart.update({
drilldown: {
series: [{
name: 'Animals2',
data: [1, 5],
color: null,
type: 'column'
}, {
name: 'Fruits2',
data: [3, 5],
color: null,
type: 'column'
}]
}
});
// Second Method
/* chart.options.drilldown = Highcharts.merge(chart.options.drilldown, {
series: [{
name: 'Animals2',
data: [1, 5],
color: null,
type: 'column'
}, {
name: 'Fruits2',
data: [3, 5],
color: null,
type: 'column'
}]
}); */
});
You can dynamically set color to your drilldown series:
series.forEach(function(serie, i) {
serie.color = chart.options.colors[i];
chart.addSingleSeriesAsDrilldown(e.point, serie);
});
Live demo: https://jsfiddle.net/BlackLabel/mb7dhxc4/
I have found a workaround for above mention problem that async drilldown charts not getting updated I just updated the drilldown event from chart.events with the updated series of drilldown here is updated button code
$('#update').click(function() {
chart.hcEvents.drilldown[0] = function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
type: 'column',
name: 'Animals2',
data: [1, 6],
color: null
},
'Fruits': {
type: 'column',
name: 'Fruits2',
data: [7, 4],
color: null
}
};
const series = [];
series.push(drilldowns['Animals']);
series.push(drilldowns['Fruits']);
series.forEach(serie => {
chart.addSingleSeriesAsDrilldown(e.point, serie);
});
chart.applyDrilldown();
}
};
});
there is two things I'd like to do with this chart http://jsfiddle.net/4vyaaLjL/
$('#container').highcharts({
chart: {
type: 'area',
},
title: {
text: 'Fruit consumption *'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
},
yAxis: {
title: {
text: 'Y-Axis'
},
labels: {
formatter: function () {
return this.value;
}
}
},
series: [{
name: 'John',
data: [0, 1, 4, 4, 5, 2, 3, 7]
}, {
name: 'Jane',
data: [1, 0, 3, null, 3, 1, 2, 1]
}]
});
I'd like to style the 'null' data point with dashes.
Have some styled dots in place of the squares in the image.
Thanks
There is an option connectNulls, but you can not style with a different dash-style. So how about using series.zones? Unfortunately, you need to calculate in advance, where should be zones according to the null data-points. Another solution for this is to simple create separate series with just two points and line between them. You can connect two series using series.linkedTo option.
See this question.
And demo with 4.2.x version: http://jsfiddle.net/Yrygy/504/
I'd like to have the lines linking each data block, like the attached screenshot from Excel. Even better would be if the line could change color based on it's angle. I can't seem to find anything in the documentation to create this style chart. Any ideas?
JSFiddle - Same Bar Chart (without connectors)
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Row1', 'Row2']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Data1',
data: [9, 4]
}, {
name: 'Data2',
data: [12, 6]
}, {
name: 'Data3',
data: [15, 7]
}, {
name: 'Data4',
data: [16, 8]
}, {
name: 'Data5',
data: [19, 7]
}]
});
});
I using column stacked and grouped chart for comparing.
Check this example code : #fiddle http://jsfiddle.net/wvT85/
I am trying to compare two male stacks
I want the grouped chart have same colors for the item and no repeated legends.
i.e where ever john is used it should have same color and legand should have only one john not two.
Can any one help me on this code.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'John',
data: [2, 5, 6, 2, 1],
stack: 'male2'
}, {
name: 'Joe',
data: [3, 0, 4, 4, 3],
stack: 'male2'
}]
});
});
});
Use LinkedTo...
http://api.highcharts.com/highcharts#plotOptions.series.linkedTo
The demo of it is below:
linkedTo: ':previous',
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/arearange-line/
That way the legend is still functional, and you don't need to set the colors the same.
I ran into the same problem recently. So what I did is, combine two of the answers above to solve the problem.
http://jsfiddle.net/sanshila/2g79dhds/1/
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male',
color: '#6666FF',
events: {
legendItemClick: function (event) {
this.visible ? this.chart.get('johnId').hide() : this.chart.get('johnId').show();
}
}
}, {
name: 'John',
id: 'johnId',
color: '#6666FF',
showInLegend: false,
data: [2, 5, 6, 2, 1],
stack: 'male2'
}]
You can manually define the series colors and hide the 2nd set in the legend to do what you want, but this doesn't really link the data. It won't hide both johns if you click in the legend for instance. This type of associating 2 points in different series isn't supported as far as I know. I would say that I think you might want to rethink how you're representing your data, I still don't understand what you're trying to accomplish.
series: [{
name: 'John',
color:'blue',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'John',
color:'blue',
showInLegend:false,
data: [2, 5, 6, 2, 1],
stack: 'male2'
}]
});
http://jsfiddle.net/wvT85/2/
I think this is what you want: http://jsfiddle.net/b3AF9/21/
As Ben said, manually set the color for the stacks. Then give ids to the second stack and add
event: {
legendItemClick: function(event){
this.visible?
this.chart.get('Joe2').hide() :
this.chart.get('Joe2').show();
}
}
to series in the first stack.