I have a spline chart in Highcharts. It has data for 24 hours i.e 24 points. Now during those 24 hours, there are certain incidents that take place which i need to show as points on the spline chart. And there needs to be a tooltip for those points. How do i overlap these points on the spline graph including their tooltip? And these overlapped points need to be mapped to their corresponding time also on the x-axis. Any ideas if this can be done?
This is an example for what i want to do in a JSfiddle:-
http://jsfiddle.net/ttyc5dod/
$(function () {
$('#container').highcharts({
title: {
text: 'Test Graph',
x: -20 //center
},
xAxis: {
categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
},
yAxis: {
title: {
text: 'Availability(%)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Data',
data: [7.0, 6.9, 9.5, 10, 11.2, 12.5, 15.2, 16.5, 13.3, 18.3, 13.9, 9.6, 12, 13, 12, 11.2, 9, 8, 5, 12, 14, 12, 12, 12.5, 10]
}]
});
});
For example, in the following example, between the time 23:00 and 24:00 hours, let's suppose an incident(issue) takes place which has to be shown on this graph. Is there any way to plot a point on this graph between 23:00 and 24:00 which shows the incident and also should have the tooltip telling the details about the incident.enter code here
Any help will be appreciated.
You should be able to add new series (I think the best will be scatter series) and add scatter points them between data points, if the incident occurs.
If you want to add your scatter points on the line of your first series, it should be easy to calculate the right y position for this points.
Here you can see very simple example of adding scatter point in your line, between two points:
function(chart) {
var value1 = chart.series[1].data[23].y,
value2 = chart.series[1].data[24].y;
chart.series[0].addPoint({
x: 23.5,
y: (value1 + value2) / 2,
details: 'this is an accident'
});
}
Here you can see an example how it can work:
http://jsfiddle.net/ttyc5dod/3/
Related
I'm trying to make a histogram using highcharts, but the data is being bucketed by the server so as far as I can tell, I can't use the histogram chart type.
Here's my chart:
Highcharts.chart('container', {
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
type: 'category',
labels: {
rotation: -45
}
},
series: [
{
type: 'variwide',
showInLegend: false,
data: [
{ name: '0.00 - 10.10', y: 13, z: 1260000 },
{ name: '10.10 - 34.14', y: 10, z: 3000000 },
{ name: '34.14 - 54.56', y: 9, z: 2550000 },
{ name: '54.56 - 71.43', y: 15, z: 2110000 },
{ name: '71.43 - 102.09', y: 4.6, z: 3830000 },
{ name: '102.09 - 161.56', y: 1.8, z: 7430000 },
{ name: '161.56 - 217.26', y: 5.7, z: 6960000 },
{ name: '217.26 - 301.65', y: 0.7, z: 10550000 },
{ name: '301.65 - 382.82', y: 2.8, z: 10150000 },
{ name: '382.82 - 874.80', y: 0.2, z: 61500000 }
]
}
]
});
#container {
max-width: 800px;
min-width: 380px;
margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variwide.js"></script>
<div id="container"></div>
As you can see, the labels look pretty bad.
Two solutions, neither of which I can work out how to do:
Rename the points (I can do this) and move them to the right so that they're under the ticks
Better solution: make the x axis linear and have the labels appear in natural places like they would usually on a linear graph, similar to https://www.highcharts.com/demo/histogram . Changing the axis to linear seems to mess everything up on a variwide chart, though…
Any ideas?
Variwide series doesn't support non categorized x axis. It's reported as an issue on github: https://github.com/highcharts/highcharts/issues/7359
Workaround:
Variwide can be simulated by using column series.
Create a separate series for each point and link them together by putting linkedTo: ':previous' in each of them (except of the first one). Then set pointRange for every series. pointRange is series' property and cannot be assigned to individual points - that's why separate series has to be crated for each point.
series: [{
data: [
[5, 99]
],
pointRange: 2
}, {
linkedTo: ':previous',
data: [
[7.5, 72]
],
pointRange: 3
}, {
linkedTo: ':previous',
data: [
[14, 111]
],
pointRange: 10
}]
x position of the point indicates the middle of the column. So if the x = 5 and pointRange = 2 then the column will span from 4 to 6.
Unfortunately Highcharts doesn't handle extremes well while using multiple values of pointRange. Setting x axis minimum fixes it:
xAxis: {
min: 9, // 4 (axis' minimum) + 10 (max point range) / 2 = 9
},
These plotOptions are required to achieve proper widths of columns:
grouping: false,
groupPadding: 0,
pointPadding: 0,
Live demo: http://jsfiddle.net/BlackLabel/27gr3wh8/
API reference: https://api.highcharts.com/highcharts/
I am using Chart.js v2.5.0 to create a chart like this:
Note that sometimes the bar will go over the red dotted line. Sometimes the red dotted line will be at a different position (its normally at 25, but will be at other levels on some months).
My issue is that I want the red dotted lines to extend to the full width of the column. As you can see on the first column the red dotted line only goes halfway into the column. I have the same issue at the other end of the chart, the red dotted line only goes halfway into the column.
My current implementation here is to have a mixed chart, one is a bar chart and another is a line chart - with data like so:
data = {
labels: ['Jan 21st', 'Feb 21st', 'Mar 21st', 'Apr 21st']
datasets: [
{
type: 'bar',
label: 'A',
data: [10, 25, 18, 37],
},
{
type: 'line',
label: 'B',
data: [25, 25, 25, 25],
fill: false,
borderWidth: 1,
borderColor: '#f00',
borderDash: [5,4],
lineTension: 0,
steppedLine: true
}
]
}
Does Chart.js have an option or method for making the red dotted lines extend to the full column width?
I have had another idea, but I am not sure if this is possible: Can I use a bar graph for the red dotted line, and only show the top line of the bar graph?
Unfortunately, there isn't a way to "configure" the chart to achieve what you want. It all has to do with how the line chart scale drawing works. With that said, you can still achieve this behavior by tricking chart.js using some "dummy" data.
Basically, you create a "dummy" first and last label. Then add a corresponding "dummy" first and last value to your bar data array (this data will never be displayed). Then add a corresponding "dummy" first and last value to your line data array, but make sure you set the value the same as the next/prev value to end up with a straight line (otherwise your line will angle at the beginning and end). Here is what I mean.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['dummy1', 'Jan 21st', 'Feb 21st', 'Mar 21st', 'Apr 21st', 'dummy2'],
datasets: [
{
type: 'bar',
label: 'A',
// the 1st and last value are placeholders and never get displayed on the chart
data: [0, 10, 25, 18, 37, 0],
},
{
type: 'line',
label: 'B',
// the 1st and last value are placeholders and never get displayed on the chart
// to get a straight line, the 1st and last values must match the same value as
// the next/prev respectively
data: [25, 25, 25, 25, 25, 25],
fill: false,
borderWidth: 1,
borderColor: '#f00',
borderDash: [5,4],
lineTension: 0,
steppedLine: true
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
// exclude the 1st and last label placeholders by specifying the min/mix ticks
ticks: {
min: 'Jan 21st',
max: 'Apr 21st',
}
}],
}
}
});
Checkout this codepen example to see it in action.
similar to this question, I have a Highcharts spline chart with two y-Axis, the first representing a percentage, having floor and ceiling set at 0 and 100, and the second one an unknown numeric value. Setting the chart height to 200 results in the y-Axis showing 105 as last tick.
$(function () {
$('#container').highcharts({
chart: {
defaultSeriesType: 'spline',
alignTicks: false,
height: 200
},
title: {
text: 'Y axis exceeds `ceiling` value'
},
xAxis: {
showFirstLabel: true,
showLastLabel: true,
labels: {
enabled: false
}
},
yAxis: [{
title: {
text: 'Percentage'
},
floor: 0,
ceiling: 100,
//,
//tickPositioner: function () {
// alert(this.tickPositions[this.tickPositions.length-1]);
//}
},{
title: {
text: 'Number'
},
gridLineWidth: 0,
opposite: true
}],
series: [{
data: [86, 89, 91, 97, 97, 97, 97, 97, 97, 97, 97, 97]
}, {
yAxis: 1,
data: [685, 676, 651, 649, 649, 649, 649, 649, 649, 649, 649, 649]
}]
});
});
JSFiddle
I tried setting minPadding and maxPadding, but that doesn't work. I also tried setting my own tick positions using tickPoisitioner function, but the weird thing here is that the last tick position seems to be 100 (see commented code) but is shown as 105 anyway... Setting startOnTick to false does seem to help setting the last tick right, but that does not quite fit my requirements as I want the labels shown at first and last positions on the axis.
Any help is greatly appreciated.
I have a highstock chart. In that chart I want to set a plotline for a target a user might enter for example.
yAxis: {
plotLines: [{
value: 1000,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Target'
}
}]
},
If the target is within the min and max data range of the series then it shows up on the chart like this: jsFiddle.
But if the plotline is set much higher than the min or max data series then the plotline doesn't show on the chart at all like this: jsFiddle. How can I make sure the plotline shows up on the highstock chart no matter what number the target is?
I think that one idea is to use yAxis.min and yAxis.max for setting the min and max of your axis that will meet your requirements. Here you can find an example how it can work:
yAxis: {
max: 1200,
plotLines: [{
value: 1100,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Target'
}
}]
},
http://jsfiddle.net/bo36afyt/1/
You can also add an invisible series that will take part in calculating your extremes:
var data2 = [];
Highcharts.each(data, function(p, i) {
data2.push([p[0], 1100]);
});
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}, {
name: 'ghost',
data: data2,
enableMouseTracking: false,
color: 'rgba(0,0,0,0)'
}]
http://jsfiddle.net/bo36afyt/2/
I feel this must be easy but I'm just not seeing it. In the following, I want the 0 to be the very centre of the plot.
http://bit.ly/1LE6Cvr
I presumed this could be achieved with the "min" option but it does not work as expected. Instead, the zero point is created at half the charts radius.
Can someone please put me out of my misery? Thanks.
Your problem lies in the data your putting into the chart.
Because all of your plot points are 0 highcharts is adjusting the axis in order to make the data display in a readable manner.
If you adjust the data to a wider spread of numbers 0 becomes the center of the chart.
http://jsfiddle.net/3w8hq9tg/
$(function () {
$('#container').highcharts({
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'line',
name: 'Line',
data: [10, 0, 1, 5, 1, 6, 6, 2]
}]
});
});
I think I may have found a solution myself.
It would seem only way to have to plot point sitting neatly at 0 is to have a "max" value. See example.
But of course in most cases, you cannot just decide on an arbitrary max value if your series is being generated dynamically.
The trick is to determine from the API what the max value for the chart's yAxis dataset is, which if 0, you know there is no data to show, so you then set it dynamically.
See solution