I am trying to plot something with Highcharts, which works pretty well. As soon as I try to include some errorbars for the y-values, nothing works anymore.
My code I use so far looks like this:
$(function () {
my_data = {{p_data}}
my_error = {{p_error}}
var myChart = Highcharts.chart('plot', {
chart: {
type: 'line'
},
title: {
text: 'Test plot '
},
xAxis: {
type: 'logarithmic',
title: {
text: 'x-axis'
}
},
yAxis: {
type: 'logarithmic',
title: {
text: 'y-axis'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
name: 'Test data',
data: my_data }
,{
name: 'Test Error',
type: 'errorbar',
data: my_error }
]
});
});
Whereas I get my data and error from a form, and they look like this:
p_data = [[1, 1.1], [2, 2.3], ... [122, 123]]
p_error = [[1, 0.9, 1.3], [2, 2.1, 2.5], ... [122, 122.8,123.2]]
As you can see I only want my errorbars to effect the y-Values, and here I give the down and upper limit.
Why does this not work?
Related
This is the script I am using. chart should take space according to his size. But he is taking 400px height. Please let me know if you have any solution for this issue.
renderChart() {
this.view = 'chart'
setTimeout(() => {
jQuery('.user-charts').each((index, element) => {
Highcharts.chart(jQuery(element).attr('id'), {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['100% BHV.nl B.V.']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5]
}, {
name: 'Jane',
data: [2]
}, {
name: 'Joe',
data: [3]
}]
});
})
}, 1000)
// chart
var char_div = document.querySelector('.chart');
},
I have a game with 3 difficulties and I show their averages in a first graph. Now I want to use drilldown to show a spread of the scores for each difficulty in a histogram. I managed to get this working but I have two problems. First of all I use update to change the setting for the drilldown graphs, but then these settings also change for the first graph and thus I was wondering what the better way would be to do this.
My other problem is that in my histogram the first and last column are cut in half and only half is shown, but I cant seem to find a way to solve this. I tried min- and maxPadding but this did not work.
chart of the tree difficulties
Histogram of one difficulty
https://jsfiddle.net/vlovlo/sng4jwv8/36/
Here is my code
Highcharts.chart('skippedPatients', {
chart: {
events: {
drilldown: function (e) {
this.update({
title: {text: "Skipped patient: " + e.point.name},
xAxis:{
title:{text: "Nr of skipped patients"},
tickmarkPlacement: 'on',
},
yAxis:{title:{text: "Nr of players"}},
plotOptions:{series:{pointPlacement: 'on'}},
});
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Histogram: Easy': {
name: 'Easy',
type: 'histogram',
baseSeries: 'avgSkippedEasy'
},
'Easy': {
id: 'avgSkippedEasy',
visible: false,
type: 'column',
data: skippedPatientsList
}
},
series = [drilldowns['Histogram: ' + e.point.name], drilldowns[e.point.name]];
chart.addSingleSeriesAsDrilldown(e.point, series[0]);
chart.addSingleSeriesAsDrilldown(e.point, series[1]);
chart.applyDrilldown();
}
}
}
},
title: {
text: 'Skipped patients'
},
xAxis: {
type: 'category',
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
},
},
histogram: {
binWidth: 1
}
},
series: [{
name: 'Averages per difficulty',
colorByPoint: true,
type: 'column',
data: [{
name: 'Easy',
y: 5,
drilldown: true
}, {
name: 'Moderate',
y: 2,
drilldown: true
}, {
name: 'Hard',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
You should define your initial options as a variable and attach them again in the drillup callback due to you did a chart update with changed the initial options.
Demo: https://jsfiddle.net/BlackLabel/5d1atnh7/
I want to manipulate the var series before I configure the highchart-code.
But I get 68 series!! instead of my 2 series I defined before.
What can be the error?
var series;
function refresher() {
series = "[{ name = 'test1', data = data[0]},{ name = 'test', data = data[1]}]";
$.getJSON(url,
function(data) {
chart = new Highcharts.StockChart
({
chart: { renderTo: 'container', zoomType: 'x', type: 'line', width: 900 },
legend: { enabled: true, verticalAlign:'bottom' },
title: { text: 'You see the data of the last measured hour!' },
credits: { enabled: false },
xAxis: { type: 'datetime', title: { text: 'time' } },
yAxis: { title: { text: 'hallo' } },
rangeSelector:{ enabled: false },
navigator : { enabled: false },
series: series,
tooltip: { xDateFormat: '%e. %b.%Y %H:%M:%S', valueDecimals: 2, },
exporting: { enabled: true },
});
// Format the y-data.
Highcharts.numberFormat(this.y, 2, '.', ',');
});
};
The problem is in the series variable.
1st of all, it's a string, and not an object.
I don't know why you are using it like that but if you really want it to be a string, you'll have to eval it when given it to the series object:
...
series: eval(series)
...
Also, it's not:
series = "[{ name = 'test1', data = data[0]},{ name = 'test', data = data[1]}]"
The equal signs are incorrect.
It has to be:
series = "[{ name: 'test1', data: data[0]},{ name: 'test', data: data[1]}]"
(I've replaced the equal signs by colons.)
With HighCharts 3.0, it is now possible to indicate to colors above and below one threshold. Like this example :
http://jsfiddle.net/highcharts/YWVHx/
Following code :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: data,
color: '#FF0000',
negativeColor: '#0088FF'
}]
});
});
});
Is it possible to have another threshold with a third color, like this for example :
Thanks in advance for your help.
It actually is possible if you don't mind plotting the data twice.
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
threshold : 0,
data: data,
color: 'orange',
negativeColor: 'blue'
},
{
name: 'Temperatures',
threshold : 10,
data: data,
color: 'red',
negativeColor: 'transparent'
}]
});
});
http://jsfiddle.net/YWVHx/97/
A feature to solve this without "hacks" was added in Highcharts 4.1.0 (February 2015), called zones (API). The given problem can be solved like this, using zones:
plotOptions: {
series: {
zones: [{
value: 0, // Values up to 0 (not including) ...
color: 'blue' // ... have the color blue
},{
value: 10, // Values up to 10 (not including) ...
color: 'orange' // ... have the color orange
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
}
See this JSFiddle demonstration of how it looks.
Unfortunately this option is not possible, but you can request your suggestion in http://highcharts.uservoice.com and vote for it.
By the way, I can try use a plotLine, like this:
yAxis: {
title: {
text: 'My Chart'
},
plotLines: [{
id: 'limit-min',
dashStyle: 'ShortDash',
width: 2,
value: 80,
zIndex: 0,
label : {
text : '80% limit'
}
}, {
id: 'limit-max',
color: '#008000',
dashStyle: 'ShortDash',
width: 2,
value: 90,
zIndex: 0,
label : {
text : '90% limit'
}
}]
},
I have a chart that looks like this:
http://jsfiddle.net/rtGFm/37/
I would like to have a "sort" button that sorts high to low each category, putting the columns in a different order for each category. Is this possible with HighCharts?
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'foreclosures',
'nuisances',
'distance from city center'
]
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Alger Heights',
data: [49.9, 71.5, 50]
}, {
name: 'Shawmut Hills',
data: [83.6, 78.8, 67]
}, {
name: 'Baxter',
data: [48.9, 38.8, 100]
}, {
name: 'Midtown',
data: [42.4, 33.2, 80]
}, {
type: 'scatter',
data: [55,60,70],
marker: {
symbol: 'square',
lineColor: '#FFFFFF',
lineWidth: 1,
radius: 8
},
name: 'Average'
}]
});
});
I had the same problem :) highcharts still does not provide any solution for this problem, but it is flexibel enough so that you can sort anyway - just by javascript.
Put your data in a separate value:
var dataMain = [{name:"test1",data:5}, {name:"test1",data:1},{name:"test1",data:2}]
In series you can just add a function which sorts your data:
series: (function(){
for(var i = 0;i<dataMain.length;i++){
dataMain[i].data = dataMain[i].data.sort(function(a,b){
return a[0] - b[0] ;
})
return dataMain;
}
Hope I got everything wright.
Got it to work, I believe. Trick is to add each column in correct order as a new serie with same type (column), reuse colors and hide legend...
Very hackish, the JS code to sort like 8 categories independently will be ugly but the result looks fine.
Edit: Updated fiddle, I see the spacing between the categories grows with series, doesn't look supernice.
My jsfiddle is here
$(function () {
$('#container').highcharts({
chart: {
inverted: true
},
title: {
text: 'Series sorted in within categories'
},
xAxis: {
categories: ['January']
},
series: [{
type: 'column',
name: 'Stockholm',
data: [{x:0, y:95, color: Highcharts.getOptions().colors[0]}]
}, {
type: 'column',
name: 'Göteborg',
data: [{x:0, y:80, color: Highcharts.getOptions().colors[1]}]
}, {
type: 'column',
name: 'Göteborg',
data: [{x: 1, name: 'February', y: 98, color: Highcharts.getOptions().colors[1] // VGR's color
}],
showInLegend: false,
dataLabels: {
enabled: false
}
}, {
type: 'column',
name: 'Stockholm',
data: [{x: 1, name: 'February', y: 80, color: Highcharts.getOptions().colors[0] // VGR's color
}],
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
br,
Jens
I think this can be done,
this may look like a little work around.
since we have a limited number of columns i mean 4 in the given example.
if we have arrays with sorting done with respect to each series then we can handle them.
on button click we can update the chart with new set of data as well as category array.
May be there is no solution from the APi.
According to me this is a possible approach.
Thanks,