Highcharts Waterfall graph using a column graph - highcharts

I would like to create a Waterfall graph using Highcharts, but I would like to use a COLUMN type graph, as I need custom tooltips shown on the sum and intermediate sum columns.
The question is:
How can I create a COLUMN graph where I define both the Y-start and the Y-end value?

Use object notation for points:
series: [{
data: [{
y: 20,
low: 10
}]
}]

Related

HighStock chart from sensor data

I'm logging sensor data into a SQL table that looks like this
Picture of the table for clarity
I'm processing the data intro arrays like this
$value1 = json_encode(array_reverse(array_column($sensor_data, 'value1')), JSON_NUMERIC_CHECK);
I'm processing datetime like this
$reading_time = json_encode(array_reverse($readings_time), JSON_NUMERIC_CHECK);
I managed to graph the data into a regular highcharts line graph. And for xAxis/time I used
xAxis: {
type: 'datetime',
categories: reading_time },
I want to graph the data using HighStocks so I'm able to use the navigator etc.
I can't find a way to pass the $reading_time to the x-axis. Do I need to format in a specific way?
Any sample code will be appreciated.
You can not use datetime and category axis type at the same time. Moreover, you can not use categories for Highstock at all. You should provide the date values as timestamps in miliseconds for x data property, for example:
data: [
// x, y
[1584014486654, 1],
[1584014496957, 2],
[1584014502349, 8]
]
API Reference: https://api.highcharts.com/highstock/series.line.data
Live example: http://jsfiddle.net/BlackLabel/6m4e8x0y/4904/

Plotbands to highcharts based on category

I have categories that are grouped and sorted by a sort order 1-7.
So group 1 has 3 categories in it.
So the first 3 categories belong to group one, next 4 belongs to group 2 and so on.
Is it possible to apply plot bands based on the categories?
Thanks
JS fiddle
https://jsfiddle.net/juliangurung/v73dcjs0/
Im not sure how to add plotbands which looks at my categories
xAxis: [{
plotBands: [{
color: 'orange', // Color value
from: 3, // Start of the plot band
to: 4 // End of the plot band
}],
}]
Sure, you can simply use plotBands. Take a look at examples posted below.
API Reference:
http://api.highcharts.com/highcharts/xAxis.plotBands
Examples:
http://jsfiddle.net/d9pn98jL/
https://jsfiddle.net/kryeo92u/

Stacked Column Chart With Unequal SubGroups in HighCharts.js

I am attempting to create a stacked column chart with an unequal number of "sub-groups".
For example, given the following data:
Category#1 : [SubCategory1: 2, SubCategory2: 4, SubCategory3: 3],
Category#2 : [SubCategory4: 5, SubCategory5: 3],
Category#3 : [SubCategory6: 4, SubCategory7: 3, SubCategory8: 3, SubCategory9: 5]
...
I want to create a column chart where the first column is comprised of three stacked segments and has a total height of 9,
the second column has a stack of two segments with total height of 8,
and the third column has four segments with a total height of 15.
After having worked for a little while with the HighCharts API and generally getting good results, I believe what I want to accomplish is probably doable and I am likely just missing some combination of options or structuring my data incorrectly. Does anyone know what I need to do in order to create such a chart?
Two of the ways you can solve this are:
Giving each point in your series a specific x index that relates to the category index.
Example of a series (JSFiddle):
series: [{
name: 'John',
data: [{x:0,y:5},{x:3,y:7},{x:4,y:2}]
}
Here we skip the 2nd and 3rd category (index 1 and 2), so they will not have a value.
Using null values in your series to skip having it appear in a category.
Example of a series (JSFiddle):
series: [{
name: 'John',
data: [5, null, null, 7, 2]
}
This series also skips the 2nd and 3rd category, like the one above.
Your solution choice may rely on how many null values you would end up with. If it is only a few, then that might be the most lightweight solution. If it is a lot, then using Point objects with x values may be more suitable and cleaner.

Is it possible to supply multiple yAxis from with data in one series

I want to supply a single series of data for multiple y axis rather than duplicate the data and put y values in 3 separate series.
Is it possible to tell each yAxis what value to pull from a data object?
data: [{
name: 'point1',
x: 123,
y0: 1,
y1: 4,
y2: 18
Is it possible to have the 'y' in the data object be an array with one value for each y axis?
data: [{
name: 'point1',
x: 123,
y: [1,4,18]
No, you need to use separate series. If you want have just one series in legend, use linkedTo option.

Display multiple points with exact same value in scatter HighCharts

i got a pool of data with exact same value in a scatter plot with HighCharts as in :
http://jsfiddle.net/DvbHa/1/
i want to be able to display them in tooltip when i go over it to be able to click them individualy
is something like that possible?
Thx all
Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: ''
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x}, {point.y}'
},
series: [{
data: [[10, 5],
[15, 6],
[10, 5],
[15, 7],
[13, 6],
[13, 6]]
}],
});
});
One option that is implemented in most major data visualization software packages is jittering - a function that adds small amounts of random noise to the data points so that each data point is slightly offset from it's actual data values.
This is a trade off with precision, of course, but those are the kinds of choices that are to be made when displaying data.
There is not a jittering option in Highcharts, but with a little digging you should be able to find or create a solution.
I have had some moderate success doing this on the server side before sending the data to the chart.
First check for any duplicates. If there aren't any, go no further.
If there are, create an array of any duplicate points for any point that has duplicates.
Loop through each array and add random decimal values to the x and y values of each point.
To add click events, use plotOptions.scatter.events.click.
However, I don't know what is the purpose of displaying the same points in the same place with the same value.
Increase size of the plot by using marker radius and you can differentiate the plots at same location.
marker: {
radius: 13
}
http://api.highcharts.com/highcharts/plotOptions.spline.marker.radius
See this one helps or not
Since 7.0.2, HighCharts now does officially support jittering for scatter plots.
See here: https://api.highcharts.com/highcharts/plotOptions.scatter.jitter

Resources