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 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?
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
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