We are evaluating the highcharts JS library. We need:
to display in the same graph, up to 10 line series of 256 000 points each: OK
to display annotations: OK
to be able to set 2 X-crosshair to be able to display, inside a tooltip or a specific zone, the differences/delta in X and Y betwwen the both crossair. Is it possible to acheive that?
Best regards,
Xavier
It is a really custom functionality. It could be achieved by creating the initials plotLines and by implementing the possibility to drag them. I tried to explain everything by the comments in the demo.
Demo: http://jsfiddle.net/BlackLabel/efL6wyjr/
The initial plotLines:
xAxis: {
plotLines: [{
value: 2,
width: 4,
color: 'red',
}, {
value: 5,
width: 4,
color: 'red'
}]
},
If something is unclear - feel free to ask.
API: https://api.highcharts.com/class-reference/Highcharts.Axis#toValue
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
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.
I set the lineWidth already to let every point connected to each other but it's still won't work. Please help me to inspect the sample data below and also the options setting
[{"x":101.4,"y":69.235,"marker":{"fillColor":"#BF0B23"}},{"x":101.23,"y":69.24},{"x":101.03,"y":69.24},{"x":100.82,"y":69.22},{"x":100.61,"y":69.21},{"x":100.41,"y":69.21},{"x":99.95,"y":69.19},{"x":99.96,"y":69.19},{"x":100,"y":69.14},{"x":100.03,"y":69.1},{"x":100.04,"y":69.1},{"x":100.09,"y":69.085},{"x":100.15,"y":69.08},{"x":100.08,"y":69.135},{"x":100.03,"y":69.095},{"x":100.06,"y":69.07},{"x":100.1,"y":69.07},{"x":100.25,"y":69.045},{"x":100.18,"y":69.105},{"x":102.82,"y":68.925},{"x":102.52,"y":68.89},{"x":102.2,"y":68.86},{"x":102.18,"y":68.87},{"x":102.25,"y":68.855},{"x":102.21,"y":68.845},{"x":102.82,"y":69.595},{"x":102.9,"y":69.575},{"x":102.86,"y":69.595},{"x":102.8,"y":69.775},{"x":102.83,"y":69.695},{"x":102.83,"y":69.755},{"x":102.82,"y":69.615},{"x":102.91,"y":69.615},{"x":102.88,"y":69.575},{"x":102.98,"y":69.585},{"x":103.16,"y":69.655},{"x":103,"y":69.655},{"x":102.91,"y":69.595},{"x":102.82,"y":69.595},{"x":102.7,"y":69.575},{"x":102.76,"y":69.625},{"x":102.77,"y":69.575},{"x":102.76,"y":69.545},{"x":102.85,"y":69.505},{"x":102.99,"y":69.505},{"x":103.02,"y":69.505},{"x":102.88,"y":69.515},{"x":103,"y":69.845},{"x":103.19,"y":69.805},{"x":103.1,"y":69.725},{"x":102.79,"y":69.675},{"x":102.96,"y":69.735},{"x":103.14,"y":69.625},{"x":103.02,"y":69.615},{"x":103.27,"y":69.785},{"x":103.19,"y":69.765},{"x":102.88,"y":69.475},{"x":103,"y":69.475},{"x":102.99,"y":69.395},{"x":99.49,"y":69.195},{"x":99.32,"y":69.215,"marker":{"fillColor":"black"}}]
this is not the whole data. The data is not fit in in SO textarea
the options
options = {
chart: {
type: 'scatter',
animation:false
},
plotOptions: {
scatter: {
turboThreshold: 9999
}
},
series: [{
name: 'Hysteresis',
data: [],
lineWidth: 2
}]
}
Here my attempt to use with jsFiddle and it's working. But for your information, I dynamically load the data like this chart.series[0].setData() and it's not working
screenshot of console.log($('ele').highcharts());
this is the alternative that I tried, how I push the data to the series before initiated highcharts
options.series[0].data.push({
x: parseFloat(model.get('xreading')),
y: parseFloat(model.get('yreading')),
marker:{ fillColor: '#BF0B23', symbol: 'triangle' }, label: model.get('iv_date')
});
Any possible options that might prevent it from draw the line
to solve this little problem when it is not connected,
check your data. Make sure x and y is available if normal push array
not working for you, why not you try build json string then later parse it
that's all folks
A scatter plot (definition of a scatter plot # Wikipedia) doesn't have lines connecting each data point. Line graphs have lines: Highcharts, Basic Line # highcharts.com
Change:
type: 'scatter',
to
type: 'line',
Then change the plotOptions accordingly.
Maybe what you really want is a trend line? See: https://github.com/virtualstaticvoid/highcharts_trendline
That's a regression line which is automatically calculated to fit your data?
Basically, I'm trying to have Highcharts automatically draw a straight line going from the first data point to the last, so that I can see the "overall trend" more easily.
I believe this is called a "trend line" or something, but I have not found anything in the documentation related to that. It is very possible that it still has this feature, however. Does it?
As far as I am aware, highcharts does not calculate a regression or trend lines. There are some plugins that you may be able to use. Here is one that i've found, i'm sure there are others: https://github.com/virtualstaticvoid/highcharts_trendline
Highcharts does not support this out of the box, but there are some plugins in their gallery that do trend lines.
This one for example (which we have used with success), gives multiple options including linear trend and moving averages:
http://www.highcharts.com/plugin-registry/single/16/technical-indicators
UPDATE May 2018:
Highcharts now includes this functionality as part of its core offering.
https://www.highcharts.com/docs/chart-and-series-types/technical-indicator-series
HighCharts have trend line feature.
check https://www.highcharts.com/products/plugin-registry/single/22/Highcharts%20regression
check this JSFiddle also http://jsfiddle.net/3g4ryLc9/539/
series: [{
regression: true,
regressionSettings: {
name : 'Type any name of the series..',
type: 'polynomial',
color: 'rgba(223, 183, 83, .9)',
dashStyle: 'solid'
},
name: 'Test input',
color: 'rgba(223, 83, 83, .5)',
data: [
[1, 1],
[2, 3],
[3, 9],
]
As you can see from: http://jsfiddle.net/EwZsS/1/.
Four columns overlap to one line when there's just a group of series data, like that shows below.
series: [{
name: 'Tokyo',
data: [[Date.UTC(2013, 0, 6), 49.9]]
}, {
name: 'New York',
data: [[Date.UTC(2013, 0, 6), 83.6]]
}
]
And it will well perfomed when I add another group of series data(i.g. http://jsfiddle.net/EwZsS/2/).
I don't know where the problem is. How could I fix the problem?
The problem is that each series has exactly one point, so Highcharts aren't able to calculate required space for each series. For such cases you need to use pointRange, see: http://jsfiddle.net/Fusher/EwZsS/3/
Ref: http://api.highcharts.com/highcharts#plotOptions.column.pointRange