I have a line graph with data points, and each of the points have a separate label. I want to display the label in a tooltip and have a custom formatter function, but I can't manage to get the label data from the server backend into the formatter.
My data:
+------------------+-------+----------------------+
| Date | Value | Label |
+------------------+-------+----------------------+
| 2018-05-21 08:00 | 100 | A description |
| 2018-05-21 08:10 | 50 | Another one |
| 2018-05-21 08:20 | 900 | Completely different |
+------------------+-------+----------------------+
A really ugly way I got it to work was to serialize the labels, put it in the name field and parse it out in the formatter but that's absolutely cringeworthy.
You can define your custom point parameter (e.g labelDesc) in each point object. Then, in the series.dataLabels.formatter function you will be able to access it by this.point.labelDesc. You need to return that value from the function, and that's all.
Here is the code:
series: [{
dataLabels: {
enabled: true,
formatter: function() {
return this.point.label
}
},
data: [{
y: 100,
label: 'Some label'
}, {
y: 50,
label: 'Some label 2'
}, {
y: 900,
label: 'Some label 3'
}]
}]
And also live example: http://jsfiddle.net/tdcxevy3/
Related
Elaborating a graph where I point with y different, and 'x' equals; I put in the series:
series: [{
name: 'Grafico 1',
data: data,
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y, 2)
},
color: "#000000"
},
stacking: 'normal',
}]
and as a result in the chart have the highest value added with the smaller one, that is:
http://i.imgur.com/Ups7AzT.png
If I remove the statement "stacking: 'normal'", I instead the chart without the line joining the points:
http://i.imgur.com/gMAO5VW.png
I ask: you can have the chart without the value added is greater than the lower (ie the value 18 is represented as 18 in the chart, and 26.45 because the child is 8.45)?
We are evaluating highstock charts to plot data for our reports. Data streams in from our servers in one hour chunks, from oldest to latest. We have configured the range selector to display 1h, 1d and 1w data:
rangeSelector: {
buttons: [{
type: 'minute',
count: 60,
text: '1h'
},
{
type: 'day',
count: 1,
text: '1d'
},
{
type: 'week',
count: 1,
text: '1w'
},
{
type: 'all',
text: 'All'
}],
selected: 0,
By default, highcharts seem to select the first hour of data that is coming in. For example if the data range is 3/20/2015 00:00 - 3/24/2015 00:00, the data that is selected for display is 3/20/2015 00:00 - 01:00.
We would like it to keep displaying the last hour as long as the user doesn't choose 1 day where we would like it to be last day and so on. Is there a property, similar to http://docs.amcharts.com/3/javascriptstockchart/AmStockChart#glueToTheEnd that I can turn ON to do this?
I have an array of objects that I want to display in highcharts. Every object has a name and a value.
I have tried to get this to work by doing
var objects = objectArray[]; // objectArray being an array of the objects I want data on
var objectNames = nameArray[]; // This being an array of all the names of the objects
var objectValues = valueArray[]; // An array of all the values of the objects
series: [{
data: objects.value,
name: objects.name
}]
This blew up on me. So I tried building the series like this:
series: [{
data: objectValues,
name: objectNames
}]
This gave me data for the values, but the name was all of the names in the objectNames array... for every single piece of data. so I tried using
series: [{
data: objectValues
},
{
data: objectNames
}]
This resulted in seeing the chart for the objectValues, and in the legend, another option for the names - which is completely unacceptable because there's no point in having a series of labels, right?
So I decided I would programmatically build out a series, using a foreach loop and then pass that into the constructor. However, http://www.highcharts.com/docs/getting-started/how-to-set-options/ says this is "bad code".
What I'm wanting is to be able to pass an array of objects to highcharts, tell it that every piece of data's 'name' is going to be the name value on that particular object, and the data is going to be tied to that particular object's value field. Is there a way to do this? Or is the only option what highcharts considers 'bad'?
So I found a solution.
After getting the data, I did
$.each(item, function (index, value) {
objects.push([value.name, value.value]);
});
And then bound my series with
series: [{
data: objects,
name: 'Value Type Description'
}]
So I have "Value Type Description" in the legend, but when I hover over a specific point I have the name as the label, and valid data displaying in graph form.
I found at http://api.highcharts.com/highcharts#series that if you have an array of two dimensional arrays, you can just pass a string as the first parameter and it would parse it as the label for that point.
EDIT: Example per request.
So you have two pieces to the series field, data and name. Name does NOT apply to the data, that will be the name of the axis.
So data is an array of key/value pairs.
data: [
{[key1, value1]},
{[key2, value2]},
{[key3, value3]}
]
And name is what the "main" label will be - "My Data Stuff" for example.
Then, when you load the chart, in the legend it should say "My Data Stuff", but when you hover over a specific point, say the first one, it will display the Key1 Value1 information.
data: [{
name: 'Point 1',
y: 1,
test1:9,
test2:'ddaf'
}, { -------> right
name: 'Point 2',
y: 5,
test1:12,
test2:'ddddaf'
}]
data: [{
my_name: 'Point 1',
y: 1,
test1:9,
test2:'ddaf'
}, { -------> we change 'name' to 'my_name',
my_name: 'Point 2', then the name you want to show become
y: 5, 'Slice', instead of 'Point 1','Point 2'
test1:12,
test2:'ddddaf'
}]
data: [{
my_name: 'Point 1',
my_y: 1,
test1:9,
test2:'ddaf'
}, { -------> Now,we get nothing.
my_name: 'Point 2',
my_y: 5,
test1:12,
test2:'ddddaf'
}]
So,the 'name' and 'y' is the key.
How can we get next elements name in Highcharts
for example
series: [{ name: 'weight', data: [50, 48, 80, 70]},
{ name: 'height',data: [5.8, 5.1, 6.1, 6.0]}
]
tooltip: {
formatter: function(){
return this.series.name;//i want to return here next elements name also is there any way
}
}
in the above tooltip iam returning only current element name, is there any way to get immediate next elements name there..?
You can always use shared tooltip, take a look: http://api.highcharts.com/highcharts#tooltip.shared
How do I display the date on my x axis from a json object structured like so;
[
[
634420512000000000,
100000
],
[
634421376000000000,
100086
],
[
634422240000000000,
100171
],
[
634423104000000000,
100257
]
]
Where my date is in milliseconds. I have set my xAxis like so;
xAxis: {
title: {
text: 'Time'
},
type: 'datetime'
}
Highcharts accepts three primary formats for data:
A simple array (e.g. [1, 2, 3])
An array of arrays of x, y pairs (e.g. [[x, y], [x2, y2]])
A list of point objects
Further details on these formats can be found in the highcharts documentation. However, in your case, it should be quite easy. Just do something like the following.
var data = []; //assume data is the array you've listed in your question
var chart = new Highcharts.chart({
xAxis: {
title: {
text: 'Time'
},
type: 'datetime'
},
series: [{
data: data
}]
});
Turns out I was returning ticks instead of milliseconds from 1/1/1970
So...
Dim dt1970 As DateTime = New DateTime("1970", "1", "1")
Dim d As DateTime = row("myDateFromDB")
Dim span As TimeSpan = d - dt1970
Dim milli as long = span.TotalMilliseconds