I need to create a histogram with the data below, this is a sample of the data, the real object is much larger. I need the y-axis to be ‘Reads’ while the x-axis is a little more complex. The x-axis should be a range from 0-1, the bar on x-axis should be located corresponding to the ‘RankMetric’ variable. Is it possible to build a histogram like this with highcharts ? I’ve found this fiddle here but I don’t know how set up the x-axis and plot the bars in the correct positions. Any help is greatly appreciated, Thanks.
I can set the x-axis range with something like this, but how do I plot on the x-axis where according to the 'RankMetric' variable?
xAxis:{
min:0,
max:1,
tickInterval: 0.1,
crosshair: true
}
Data:
var obj = {
"Reads":1721745,
"Present":1,
"RankMetric":0.397851,
"organism_labels":"klebsiella_oxytoca"
},{
"Reads":66529,
"Present":1,
"RankMetric":0.609935,
"organism_labels":"staphylococcus_aureus"
},{
"Reads":45563,
"Present":1,
"RankMetric":0.505084,
"organism_labels":"legionella_longbeachae"
},{
"Reads":83471,
"Present":1,
"RankMetric":0.669884,
"organism_labels":"enterobacter_aerogenes"
}, {
"Reads":1309077,
"Present":1,
"RankMetric":0.688673,
"organism_labels":"pseudomonas_aeruginosa"
}
Data points needs to have x and y properties. Data should be sorted by x in ascending order. You could resolve this creating a parsing function that will allow you to meet the requirements. Example: http://jsfiddle.net/4xjq56bh/
$(function() {
var data = [{
"Reads": 1721745,
"Present": 1,
"RankMetric": 0.397851,
"organism_labels": "klebsiella_oxytoca"
}, {
"Reads": 66529,
"Present": 1,
"RankMetric": 0.609935,
"organism_labels": "staphylococcus_aureus"
}, {
"Reads": 45563,
"Present": 1,
"RankMetric": 0.505084,
"organism_labels": "legionella_longbeachae"
}, {
"Reads": 83471,
"Present": 1,
"RankMetric": 0.669884,
"organism_labels": "enterobacter_aerogenes"
}, {
"Reads": 1309077,
"Present": 1,
"RankMetric": 0.688673,
"organism_labels": "pseudomonas_aeruginosa"
}];
//data points needs to have x and y properties
Highcharts.each(data, function(point, i) {
point.y = point.Reads;
point.x = point.RankMetric;
});
//data should be sorted by x in ascending order
data = data.sort(function(a,b){
return a.x - b.x;
});
$('#container').highcharts({
series: [{
data: data,
type: 'column',
pointPadding: 0,
groupPadding: 0
}],
xAxis: {
min: 0,
max: 1,
tickInterval: 0.1,
crosshair: true
}
});
});
Related
Right off the bat here is the desired chart in ChartJS.
We have two x-axes. One showing power from a meter and the other showing meter state over time (open, closed, or in standby) In both datasets the X axis is Unix time. The power Y axis is numerical and the state x axis is one of the three state categories. Both are drawn in lines.
To get right to the point: how do I do this in Highcharts? I have the second axis set up:
xAxis: {
type: 'datetime'
},
yAxis: [
{
title: {
text: 'Real Power'
}
},
{
type: 'category', //I have also removed this line
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open']
}
],
Any attempt to set the Y axis value to a string in highcharts results in a well known: https://www.highcharts.com/errors/14/
Furthermore online I only seem to find categories on the X axis. Any help getting to the right place is appreciated. Thanks in advance.
You can't use a string as x value, use a number instead, for example:
series: [{
...
}, {
...,
yAxis: 1,
data: [1, 0, 2, 1]
}],
yAxis: [{
...
}, {
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open'],
min: 0,
max: 2
}]
Live demo: http://jsfiddle.net/BlackLabel/o7Lvyadm/
API Reference: https://api.highcharts.com/highcharts/yAxis
Here is my code - https://jsfiddle.net/rxqpt8u4/1/
var colors = Highcharts.getOptions().colors;
Highcharts.chart('container', {
chart: {
type: 'streamgraph',
marginBottom: 30,
zoomType: 'x'
},
yAxis: {
min:0
},
// Data parsed with olympic-medals.node.js
series: [
{
"name": "Austria",
"data": [
2, 3, 4, 5, 5, 6, 6, 6, 7
]
}]
});
Can't understand why values dont scales 1:1.
Instead of that, they scale 0.5:1.
Please advise.
The axes adapt to the data and they are independent of each other. To have the same scale on the axes set the same tickInterval, max and min properties:
events: {
load: function() {
var xAxis = this.xAxis[0];
this.yAxis[0].update({
tickInterval: xAxis.tickInterval,
max: xAxis.dataMax
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/289jtzp1/
I there any easy way to load the data in the heatmap with dates on "Y".
My data is in the following format:
[{x:1, y: 1401292253, value:0.2, name:"a"},{x:2, y: 1401173762, value:0.3, name:"b"},{x:0, y: 1401173462 , value:0.6, name:"c"}]
I want Y of the heatmap to be build automatically based on the given value. But I cant figure out how to do it.
What I've tried is:
http://jsfiddle.net/tZ6GP/16/
You need to set rowsize (or colsize for xAxis) to tell highcharts what is the range for each point. Otherwise it will be 1ms which is really low value. Second thing is that your y-values are in seconds, while in JS timestamps are in ms.
When changed that two things, you will get nice chart: http://jsfiddle.net/tZ6GP/19/
series: [{
rowsize: 3600000, // one hour
data: [{
x: 0,
y: 1401292253000,
value: 0.2,
name: "a"
}, {
x: 1,
y: 1401173762000,
value: 0.3,
name: "b"
}, {
x: 2,
y: 1401173462000,
value: 0.6,
name: "c"
}]
}]
To do this you have to treat your yAxis as categories still but then apply a label.format. This should get you started:
xAxis: {
type: 'category',
categories: ['a', 'b', 'c']
},
yAxis: {
type: 'category',
categories: ['1401292253', '1401173762', '1401173462'],
labels: {
format: '{value: %H:%M:%S}'
}
}
I also cleaned up your series.data a bit. Basically you need to give the matrix coordinates (x/y) and the value.
series: [{
data: [{
x: 1,
y: 0,
value: 0.2
}, {
x: 2,
y: 1,
value: 0.3
}, {
x: 0,
y: 2,
value: 0.6
}]
}]
By looking at this you can make out the locations of your points.
Live demo.
Update for latest highcarts code. You need to modify the yAxis label formatter:
yAxis: {
categories: ['1401292253', '1401173762', '1401173462'],
labels: {
formatter: function () {
var theTime = parseFloat(this.value);
return Highcharts.dateFormat('%H:%M:%S', theTime);
}
}
},
Update live demo.
Trying to got temp data from 1895 and upward to display on highcharts. The issue is that the xAxis is incorrect. How do I get this to display correctly (tick for each year increasing to the right)?
$('.cchighchart').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: null
},
xAxis: {
type: 'datetime'
},
yAxis: [{
title: {
text: 'Average Temperature (F)'
}
}],
series: [{
name: 'Average Temperature',
width: 3,
zIndex: 1,
yAxis: 0,
data: [
["1895", 42.441666666667],
["1896", 44.875],
["1897", 44.033333333333],
["1898", 42.716666666667],
["1899", 43.183333333333],
["1900", 45.408333333333],
["1901", 45.116666666667]
]
}]
});
http://jsfiddle.net/deadpickle/ZAqzj/
For datetime, you need your x-axis data to be in unix epoch time. This can be done fairly simply like this:
data: [
[Date.UTC(1895, 0, 1), 42.441666666667],
[Date.UTC(1896, 0, 1), 44.875],
[Date.UTC(1897, 0, 1), 44.033333333333],
[Date.UTC(1898, 0, 1), 42.716666666667],
[Date.UTC(1899, 0, 1), 43.183333333333],
[Date.UTC(1900, 0, 1), 45.408333333333],
[Date.UTC(1901, 0, 1), 45.116666666667]
]
See here
Alternatively, if you don't actually really need this to be a datetime axis (which if all you data is yearly, you really don't), you can just remove the type from your xaxis and change your years to numbers (rather than strings) and it will plot just fine:
data: [
[1895, 42.441666666667],
[1896, 44.875],
[1897, 44.033333333333],
[1898, 42.716666666667],
[1899, 43.183333333333],
[1900, 45.408333333333],
[1901, 45.116666666667]
]
See here
$(function () {
$('#container').highcharts({
chart: {
showAxes : true,
type: 'line',
marginRight: 130,
marginBottom: 25
},
tooltip: {
crosshairs: [true],
shared : true
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type :'datetime',
tickInterval : 12*30*24*3600* 1000,
min : Date.UTC(2011, 0, 1),
max : Date.UTC(2020, 0, 1),
label : {
align : 'left'
}
},
yAxis: {
title: {
text: 'PRICE Rs. / SQ.FT.'
},
lineWidth: 2,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
data:[2165,1831,2798,2200,2237,2799,2400,2500,2865,2850]
}]
});
});
My x-axis having Years and data series having information which i want to show on Y axis.
When i remove the interval from 2010 to 2022 i . e comment min and max option highcharts draws a graph starting from 1970 , but no points afterwards.
http://jsfiddle.net/R8kx7/3/ here is the link
Based on your comments to #SteveP answer, if you don't want to explicitly pair x values to each y for each series, use the plotOptions.series pointStart and pointInterval properties.
plotOptions: {
series: {
pointStart: Date.UTC(2011, 0, 1),
pointInterval : 12*30*24*3600* 1000
}
},
series: [{
data:[2165,1831,2798,2200,2237,2799,2400,2500,2865,2850]
}]
Updated fiddle here.
Although you are specifying min and max, your data has no x values specified, so it is assuming that the date time values are starting at 0. There are several ways to render the chart you want.
Firstly, you could specify x values in your data points e.g.
{x:Date.UTC(2011, 0, 1),y:2165}
Another way is to not use a datetime axis type, and just specify the categories you want in the x-axis:
categories:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
The second option is probably a bit simpler http://jsfiddle.net/K6xxz/