High everyone,
I am trying to get two things to happen. First, I want to create a custom tooltip for a columnrange-type series where the tooltip shows something like HIGH: 'this.point.high' and on a new line "LOW:" 'this.point.low'. Second, I would like these 'low' and 'high' values to populate a form field dynamically. For example, when a user drags the high value for the columnrange entry, I want this to dynamically update a number in the corresponding formfield that collects user input.
Here is a fiddle: https://jsfiddle.net/e9zqmy12/
Code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
var myChart;
Highcharts.setOptions({
plotOptions: {
series: {
animation: false
}
}
});
// draw chart
myChart = Highcharts.chart('container',
{
chart: {
type: "line",
events: {
click: function (e) {
// find the clicked values and the series
var y = Math.round(e.yAxis[0].value),
x=12
series = this.series[3].data[12];
series.update({x, y, color: 'blue'});
},
drag: function (e) {
var y = Math.round(e.yAxis[0].value),
x=12
series = this.series[3].data[12];
series.update({x, y, color: 'blue'});
}
}
},
title: {
text: "Forecasting History"
},
xAxis: {
type: 'category',
allowDecimals: true,
title: {
text: "Quarter"
},
plotBands: [{
color: 'rgba(204,153,255,0.2)', // Color value
from: 11.5, // Start of the plot band
to: 12.5, // End of the plot band
label: {
text: 'Forecast'
}
}]
},
yAxis: {
title: {
text: "Inflation (%)"
},
plotLines: [{
value: 0,
width: 2,
color: '#aaa',
zIndex: 10
}]
},
tooltip: {
style: {
color: 'black',
fontWeight: 'bold',
fontSize: 13
},
positioner: function () {
return { x: 80, y:0 };
},
shared: true,
headerFormat: '',
valueDecimals: 2,
shadow: false,
borderWidth: 2,
borderColor: '#000000',
shape: 'rect',
backgroundColor: 'rgba(255,255,255,0.8)'
},
series: [
{
name: 'Inflation',
data: [3.9,4.98,5.72,5.73,3.61,3.68,3.72,2.64,2.1,1.94,1.99,1.87,null],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
},{
name: 'Central Bank Forecast',
data: [2,3.47,4.2,4.62,4.51,3.079,3.13,3.15,2.43,2.17,1.7,2.17,null],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
},{
name: 'Your Forecast',
showInLegend: false,
data: [null,null,null,null,null,null,null,null,null,null,null,null,2],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
marker: {
radius: 2.5,
fillColor: 'red'
},
},{
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
}
}
},
name: 'Forecast Range',
color: 'rgba(255,0,0,.1)',
type: 'columnrange',
data: [[12,1,3]],
tooltip: {
pointFormatter: function() {
console.log(this);
return "LOW: "+this.point.low + " HIGH:" +this.point.high;
}
},
dragDrop: {
draggableY: true,
groupBy: 'GroupId',
dragMinY: -10,
dragMaxY: 10,
dragPrecisionY: .01,
liveRedraw: false
},
}
],
});
It seems that your code was almost good except this callback pointFormatter callback - notice that this calls for point already, so this.point refers to undefined, it should be:
tooltip: {
pointFormatter: function() {
console.log(this);
return "LOW: " + this.low + " <br>HIGH:" + this.high;
}
},
Demo: https://jsfiddle.net/BlackLabel/vbo6j9em/
Actually the thing is,I want a graph in which the series of data will be shown but not with single y-axis.But with multiple y-axis,let's say i have 8 series of data which will be shown in single chart with single y-axis.What I want it tobe selective i.e the user will click the stream on and off to make it visible or disable it,at the same time the axis of each series of data will also get visible.
Here is the link of desired graph(the graph what i want actually).
`
<!-- Styles -->
<style>
#chartdiv {
width : 140%;
height : 800px;
}
.highcharts-credits {
display: none !important;
}
</style>
<!-- Resources -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highcharts.github.io/export-csv/export-csv.js"></script>
<div id="container" style="min-width: 200px; height: 400px; margin: 0 auto"></div>
<!-- Chart code --> <script>
$(function () {
var lastPart = window.location.pathname.split("/").pop();
$.getJSON('/demo/Devices/chGraph/'+lastPart, function(data) {
// Populate series
Xdata = [];
Ydata = [];
Xdata = data[0].CHGRAPHUpdatetime.time.split(",");
for(i = 0; i< data[0].channelGraph.length; i++) {
Ydata[i] = {"name": "", "data":[]};
Ydata[i].name = data[0].channelGraph[i].chkey;
var listnumber = data[0].channelGraph[i].list.split(',').map(function(item) {
return parseInt(item, 10);
});
Ydata[i].data = listnumber
}
console.log(Ydata);
var chart = new Highcharts.Chart({
chart: {
renderTo: container,
zoomType: 'xy',
panning: true,
panKey: 'shift',
height:600,
width:1000,
borderColor: '#EBBA95',
borderWidth: 4,
spacingTop: 30,
spacingBottom: 50,
spacingLeft: 100,
spacingRight:80
},
title: {
text: 'Monthly Average Temperature'
},
xAxis: {
type: 'varchar',
categories: Xdata
},
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<small>{point.key}</small><table>',
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right"><b>{point.y} </b></td></tr>',
footerFormat: '</table>',
valueDecimals: 2
},
series:Ydata,
},
}) //end ajax call
}) // end javascfrpt
$('#getcsv').click(function () {
alert(chart.getCSV());
});
</script>
<!-- HTML -->
<div id="chartdiv" >
</div>
how to add multiple y axis according to each series data.
we get the data from a json and above code shows only one y axis.
I have attached the image of the graph.
This is the actual graph.
following is the required graph image
This is required graph.
What you want is possible using highcharts here is and example Multiple axes.
Basically you specify value of yAxis property as a list of objects, while creating Chart object and each object represents the kind of line will be drawn for dedicated series.
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}];
One more thing is to specify in series which axis to be used. I your case Ydata[i] is a series, it must have following structure
{
name: 'Sea-Level Pressure',
type: 'spline',
//number of axis to represent scale. 1 is by default for primary yAxis.
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}
So when you get data as response generate listYdata of objects having above structure.
I hope that solves your issue. Here is a demo after adding one more series to official example.
What you most likely need to do is to add the attribute yAxis to the yData array, so that the format will become:
[[name: "x", data: [], yAxis: 1], [name: "y", data: [], yAxis: 2] ]
Make a counter which adds 1 to the yAxis index in each iteration so you assign it to a different yAxis.
The yAxis you need to define in the chart as well
yAxis: [{
title: {
text: 'Title 1'
}
}, {
title: {
text: 'Title 2'
}
}, {
title: {
text: 'Title 3'
},
}],
You can find more information about this in this Highcharts demo
I have this annoying thing in Highcharts that I cannot figure out. I have graphs that are dynamically generated and can contain multiple columns and splines. In the example the spline is a temperature measurement and contains lots of data points. The two columns are grouped by day and therefore contain only one value per day.
When I use this combination the column width becomes almost invisible:
http://jsfiddle.net/FXRj2/
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Test'
},
subtitle: {
text: 'Me'
},
xAxis: [{
type: 'datetime'
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall 2',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} mm',
style: {
color: '#4572A7'
}
},
opposite: true
}, { // Tertiary yAxis
title: {
text: 'Rainfall 2',
style: {
color: '#red'
}
},
labels: {
format: '{value} mm',
style: {
color: '#4red'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Rainfall 1',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [[1374105600000,1461.77],[1374192000000,1473.67],[1374278400000,1122.47],[1374364800000,1170.16],[1374451200000,1436.88],[1374537600000,1383.57],[1374624000000,9.73]],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Rainfall 2',
color: '#red',
type: 'column',
yAxis: 2,
data: [
[1374105600000,3.28],[1374192000000,2.95],[1374278400000,3.12],[1374364800000,3.8],[1374451200000,3.61],[1374537600000,0.39]],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: [[1374105600000,21.9],[1374109200000,21.6],[1374112800000,21.2],[1374116400000,20.8],[1374120000000,20.5],[1374123600000,20],[1374127200000,19.7],[1374130800000,19.6],[1374134400000,19.9],[1374138000000,20.3],[1374141600000,20.9],[1374145200000,21.4],[1374148800000,21.9],[1374152400000,22.5],[1374156000000,23.1],[1374159600000,23.5],[1374163200000,23.9],[1374166800000,23.7],[1374170400000,23.8],[1374174000000,23.3],[1374177600000,23.1],[1374181200000,22.4],[1374184800000,21.9],[1374188400000,21.4],[1374192000000,21],[1374195600000,20.4],[1374199200000,20.1],[1374202800000,19.7],[1374206400000,19.3],[1374210000000,19],[1374213600000,18.7],[1374217200000,18.9],[1374220800000,19.3],[1374224400000,19.8],[1374228000000,20.6],[1374231600000,21.4],[1374235200000,22.1],[1374238800000,22.6],[1374242400000,23.2],[1374246000000,23.5],[1374249600000,23.5],[1374253200000,23.5],[1374256800000,23.1],[1374260400000,23],[1374264000000,22.4],[1374267600000,22],[1374271200000,21.4],[1374274800000,21.2],[1374278400000,20.6],[1374282000000,20.2],[1374285600000,20.3],[1374289200000,20.2],[1374292800000,20],[1374296400000,19.7],[1374300000000,19.3],[1374303600000,19],[1374307200000,18.9],[1374310800000,19],[1374314400000,19.2],[1374318000000,19],[1374321600000,19.7],[1374325200000,19.8],[1374328800000,20.2],[1374332400000,20.6],[1374336000000,21],[1374339600000,21.6],[1374343200000,21.8],[1374346800000,22.1],[1374350400000,22.3],[1374354000000,22.1],[1374357600000,21.5],[1374361200000,21.1],[1374364800000,20.6],[1374368400000,20.1],[1374372000000,19.7],[1374375600000,19.4],[1374379200000,19],[1374382800000,18.6],[1374386400000,18.2],[1374390000000,18.2],[1374393600000,18.6],[1374397200000,19.4],[1374400800000,20.4],[1374404400000,21.6],[1374408000000,22.9],[1374411600000,24.2],[1374415200000,25.4],[1374418800000,26.5],[1374422400000,27.2],[1374426000000,27.8],[1374429600000,28.3],[1374433200000,28.5],[1374436800000,28.4],[1374440400000,27.8],[1374444000000,27.1],[1374447600000,26.2],[1374451200000,25.7],[1374454800000,25],[1374458400000,24.3],[1374462000000,23.8],[1374465600000,23.1],[1374469200000,22.5],[1374472800000,22.1],[1374476400000,22.2],[1374480000000,22.5],[1374483600000,23.1],[1374487200000,23.9],[1374490800000,24.9],[1374494400000,26.1],[1374498000000,27],[1374501600000,27.8],[1374505200000,28.4],[1374508800000,28.9],[1374512400000,29.1],[1374516000000,29.2],[1374519600000,29],[1374523200000,28.7],[1374526800000,28.5],[1374530400000,27.7],[1374534000000,27.3],[1374537600000,26.8],[1374541200000,26.5],[1374544800000,25.9],[1374548400000,25.4],[1374552000000,24.8],[1374555600000,24.1],[1374559200000,23.6],[1374562800000,23.5],[1374566400000,23.8],[1374570000000,24.3],[1374573600000,24.9],[1374577200000,25.5],[1374580800000,25.7],[1374584400000,26.3],[1374588000000,27.3],[1374591600000,28.1],[1374595200000,28.5],[1374598800000,28.9],[1374602400000,29],[1374606000000,29.4],[1374609600000,29.1],[1374613200000,28.9],[1374616800000,28.2],[1374620400000,27.6],[1374624000000,26.9],[1374627600000,26.2],[1374631200000,25.6],[1374634800000,25.1],[1374638400000,24.6],[1374642000000,24.3],[1374645600000,23.7],[1374649200000,23.6],[1374652800000,23.5],[1374656400000,23.9],[1374660000000,24.4],[1374663600000,24.4],[1374667200000,24.3],[1374670800000,24.9],[1374674400000,25.9],[1374678000000,26.3]],
tooltip: {
valueSuffix: '°C'
}
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
I have been searching for ways to dynamically control the width of columns by using pointWidth but this gets me into a hole new area of issues, as I am not always sure if there is a combination of columns and splines and what the date range is.
Is there a trick to solve this? I hope I have missed something simple.
I was reading through the API description of Highcharts when I noticed an option to have multiple x axis. Since my problem seemed to be related to scaling on the x axis I decided to give it a go...
I created a new x axis for the line data and it works like a charm. Of course we do not want to see multiple x axis, so a little fiddling with the settings hides it again.
My x axis definition now looks like this:
xAxis: [{
type: 'datetime',
},{
type: 'datetime',
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
opposite: true,
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
}],
On the data series that has 'too many' points I simply added 'xAxis: 1'.
Fiddle here : http://jsfiddle.net/AM4vx/