Highchart scatter point not connected - highcharts
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?
Related
Multiple crosshair
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
Highcharts Waterfall low value for yAxis point
While testing Highcharts v6.0.7 I found that Waterfall chart yAxis point does not accept "low" value anymore (series.data.low). The same option in the Column chart works and the point does not start at the bottom but at the "low" value. I tried it with an older version (4.2.3) and it works. The reason for using "low" value is that I want to have first point in Waterfall chart start at specified "low" value instead of the bottom of the chart. I searched through the documentation and could not find any info about this, is this a bug or has this "low" option been removed. And if there is a workaround for this that would give me the same results.
If something "worked" on specific version and wasn't documented at all (I checked the documentation of v4.2.3), then we can assume that was some type of undesirable behaviour. I see that 'waterfall' series inherits from column series, on which the low parameter still works as you described, but it also doesn't occurs in documentation.
If you would like to get similar effect, please try to use series.threshold parameter, but in my opinion both of ways breaks the logic of the chart a bit.
series: [{
threshold: 100000,
data: [{
y: 120000,
}, {
y: 569000,
}, {
y: 231000
}, {
isIntermediateSum: true,
color: Highcharts.getOptions().colors[1]
}, {
y: -342000
}, {
y: -233000
}, {
isSum: true,
}]
Live example: https://jsfiddle.net/nxwy48uj/
API Reference: https://api.highcharts.com/highcharts/series.waterfall.threshold
Highcharts Waterfall graph using a column graph
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
}]
}]
Column chart overlaps to one line when there's just a group of 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
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