how would you go about skipping columns when plotting. Specifically, I have data that looks like:
week,area1,area2,area3,area4,area5,area6,area7
1,5,5,5,5,5,5,5
2,6,6,6,6,6,6,6
3,7,7,7,7,7,7,7
I'm doing 2 multi-line charts. The first graphs area1, area2 & area3 and the second one graphs area4,5,6. In the first chart, I can easily keep the "week" as my X values and only do the first three areas by:
data: {
csv: csv,
startColumn: 0,
endColumn: 3
},
But obviously when I do the second chart, if I do
data: {
csv: csv,
startColumn: 4,
endColumn: 8
},
I get one of the area values as my X axis. I can understand that, but was wondering if you can easily skip the middle columns and only graph column(0) (my "week") and then columns 5 - 8?
I have seen nothing that would be like:
startColumn: 0,
excludeColumns: 1-4,
endColumn: 8
or something similar. Do you think that's available or would I have to split the input into arrays and weed it out there?
To get columns 0 and 5-8, use this:
data: {
csv: csv,
startColumn: 0,
endColumn: 8,
parsed: function (columns) {
$.each(columns, function () {
this.splice(1, 4);
});
}
},
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 have a highchart with 4 series. I also only set the min value for each y-axis to 0 cause there arent any negative values possible. now highchart is calculating the max value by itself what is nice BUT i need this for each series itself. The reason is that i have 2 series with very high values from the range up to 5000 and the other two values are relativ small from 0 to 50.
The max value highcharts calculates is used for all four series - so the chart looks like this:
As you can see you can only see the two high value series - the other two arent really visible at the bottom of the chart.
When i disable the two series with the high values the chart looks nice for the other two values:
is there any flag i can use so highchart will calculate the max value / scale per series? Or have i really calculate it by myself - also on zoom and so on.
I found this: https://github.com/highcharts/highcharts/issues/4248
But i thought thats some basic functionality with is needed very often so there has to be something..
greetings
Maybe it would be better to use logarithmic axis type? Your chart would have only one axis adjusted to much difference between the values of series points. When it comes to differences between units of measurement, always you can set the different tooltip.pointFormat definition for specific series.
Highcharts.chart('container', {
title: {
text: 'Logarithmic axis demo'
},
yAxis: {
type: 'logarithmic',
},
series: [{
data: [1, 20, 30, 22, 16, 32, 45, 24, 11, 2],
pointStart: 1,
tooltip: {
pointFormat: '<b>{point.y} km/h</b>'
}
}, {
data: [4500, 3450, 4242, 2348, 5216, 3212, 4564, 3128, 5256, 4512],
pointStart: 1,
tooltip: {
pointFormat: '<b>{point.y} kW/h</b>'
}
}]
});
Live example: https://jsfiddle.net/bfnj4mp8/
API Reference:
https://api.highcharts.com/highcharts/yAxis.type
https://api.highcharts.com/highcharts/series.line.tooltip.pointFormat
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]
]
}]
});
What is the best way to achieve a chart with multiple types when it should include a type that has the following kind of visual presentation.
| yellow |blue| gray | yellow | gray |
i.e. a type which is one dimensional (but visually has height), and the color indicates 'y' (which here consists of categories: yellow, blue, gray)
You should also be able to stack those:
| radical | senseless | high tension |
| yellow |blue| gray | yellow | gray |
I can achieve this with having a chart typed column with a series for each category:
http://jsfiddle.net/RCnYV/
But how can I also add another chart type above that, like:
yAxis (only for the line)
^ ___
|------- ___________________________ ____/
| \__________/ \/
| radical | senseless | high tension |
| yellow |blue| gray | yellow | gray |
-----------------------------------------------------------> xAxis (shared)
So the line series should be above (not hovering over) the others. Note that the xAxis is shared between all of the series, i.e. all of the series have exactly as many data points. It is just that some of the series are presented as type 'line', and others with the new type (that I don't know good name for, ribbon?).
Also what other ways are there to create a similar chart? One problem with the above is that I need to create one series for each catalog, that is 2 * series in total, and not just two as would be the case with basic chart.
Are you looking for something like this # http://jsfiddle.net/jugal/cABfL/ ?
You can stack the charts by specifying heights for your yAxis, and manipulating its top so that they stack one over the other
yAxis: [{
top: 300,
lineWidth: 2,
offset: 0,
height: 200,
tooltip: {
enabled: true,
formatter: function() {
return this.series.name + ": " + $wnd.Highcharts.numberFormat(this.y, 2);
}
}
},
{
height: 200,
lineWidth: 2,
offset: 0,
tooltip: {
enabled: true,
formatter: function() {
return this.value + 50;
}
}
}],
Similar stacking example is available # http://www.highcharts.com/stock/demo/candlestick-and-volume
EDIT
To answer to the second part of the question (Also what other ways are there to create a similar chart?). There isn't anything out of the box that highchart seems to bring to the table for such a visualization, so you would need to work yourself around the existing lines and columns to get this visualization.
This is how I went about it.
I tried using the stacked bar chart for each ribbon, hence would need 2 series, 1 for the line and 1 each for both the ribbons. But after giving it a try, turned out the bar chart is nothing but a rotated column chart (at least a sort of), it seems to have the vertical axis as the X and horizontal one as Y, hence it messes up any other chart, i.e. the line chart gets messed up as it wants the horizontal to be the X.
Basically using a bar chart didn't take me much far. I went ahead using the line chart (With a very thick line lineWidth:50) and drew a horizontal (Constant Y for each point) line chart with one series for each section of the ribbon, hence being able to give each section different color. Each ribbon would need a separate Y-axis, with different offset as mentioned above. Also removed all the tooltip, Y-axis labels and grid lines, to make it look as different from a line chart and more like the ribbon. Tooltip may be needed, but line charts give tooltip for points, in our case we want tooltip on section between two points, hence wrote a mouseOver event handler and calculated the length of the section in there. The only part that was hurting now was creating a series for each section of the ribbon, so went ahead and wrote the following utility function that accepted a list of values, basically the x intercepts for each section (you can improvise it to take section length instead) and returned an array of series.
// usage: createSeries([0, 3, 4, 6], 1)
// Creates 4 series and assigns them all to yAxis 1
// you can extend this to take colors etc too, as per requirement
function createSeries(data, yAxisIndex) {
var i;
var series = [];
for (i = 0; i < data.length - 1; i++) { // Node lenghth-1
var start = data[i];
var end = data[i + 1];
series.push({
yAxis: yAxisIndex,
animation: false,
stack: 0,
data: [[start, 0], [end, 0]],
lineWidth: 50,
marker: {
enabled: false
},
tooltip: {
pointFormat: function() {
return "";
}
},
events: {
mouseOver: function() {
alert(this.data[1].x - this.data[0].x);
}
},
showInLegend: false
});
}
return series;
}
All that was needed was to push these series into the existing series and then feed it to the highchart constructor.
Final jsFiddle: http://jsfiddle.net/jugal/cABfL/
I'm trying to use highcharts to draw column chart with the following data:
- I have three categories: apples, oranges, peaches
- I have three data series for it: [1, 10, 100], [2, 9, 120], [1, 11, 150]
As you can see y values for different categories have completely different scales and I would like to show them accordingly. I'd like to show three groups of three columns, like this:
1, 2, 1 --- 10, 9, 11 --- 100, 120, 150
But also make sure first group is not completely squeezed into the ground because of the lower values.
Is it possible with highcharts?
You may want to take a look at the dual-axis chart example. Basically, you just need to make sure that you define your data in separate series, with different y-axes.
var chart = new Highcharts.Chart({
//...
yAxis: [
//your yAxis definitions
],
series: [{
name: "Apples",
yAxis: 0, //the index of the yAxis definition you want to use
data: [1,2,1]
}, {
name: "Oranges",
data: [10,9,11]
}, {
name: "Peaches",
data: [100,120,150]
}]
})