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'm trying to draw two lines in HighStocks using JavaScript with their example candlestick with intraday code. For some reason I can't get it to work
I am trying to just generate two extra lines at the end of my candlestick data, here is what i have (testing with just one line but it wont work). You can see the line im trying to put in is called test
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function (data) {
// create the chart
$('#container').highcharts('StockChart', {
title: {
text: 'AAPL stock price by minute'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
series: [{
name: 'AAPL',
type: 'candlestick',
data: data,
tooltip: {
valueDecimals: 2
}
}]
series: [{
name: 'test',
type: 'line',
data: [200.0, 201.0, 300.0, 400.0],
}]
});
});
});
First of all, you should not add two series arrays in your chart options object. You should use one series array and inside this array add new series object:
series: [{
name: 'AAPL',
type: 'candlestick',
data: data,
tooltip: {
valueDecimals: 2
}
}, {
name: 'test',
type: 'line',
data: [200.0, 201.0, 300.0, 400.0],
}]
The problem with this case is that you didn't give any x values to your line points, so it will start from 1970 year right now.
You need to add x values so line will start just where you want.
Here you can see an example: http://jsfiddle.net/uj0kzL4c/
I have a Grouped Column Series mapped, 3 columns in a group.
I would like to add scatter points over each of the three columns within each group.
Each scatter point would be centered over each column in the group.
Does anyone have any suggestions or experience with this type of functionality?
Best,
Stu
Something like this isn't directly supported, but possible to achieve, take a look: http://jsfiddle.net/3bQne/229/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['01/02/2012','01/03/2012','01/04/2012','01/05/2012','01/06/2012','01/07/2012']
},
series: [{
type:'column',
data: [3,4,5]
},{
type:'column',
data: [5,4,2]
},{
type:'column',
data: [3,1,5]
},{
type:'scatter',
data: [{
x: -0.2,
y: 1
},{
x: 0,
y: 3
},{
x: 0.2,
y: 2
}]
}]
});
Highcharts v3.01
I'm trying to use a scatter plot to draw points within named categories (these are actually numeric, but out of series and I don't want gaps).
Using line graph types would work, but I'd rather not as I have potentially hundreds of series and scatter points are clearer.
The closest I have come is this:
EDIT - I would post a descriptive image, but apparently I need reputation points. Sigh.
Please see here: http://i117.photobucket.com/albums/o63/Harry_Flashman/close_zpsfe6d3ea2.png
This is using points referencing an x and y,
data: [{x:108432,test:100,y:0}, {x:109802,test:100,y:51}, etc. ]
I want to do exactly as above, but without the gaps.
The only way I can see to have a non-linear gap-free axis is with categories, which I've used before on other line-type graphs, but never with a Scatter Plot.
If I use the x-axis type "category" with a category array instead, it only assigns one scatter value to each and the remainder to ascending numeric categories (i.e. it doesn't group them if I use the point "name" option).
xAxis: {
type: category,
categories: ['108432','109802','110240', etc. ]
}
with datapoints that look like this:
data: [{name:'108432',test:100,y:0}, {name:'109802',test:100,y:51}, etc. ]
Ends up like this. Each scatter point gets its own category.
http://i117.photobucket.com/albums/o63/Harry_Flashman/not_zps31aa4fef.png
Any help appreciated, this would be great if I could get it to work.
Thanks!
Pat
PS. Added entire chart script (minus large amounts of data) below. This is the "almost works" version.
$('#container').highcharts({
chart: { type: 'scatter', zoomType: 'xy' },
title: { text: 'Revision vs Runtime Scatter' },
subtitle: { text: 'L3 Performance Test' },
xAxis: {
title: { enabled: true, text: 'Revision' },
startOnTick: true,
endOnTick: true,
showLastLabel: true,
showEmpty: false,
legend: { y: 120, floating: true, backgroundColor: '#FFFFFF' },
labels: { rotation: -90, align: 'right' },
categories: ['101831','101849','101850','101857','101861','101866','101868','101878','101879','101880','101881','101882','101883','101884','101885','101888','101894','101900','101903','101905','101908','101913','101914']
},
yAxis: { title: { text: 'Variance (%)' } },
legend: { layout: 'vertical' },
plotOptions: {
scatter: {
marker: { radius: 5, states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } } },
states: { hover: { marker: { enabled: false } } },
tooltip: {
headerFormat: '<b></b>',
pointFormat: '<b>Test {point.test}</b><br/>r{point.x}<br/>{point.y}% change<br/>{series.name}'
}
}
},
series: [{
name: 'PRd',
data: [{x:101857,test:267,y:0}, {x:101861,test:267,y:-1}, {x:101866,test:267,y:-0}, {x:101868,test:267,y:-1}, {x:101878,test:267,y:-1}, {x:101879,test:267,y:-1}, {x:101880,test:267,y:-0}, {x:101881,test:267,y:-0}, {x:101882,test:267,y:-0}, {x:101883,test:267,y:-0}, {x:101884,test:267,y:-0}, {x:101885,test:267,y:-0}, {x:101888,test:267,y:-0}, {x:101894,test:267,y:-1}, {x:101900,test:267,y:-0}, {x:101903,test:267,y:-0}, {x:101905,test:267,y:-1}, {x:101908,test:267,y:-1}, {x:101913,test:267,y:0}, {x:101914,test:267,y:1}, {x:101831,test:430,y:0}, {x:101849,test:430,y:1}, {x:101850,test:430,y:1}]
}, {
name: 'Non-PRd',
data: [{x:101831,test:100,y:0}, {x:101849,test:100,y:51}, {x:101850,test:100,y:51}, {x:101857,test:100,y:52}, {x:101861,test:100,y:49}, {x:101866,test:100,y:50}, {x:101868,test:100,y:50}, {x:101878,test:100,y:50}, {x:101879,test:100,y:50}, {x:101880,test:100,y:50}, {x:101881,test:100,y:50}, {x:101882,test:100,y:50}, {x:101883,test:100,y:50}, {x:101884,test:100,y:50}, {x:101885,test:100,y:50}, {x:101888,test:100,y:50}, {x:101894,test:100,y:50}, {x:101900,test:100,y:50}, {x:101903,test:100,y:0}, {x:101905,test:100,y:50}, {x:101908,test:100,y:51}, {x:101913,test:100,y:50}, {x:101914,test:100,y:50}, {x:101831,test:10937,y:0}, {x:101849,test:10937,y:2}]
}]
});
});
Ok, fixed it via a workaround,
Essentially in Javascript I've added a position to the point arrays relating to which of the categories the point belongs to (generated via PHP, the categories are sorted ascending). Relevant bits are as follows:
xAxis: {
categories: ['r101831', 'r101849', 'r101850']
}
plotOptions: {
tooltip: {
headerFormat: '<b></b>',
pointFormat: '
<b>Test {point.test}</b><br/>
r{point.revision}<br/>
{point.y}% change<br/>
{series.name}'
}
}
series: [{
name: 'PRd',
data: [
{x:3,revision:101831,test:267,y:0},
{x:4,revision:101849,test:267,y:-1},
{x:5,revision:101850,test:267,y:-0}
]}
]
End result looks gorgeous, I love HighCharts.
Pic here: http://i117.photobucket.com/albums/o63/Harry_Flashman/fixed_zps9952d58d.png
I'm trying to tweak a Highcharts scatter plot with this date series
series: [{
data: [[1,2],[2,5]]
}]
so that i can put a name on each point, I want to show the name in the tooltip.
The API doc says an object of named values can be defined like this
series: [{
data: [{
name: 'Point 1',
x: 1,
y: 2
}, {
name: 'Point 2',
x: 2,
y: 5
}]
}]
but it seems the x and y values are not picked up. See my jsfiddle example.
This answer works for Highcharts 4.1.9.
Took me a long time to figure out hence I want to pass it on in case someone is looking for this as well.
Your mileage may vary for other versions.
plotOptions: {
scatter: {
dataLabels: {
format: "{point.name}",
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Projects',
data: [{"name":"Point 1", "x":1,"y":2}, {"name":"Point 2", "x":4,"y":5}]
}]
What are the key points?
Ensure that the scatter.dataLabels is enabled and the format is {point.name}
Ensure that the data is in the format of {"name":"Point 1", "x":1,"y":2}
As mentioned in this comment, what works for me in Highcharts 5.0.6 is:
{
type: 'scatter',
tooltip: { headerFormat: '<strong>{point.key}</strong><br>' },
data: [{ x: 0, y: 1, name: 'Whatever' }, ...]
}
As stated in the documentation, the name field is the name of the point as shown in the legend, tooltip, dataLabel, and so on. I updated your fiddle to include the highcharts library, and I am seeing this behaviour (i.e. if I hover over a point, its label is displayed).
If you want the x-axis labels set correctly, you need to ensure that the xAxis section of your chart configuration does not have a categories key.
You could also show names in the legend section. Updated the selected answer above here
series: [{
name: 'Point 1',
data: [[3, 3]]
}, {
name: 'Point 2',
data: [[4, 8]]
}, {
name: 'Point 3',
data: [[9, 15]]
}]
This is a new feature in HighCharts 3.0. You have to define the xAxis type to 'Category' and give the name of the point in the data if you want it to appear on the xAxis:
xAxis: {
//categories: ['Green', 'Pink'],
type: 'category'
},
...
data: [{
name: 'Green',
x: 1,
y: 2
}, {
name: 'Pink',
x: 2,
y: 5
}]
See your jsFiddle code updated :here.
Note that I have added the tooltip formating feature to show that point.x has no more meaning in this context, only point.name remains relevant. Also, you cannot have two points with different 'name' at the same x position.
I struggled with this issue and after finding the solution in the documentation I must say the behavior as designed feels a bit unexpected.
Per the docs (here: https://api.highcharts.com/highcharts/plotOptions.scatter.tooltip), the tooltip does not show all fields you can add to a data point, but rather
Defaults to x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>.
To show the data point name (and any other fields you want to), simply change the HTML rendered by the tooltip. For example, you can display the point name and coordinates in the tooltip while removing the series name as follows:
chart: {
type: "scatter",
}
tooltip: {
headerFormat: '',
pointFormat: 'Name: <b>{point.name}</b><br/>Load time: <b>{point.y}</b><br/>Requests: <b>{point.x}</b>',
},