I have data of the form ["10.237.77.82","10.237.79.255"] which I would like to plot on a scatter plot.
Highchart crashes with error 14: String value sent to series.data, expected Number, which is correct as my data are indeed strings.
Is there a way to use strings as the elements of a scatter plot?
In short, values must be numbers. However, dataset looks like a categorized one, then maybe you just need this: http://jsfiddle.net/BlackLabel/8hc7Lzyu/1? As you can see, categories (IP's) are on axes, but markers are numbers.
Snippet:
Highcharts.chart('container', {
xAxis: {
categories: ["10.237.77.82", "10.237.79.255"]
},
yAxis: {
categories: ["10.237.77.82", "10.237.79.255"]
},
series: [{
data: [
[0, 1],
[1, 0]
]
}]
});
Related
I have a line chart that plots multiple datasets where each dataset has two lines associated with it: a reference line and a measured line.
To plot all of these lines, I added individual series for each subset of data, giving the reference line a dashed appearance and the measured line a solid appearance.
The tooltip formatter displays a popover of detail data for a specific point based on the cursor position. It only displays data for one series.
How might I group the series together in such a way that I can display a tooltip for multiple series, but not necessarily all of the series?
Highcharts seems to have an option for shared that displays a tooltip for all of the series that correspond to the cursor's X coordinate, but is there a way to do some sort of grouping? Is there something I can do to the series configuration so that each series renders two lines on the chart but with different appearances?
Not sure if what I'm trying to do is possible with Highcharts. Might need to be a custom chart.
There is no such default functionality in Highcharts, but for now I see two possible workarounds:
slight change in x value:
series: [{
data: [1, 1, 1]
}, {
data: [[0.0001, 2], [1.0002, 2], [2.0002, 2]]
}, {
data: [3, 3, 3]
}, {
data: [[0.0001, 4], [1.0002, 4], [2.0002, 4]]
}]
Live demo: http://jsfiddle.net/BlackLabel/v1uxp3jh/
wrap of the refresh method to exclude some of the unwanted points:
(function(H) {
H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) {
points.forEach(function(p, i) {
if (p.series.name === "Series 2") {
points.splice(i, 1);
}
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Live demo: http://jsfiddle.net/BlackLabel/qd4mnx8e/
Docs: https://www.highcharts.com/docs/extending-highcharts
i want to draw the line by the order of data. Data is added dynamically so i am using addPoint. for example i have this:
let data = [[1,2], [5,3], [2,5]]
chart.series[0].addPoint(data[0])
chart.series[0].addPoint(data[1])
chart.series[0].addPoint(data[2])
and the result is that all the points on the chart are connected sequentially.
but i want it to be like this:
I made that chart by setData, but creating a separate array and repeatedly calling setData seems to be not the correct way. is there a way to achieve that with addPoint? or any other solution?
You can use scatter series type with lineWidth property:
let data = [
[1, 2],
[5, 3],
[2, 5]
]
let chart = Highcharts.chart('container', {
series: [{
type: 'scatter',
lineWidth: 2,
data: []
}]
});
chart.series[0].addPoint(data[0]);
chart.series[0].addPoint(data[1]);
chart.series[0].addPoint(data[2]);
Live demo: http://jsfiddle.net/BlackLabel/ynrkq40g/
API Reference: https://api.highcharts.com/highcharts/series.scatter.lineWidth
If I have a Highcharts bar or column chart that has a data series with an array of all zeroes, the y axis tick label displays in the center of the y axis, along with an extra y axis. I've experimented with the tick placement and min values but these dont seem to work in the case of this peculiar set of data. see http://jsfiddle.net/davidpmcintyre/mepd17tn/
Here's the highcharts code snippet:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr' ]
},
series: [{
data: [0, 0, 0, 0]
}]
});
});
Assuming (given requirements of your chart):
All data will be positive
You always want to start from 0 on the y-axis
The following code will allow you to left-align your y-axis, and also specify how much of the y-axis you want to show in minimal cases (JSFiddle):
yAxis: {
min: 0,
minRange: 1
}
This will still allow you to have larger ranges on the y-axis as it only kicks in when the value range is less than one. This in turn means you do not have to check your data before setting any values.
I tried to plot a graph with line style for the data more than 300 points. I could not obtain the expected graph but only with markers. However, when I zoom the graph, the line can be seen. I have done a lot work to show the line but I failed. Lastly when I reduced the number of the data points, I could see the line. I have experienced with flot but I have not encountered this kind of problems. Is is a bug in the highcharts? How can I overcome this difficulty? I am looking forward to your suggestions.
Probably you have not enough width of container, and markers "overlap" line. So try to disable markers http://api.highcharts.com/highcharts#plotOptions.line.marker.enabled and check if line appears.
ps. sourcecode will be helpful (could you reproduce it in jsfiddle.net)
thank you very much for your attention for this question. I have solved the problem by myself.
When I checked my data again with JSON.stringify, I found the last plot data is [NaN, NaN]. When I remove this data and plot again, I got the line plot. The reason that I created the data from a text file and forgot to trim the text. When I added /removed [NaN, NaN] from the data array, the line could be shown or disappeared. The phenomena can be reproduced.
Here is the sample code. The data1 can not be shown in line but data2 can.
var chart;
var data1 = [
[0, 1],
[1, 2],
[3, 5],
[10, 9]
];
data1.push([NaN, NaN]); // if the last data is [NaN, NaN], the line will not be shown.
var data2 = [
[2, 3],
[4, 5],
[10, 1]
];
$(function () {
// define the options
var options = {
chart: {
renderTo: 'container'
},
plotOptions: {
series: {
lineWidth: 2,
marker: {
enabled: false
}
}
},
series: [{
name: 'test 1',
data: data1
}, {
name: 'test 2',
data: data2
}]
};
chart = new Highcharts.Chart(options);
});
I'm relatively new to HighCharts, and I would like to have two Y-axes where the data is always expressed in terms of the left-hand (primary) Y-Axis, but there is a constant function whereby you can translate the data into the terms on the right-hand (secondary) Y-Axes.
Take, for example, http://jsfiddle.net/M2EVb/
It's a constant well-known function to translate from Fahrenheit to Celsius. Even though I have specified the Primary Y-Axis as ranging from 32 to 212 with a tick interval of 18, and the Secondary Y-Axis as ranging from 0 to 100 with a tick interval of 10, the two axes don't line up properly; likely due to the "cels" data. But the point is that I would like to have the "cels" data just be another set of Fahrenheit temps, and have the right-hand Y-Axis values be the proper Celsius "translations" of their respective Fahrenheit values, and always show up.
Use the label's formatter function in the yAxis configuration to convert your yAxis ticks from F to C like this:
yAxis: [{
title: {
text: 'Temperature (C)'
},
labels: {
formatter: function() {
return YourConversionFunction(this.value) +' C';
}
}
}]
Make sure you are defining your Series using the same dataset (the F data):
series: [{
type: 'area',
name: 'Temp (F)',
data: Far_TempData,
yAxis: 0,
xAxis: 0
}, {
type: 'area',
name: 'Temp (C)',
data: Far_TempData,
yAxis: 1,
xAxis: 0,
lineWidth:0,
fillOpacity: 0.01,
visible:true
}]