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 am creating a chart and have so far found that a scatter and errorbar combination chart is the best fit. I have hit a problem when adding an extra pair of series that because I have used a scatter, that they are placed on top of each other.
This is the standard view for the chart which is correct:
This is what I WANT to happen when I add an extra pair of series data:
But this is what happens:
var chart;
$(function () {
$('#container').highcharts({
title: {
text: 'Chart'
},
tooltip: {
enabled: false
},
xAxis: [{
categories: ['Col1', 'Col2', 'Col3']
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Chart'
}, opposite: true
}
, { // Secondary yAxis
title: {
text: 'Score'
}
}],
plotOptions: {
scatter: {
dataLabels: {
enabled: true,
x: 0,
y: 10
},
enableMouseTracking: false
},
errorbar: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Value',
type: 'scatter',
yAxis: 1,
data: [1001.418, 1000.006, 1005.237],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[0],
padding: 3,
color: '#ffffff',
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1000.46, 1002.376], [999.071, 1000.941], [1002.753, 1007.721]]
},
//START extra data
{
name: 'Compare',
type: 'scatter',
yAxis: 1,
data: [1001.918, 1000.506, 1005.737],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[1],
padding: 3,
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1001.46, 1003.376], [1000.071, 1001.941], [1003.753, 1006.721]]
},
//END extra data
{
//force the ErrorBar icon into the legend
name: 'ErrorBar',
type: 'scatter',
marker: {
symbol: "url(data:image/gif;base64,R0lGODlhDwAMAIAAAFVVVf///yH5BAEHAAEALAAAAAAPAAwAAAIXhI8ZywEN4Yt0UnmjzWtzn4GXWFXJeRQAOw==)"
},
data:[null]
}
]
});
});
<script src="https://ajax.googleapis.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/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
http://jsfiddle.net/ewurrLgk/
I have taken a look through the API and I have tried to use other chart types like Line and Column and although they do align correctly, the error bar pretty much disappears because those chart types start from zero. I've also tried pointPlacement but that just moves them both into the middle. Is what I am trying to do just not possible using a scatter?
You should use pointPlacement, but set per particular series. I prepared a minified demo for you:
series: [{
type: 'scatter',
pointPlacement:-0.2,
data: [51,73]
},{
type: 'scatter',
pointPlacement:0.2,
data: [8,7.6]
},{
type: 'errorbar',
pointPlacement:-0.2,
data: [[48, 51], [68, 73]]
}, {
type: 'errorbar',
pointPlacement:0.2,
data: [[6, 8], [5.9, 7.6]]
}]
http://jsfiddle.net/6e749xx9/1/
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/