I have a line chart with xAxis values as timestamps and yAxis values has a number. The definition is easy:
xAxis : [ {
type : 'datetime'
labels: {
formatter: function(){
// Custom function formatting timestamps
}
}
]
Data from my API come like this and works great.
data:[
[1558648800, 10256],
[1558648801, 10258],
[1558648802, 10259]
]
The issue now is that I need to show a message in a tooltip, so I found some solutions like https://stackoverflow.com/a/8515679.
data: [
{y : 10256, myData : 'Message 1'},
{y : 10258, myData : 'Message 2'},
{y : 10259, myData : 'Message 3'}
]
In this solution xAxis data dissapears so the unique way that I found is using name attribute as xAxis, but I thought that is not the best while managing timestamps and autommatic tikcIntervals.
(I delegate intervals on Highcharts, doesn't matter).
So my question is, what it would be the best way to create that extra attribute (myData) for tooltip, considering datetime with timestamps line chart?
Thanks in advance
You can use data with x, y and myData properties:
series: [{
data: [{
x: 1558648800,
y: 10256,
myData: 'Message 1'
},
{
x: 1558648801,
y: 10258,
myData: 'Message 2'
},
{
x: 1558648802,
y: 10259,
myData: 'Message 3'
}
]
}]
Or define the data as an array and use keys property:
series: [{
keys: ['x', 'y', 'myData'],
data: [
[1558648800, 10256, 'Message 1'],
[1558648801, 10258, 'Message 2'],
[1558648802, 10259, 'Message 3']
],
}]
Live demo: http://jsfiddle.net/BlackLabel/nsw46pLx/
API Reference:
https://api.highcharts.com/highcharts/series.line.data
https://api.highcharts.com/highcharts/series.line.keys
Related
I am trying to create a lollipop chart where some values are negative, and some are positive, either side of zero, like this:
image
However the chart seemingly only allows the marker to be on the "high" end of the chart. Is there a way to control which end has the marker ?
I'm using these chart options:
chartOptions: {
chart: {
type: 'dumbbell',
inverted: true
},
title: {
text: 'lollipop chart'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'value'
}
},
series: [{
name: 'value',
data: [{
name: 'a',
low:0,
high:13,
}, {
name: 'b',
low:0,
high:26,
},{
name: 'c',
low:-43,
high:0
},{
name: 'd',
low:-83,
high:0
},{
name: 'e',
low:0,
high:113
}]
}]
}
The series which should be used in this case is a lollipop, but it seems that the array of objects configuration doesn't work. I reported it on the Highcharts Github issue channel, where you can follow this thread: https://github.com/highcharts/highcharts/issues/13202
As a solution in the dumbell series I suggest to find those graphics in the render callback and hide them.
Demo: https://jsfiddle.net/BlackLabel/3o7acsbt/
events: {
render() {
let chart = this;
chart.series[0].points.forEach(p => {
if (p.low >= 0){
p.lowerGraphic.hide()
} else {
p.upperGraphic.hide()
}
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.render
EDIT
Under the GitHub link, the workaround showed up. Please check it, maybe will be fit better to your requirement.
I'd like to show two sets of Venn diagrams inside a single chart. So I have the following code for sets A and B:
Highcharts.chart('container', {
series: [{
type: 'venn',
data: [{
sets: ['A1'],
value: 188956
}, {
sets: ['A2'],
value: 211267
}, {
sets: ['A1', 'A2'],
value: 23085,
name: "overlap"
}, {
sets: ['B1'],
value: 10880
}, {
sets: ['B2'],
value: 10880
}, {
sets: ['B1', 'B2'],
value: 6389,
name: "overlap"
}]
}],
title: {
text: 'Sets A and B'
}
});
What's really nice about showing everything together is that the four circles are sized proportionately to each other. The problem is how they're laid out. I'd want to show set B on the right side of A with some spacing between them. I also want set B to be laid out horizontally like A is.
Is this doable and if so how?
Thanks!
Alvaro
That is not possible in one chart, but you can create multiple charts:
Highcharts.chart('container', {
...,
series: [{
type: 'venn',
data: [...]
}]
});
Highcharts.chart('container2', {
...,
series: [{
type: 'venn',
data: [...]
}]
});
Live demo: https://jsfiddle.net/BlackLabel/xy5dfq4s/
Docs: https://www.highcharts.com/docs/chart-and-series-types/venn-series
I am trying to plot a chart with only two data points from a CSV file that holds many more data points with a datetime x-Axis.
In the end the user should be able to compare two years of his choice out of the whole dataset.
From the API documentation I know that I can pick a range of data points from a CSV with startRow and endRow:
https://api.highcharts.com/highcharts/data.startRow
But that would only plot one specific point, as you can see in my fiddle.
Is there any other way to programmatically show specific points?
Highcharts.chart('container', {
chart: {
type: 'column',
polar: false,
},
title: {
text: ''
},
subtitle: {
text: ''
},
data: {
csv: document.getElementById('csv').innerHTML,
startRow: 3,
endRow: 4,
googleSpreadsheetKey: false,
googleSpreadsheetWorksheet: false
},
series: [{
name: 'val'
}],
yAxis: [{
title: {
text: ''
},
opposite: true,
labels: {
align: 'right',
reserveSpace: true
}
}],
xAxis: [{
type: 'datetime',
opposite: false
}],
pane: {
background: []
},
responsive: {
rules: []
},
legend: {
title: ''
},
plotOptions: {
series: {
animation: false
}
}
});
Edit:
I forgot to mention, that i only want to load the CSV once. After that the user should be able to select/update data points without reloading the data.
For showing ranges of values dynamically, I used Axis min and max settings like this:
$(this).highcharts().update({
xAxis:{
min: Date.UTC(selectedStart,0,0),
max: Date.UTC(selectedEnd,11,31)
}
});
The whole dataset is loaded once and the chart axis gets updated on user interaction.
Now I am looking for something similar just not for a range but a comparison of two values off of the whole dataset.
Highcharts data module provides a function called parsed that allows you to modify the fetched data programmatically before it's applied to the chart.
From Highcharts API (https://api.highcharts.com/highcharts/data.parsed):
parsed: function
A callback function to access the parsed columns, the
two-dimentional input data array directly, before they are
interpreted into series data and categories. Return false to stop
completion, or call this.complete() to continue async.
Live demo: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/data/parsed/
I'm using HighCharts, I have this array,
I would like to create a chart like this:
As I know, the format of series is like this:
series:[{
name: 'Production',
data: [0.074, 0.040,0.034,0.036,0.068]
}, {
name: 'Reprise',
data: [0.024,0.022,0.029, 0.055, 0.052]
}]
with categories array:
['Mario', 'Andre', 'Jean Jacques', 'Fidy', 'Judith']
How could I do if I want to paste each value of column Volumes to each Production Stacked Bar value like the chart above ?
Thanks!
you can see an example here: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked/
series: [{
name: 'Volume',
data: [1, 0.16, 0.46, 0.37, 0.24]
}, {
name: 'Reprise',
data: [0.024, 0.0.....]
}, {
name: 'Production',
data: [....]
}]
Later edit: to display volume as data label you can use the formatter function:
column: {
stacking: 'normal',
dataLabels: {
formatter: function () {
return this.x;//you can have a little logic here if (thix.x == 'Production) return myVariable[y];myVariable will contains values from volume or something similar
}
}
}
Define volume in your data array:
data: [{y:0.074,volume:1}, {y:0.040,volume:0.15}]
And use formatter in datalabels options to get custom value:
formatter: function () {
return this.point.volume + ' km';
}
jsfiddle
I am trying to write a script that produces a col chart. The data is from an MySQL query that produces the following array content:
97.2,63.9,33.4,28.9,325.2,114.9,46.1,56.7,104.9,4.5,42.2,56.4,10.5
When I run the script I get an error:
SyntaxError: missing ] after element list
I have tracked down to where I thik the error is but can not see whats wrong.
Inside the jQuery function I have an PHP echo statement which populates the $data variable with the data, $data[] = $row_An['AValue'];.
The values are correct as seen in FireFox dev console. Can anyone see why I am getting the error.
$(function () {
<?php
$data[] = $row_An['AValue'];
?>
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'AN'
},
xAxis: {
categories: ['Inbound', 'Outbound', 'InService']
},
yAxis: {
title: {
text: ''
}
},
series: [{
data: [97.2,63.9,33.4,28.9,325.2,114.9,46.1,56.7,104.9,4.5,42.2,56.4,10.5],
pointStart: 0,
pointInterval
}]
});
});
Many thanks in advance
what's value in pointInterval ? its wrong to leave that without any value
series: [{
data: [97.2,63.9,33.4,28.9,325.2,114.9,46.1,56.7,104.9,4.5,42.2,56.4,10.5],
pointStart: 0,
pointInterval //here is error you should provide value or remove it
}]
Also, these two properties PointInterval and PointStart are part of plotOptions.series
your number of categories don't match with number of data points ,correct them
categories: ['Inbound', 'Outbound', 'InService']