I'm trying to show a time series line graph in highcharts - to the left of center is historical data, so the line needs to be solid. To the right of center is predicted data, so the line needs to be dotted or dashed. Is this possible?
Thanks!
Yes, you can, using zones. Zones let you apply different styles within the same series of data, and can be applied against both x- and y-axes.
Examples
Different colors by y-axis value
$(function() {
$('#container').highcharts({
series: [{
data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
zones: [{
value: 0,
color: '#f7a35c',
style: 'dotted',
}, {
value: 10,
color: '#7cb5ec'
}, {
color: '#90ed7d'
}, ]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Different dash styles by x-axis position
$(function() {
$('#container').highcharts({
title: {
text: 'Zone with dash style'
},
subtitle: {
text: 'Dotted line typically signifies prognosis'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
zoneAxis: 'x',
zones: [{
value: 8
}, {
dashStyle: 'dot'
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>
I don't think you can have two different kind of line style in one series, but you can split the series into two, then specify the x coordinates for the second series to start where the first left off. Then you can set the dashStyle of that line.
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
}, {
name: 'New York',
data: [{x: 5, y: 21.5}, {x: 6, y: 22.0}, {x: 7, y: 24.8}, {x: 8, y: 24.1}, {x: 9, y: 20.1}, {x:10, y: 14.1}, {x:11, y: 13}],
dashStyle: 'dash'
}]
Here's a JSFiddle illustrating it: http://jsfiddle.net/mkremer90/zMZEV/1/
Yes. This is possible. Hard to picture your chart but what you could have is 2 series. One is your real data and the other is the predicted/future data. To set the line style use dashStyle.
Yes solid and dashed lines in one line graph is possible .I have implemented it using a java program to create my data for series .
Create two series
series : [
{
name : 'Series 1',
id : 'series1',
data : mydashData,
allowPointSelect : true,
marker: {
enabled: false
}
},
{
name : 'Series 2',
data : myDotData,
dashStyle : 'dot',
id : 'series2',
color : '#A81F40',
allowPointSelect : true,
marker: {
enabled: false
}
}
}
Consider these points
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
From 1 -5 its dashed line .
From 5-10 its dotted Line .
From 10-15 its dashed line again .
Consider some sample X axis Values as you wish.
This is the java logic to create two series data points : -
List dashList;
List dotList;
Initial = FirstPoint ;
LOOP
if Initial == Dash and LastParsedPoint = Dash
add to DashList corresponding to that X axis value
if Initial ==Dot and LastParsePoint = Dot
add to DotList corresponding to that X axis value
if Initial == Dot and LastParsePoint =Dash
add to DashList Y and X values
add to DashList y =NULL and same X value
add to DotList y and X value.
if Initial =Dash and LastParsePoint =Dot
add to DotList Y and X values
add to DotList Y =NULL and same X value
add to DashList Y and X value.
LastParsePoint =Initial
END LOOP.
Send this two list as json to Jsp or HTMl page and assign it to data of both the series .
Here is a sample i created .Please save this code in an HTMl file As Chart.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
var colors = Highcharts.getOptions().colors;
var pathname = window.location.pathname;
//console.log(pathname);
var containerName = 1;
/*Creates a div element by passing index name and class*/
function create_div_dynamic(i, id, className) {
dv = document.createElement('div'); // create dynamically div tag
dv.setAttribute('id', id + i); //give id to it
dv.className = className; // set the style classname
//set the inner styling of the div tag
dv.style.margin = "0px auto";
if (id == 'container') {
//hr = document.createElement('hr');
//br = document.createElement('br');//Break after Each Chart Container and Horizontal Rule.
//document.body.appendChild(br);
//document.body.appendChild(hr);
}
document.body.appendChild(dv);
}
/*Creates a span element by passing index name and class*/
function create_span_dynamic(i, id, className) {
dv = document.createElement('span'); // create dynamically div tag
dv.setAttribute('id', id + i); //append id to to name
dv.className = className; // set the style classname
//set the inner styling of the span tag
dv.style.margin = "0px auto";
document.body.appendChild(dv);
}
/*Get URL Parameters*/
function getUrlParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
$(document).ready(function() {
var json = getUrlParameter('json');
$.ajax({
type: 'GET',
url: json,
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
async: false,
contentType: "application/json",
success: function (datas){
//Each data table column/block index.
var blockNumber = 0;
//Each Row inside block index
var rowNumber = 0;
//Used to store previous charts row index for blank divs generation
var prevRowNum=0;
//Number of blank divs created .
var oldC=0;
//J : Chart Index
for (j = 0; j < 2; j++) {
for ( var key in datas.root[j]) {
var solid = [];
var dot = [];
for (i = 0; i < datas.root[j][key][0].solid.length; i++) {
solid.push([parseInt(datas.root[j][key][0].solid[i].date),parseFloat(datas.root[j][key][0].solid[i].value)|| null ]);
}
for (i = 0; i < datas.root[j][key][0].dot.length; i++) {
dot.push([parseInt(datas.root[j][key][0].dot[i].date),parseFloat(datas.root[j][key][0].dot[i].value)|| null ]);
}
var chartBlock = '';
var k = j;
//Container Name
var renderCont = 'container'+ ++j;
create_div_dynamic(j,'container','image-capture-container');
//Creating Charts
this['chart_' + j] = new Highcharts.Chart(
{
chart : {
renderTo : renderCont,
type : 'line',
zoomType : 'xy',
borderWidth : 0,
borderColor : '#ffffff',
borderRadius : 0,
width : 600,
height : 400,
plotShadow : false,
alignTicks :true,
plotBackgroundColor:'#C0C4C9',
//margin: [15, 10, 40,60],
style : {
//position : 'relative',
opacity : 100,
textAlign : 'center'
}
},
xAxis : {
useHTML : true,
type : 'datetime',
lineColor: '#ffffff',
tickInterval:30 * 24 * 3600 * 1000,
tickColor: '#000000',
tickWidth: 1,
tickLength: 5
},
yAxis : {
title : {
useHTML :'true',
align : 'high',
offset:0,
rotation: 0,
y: 1,
x:-4,
},
lineWidth : 1,
gridLineWidth :2,
minorGridLineWidth : 1,
gridLineColor :'#FFFFFF',
lineColor:'DarkGray',
opposite : false,
maxPadding: 0.2,
labels : {
align : 'right',
x : -5
}
},
series : [
{
name : 'Solid Line',
id : 'series1',
data : solid,
allowPointSelect : true,
color : '#888888',
marker: {
enabled: false
}
},
{
name : 'Dashed',
data : dot,
dashStyle : 'dot',
id : 'series2',
color : '#666666',
allowPointSelect : true,
marker: {
enabled: false
}
}
]
});
create_div_dynamic(j,'main','main');
var main = 'main'+ j;
var chartDiv = $('#'+renderCont).children(":first").attr('id');
//console.log(chartDiv);
create_div_dynamic(j,'title_div','title_div');
$('#' + main).append($('#'+ chartDiv));
$('#' + renderCont).append($('#'+ main));
}
} //End of Each Chart Loop
}
});
});
</script>
</head>
<body id="mainBody">
</body>
</html>
I am posting the sample json in Jsfiddle here:
https://jsfiddle.net/t95r60fc/
Save this json as json1.json and keep it in same directory as Chart.html and open the html in browser as given below :
file:///C:/temp/Chart.html?json=C:/temp/json1.json?callback=jsonCallback
Final output will be like this :
var envelopBorder =[[-20, 63], [-20, 85], null, null,null,null,[19, 130], [35,150], [60,150],[65,148], [80,140],[80,100],[65,82],[55,70],[40,67],[20,63],[15,63],[-20,63]] ;
var dasshedBorder =[[-20, 85],[-20, 100],[1, 130],[19, 130]] ;
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Operating Envelop'
},
xAxis: {
title: {
enabled: true,
text: 'Evaporating Temperature (°F)'
},
gridLineWidth: 0,
lineWidth:1,
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Normal',
data: envelopBorder
}, {
name: 'Dash',
data: dasshedBorder,
dashStyle: 'dash'
}]
});
Result :-
jsfiddle.net/7c9929mg
Related
As shown in screenshot I need my crosshair to move across the points but the tooltip value is snap to next value even the crosshair is not reached that point.I am facing an issue in highcharts. I want when I hover around the chart then crosshair should reflect the value of current point which is being hovered. As shown in code currently its changing values in mid way which is not reflecting right value as respect to crosshair.
Highcharts.chart('container', {
tooltip: {
snap: -1,
crosshairs: true
},
xAxis:{
crosshair: {
interpolate: true,
color: 'gray',
snap: false
},
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
},
series: [{
marker: {
states: {
hover: {
enabled: false
}
}
},
step:'left',
data: [0, 1, 0, 1, 0, 1, 0]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
It's because you set the xAxis.crosschair.snap equal to false. Actually, you can remove the snap: false definition, because it's set to true by default. Then it should behave just like you want.
[EDIT]
If you would like to show current crosschairs xAxis value, it's not implemented in Highcharts, but Highstock has its own xAxis.crosschair.label property which serves the feature you need. Here is the example and documentation:
http://jsfiddle.net/hzcuf68y/
https://api.highcharts.com/highstock/xAxis.crosshair.label
If you don't want to change the Highcharts for Highstock, you can refer to this demo, where the crosschairs and labels are rendered manually: http://jsfiddle.net/mr1c03ae/
Live example: https://jsfiddle.net/n7bawfcg/
API Reference: https://api.highcharts.com/highcharts/xAxis.crosshair.snap
After alot of research I got the solution just posting here if someone may face the same problem. http://jsfiddle.net/F4e2Y/70/
function interpolate(data) {
var resolution = 0.1,
interpolatedData = [];
data.forEach(function(point, i) {
var x;
if (i > 0) {
for (x = data[i - 1].x + resolution; x < point.x; x += resolution) {
interpolatedData.push({
x: Highcharts.correctFloat(x),
y: Highcharts.correctFloat(data[i - 1].y),
});
}
}
interpolatedData.push(point)
});
return interpolatedData;
}
var data = [{
x: 0,
y: 1
}, {
x: 2,
y: 0
}, {
x: 4,
y: 1
}, {
x: 6,
y: 1
}, {
x: 8,
y: 0
}, {
x: 10,
y: 1
}];
Highcharts.chart('container', {
chart:{
zoomType: 'x',
},
tooltip: {
shared: true
},
xAxis: {
crosshair: true
},
series: [{
step:'left',
data: interpolate(data),
}]
});
<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: 300px; height: 300px; margin: 1em"></div>
I'm using a chart with two series as you can see in http://jsfiddle.net/Charissima/zo5j94qz/4/
Is it possible to disable crosshairs for the second series? The problem is, that when the moise pointer is near the black series s2, there is no crosshair for the blue series s1 and I don't need/want crosshairs for the black series but for the blue.
var myData = [];
for (var i = 2; i < 10; i++) {
myData.push([i, i + Math.random() * 3]);
}
var myDataLine = [];
myDataLine.push([0,6]);
myDataLine.push([23,6]);
chart = $('#container').highcharts('StockChart', {
chart : {
zoomType: 'x',
},
series: [{
name: 's1',
data: myData,
type: 'line'
},{
name: 's2',
data: myDataLine,
type: 'line'
}]
});
Defaulty it is not built-in, but you can prepare your own crosshair function like in the example:
mouseOver: function () {
var chart = this.series.chart,
r = chart.renderer,
left = chart.plotLeft,
top = chart.plotTop,
width = chart.plotWidth,
height = chart.plotHeight,
x = this.plotX,
y = this.plotY;
if (this.series.options.enabledCrosshairs) {
crosshair = r.path(['M', left, top + y, 'L', left + width, top + y, 'M', left + x, top, 'L', left + x, top + height])
.attr({
'stroke-width': 1,
stroke: 'red'
})
.add();
}
},
mouseOut: function () {
if (crosshair.d !== UNDEFINED) crosshair.destroy();
}
http://jsfiddle.net/u4ha3cxw/7/
Yes, this is very possible. Use 2 x-axes, one with crosshair's enabled and the other with crosshairs disabled. Then specify which series you would like to use which axis:
Highcharts.chart('container', {
xAxis: [{
crosshair: {
enabled: true,
width: 5
}
}, {
crosshair: false,
visible: false
}],
series: [{
name: 'Series w/ Crosshair',
xAxis: 0, // You could omit this, highcharts uses the first axis in array by default
data: [99.9, 81.5, 76.4, 129.2, 144.0]
},
{
name: 'Series w/o Crosshair',
xAxis: 1,
data: [42.1, 47.5, 150.4, 42.2, 64.0]
}
]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 250px"></div>
I am trying to output JSON data on to Highstock chart. Initially I struggled with the JSON formatted date which I resolved by following instruction on other answer on stackoverflow by re-formatting dates. But I'm still unable to get the graph plotted on view page -
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var mydata =[];
chartOjb = new Object();
$.ajax({
type: "GET",
url: "/ReportIntance/DummyCall/2",
data: '{ }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$.each(data, function (index, item) {
chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10));
chartOjb.data = item.Series1;
mydata.push({
x: new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10)),
y: item.Series1
});
})
},
failure: function (response) {
alert(response);
}
});
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Chart1'
},
title: {
text: 'Delivery Price example using Chart'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Price'
}
},
series: [ { data: mydata }]
});
});
</script>
<div id="Chart1" style="height: 500px; min-width: 500px"></div>
My JSON string is -
[{"DayDate":"\/Date(1334704500000)\/","Series1":4.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334705400000)\/","Series1":5.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334706300000)\/","Series1":4.51,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334707200000)\/","Series1":6.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334708100000)\/","Series1":4.71,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334709000000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334709900000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}]
Currently I'm trying to output simple line chart and using only DayDate (X-axis) and 'Series1' as Y-axis.
Highstock chart shows just 'x axis' but no line graph or y axis is shown.
Can someone point me what I'm doing wrong? Any help will be appreciated.
Edit:
After setting turboThresold field I can now see the X Axis on my highstock chart. However values from y axis are still missing.
This is how graph looks without any y axis lines. The data seems to be correct
Here's my updated code -
$(function () {
var mydata = [];
chartOjb = new Object();
// See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
$.getJSON('/ReportIntance/DummyCall/2', function (data) {
// Add a null value for the end date
//data = [].concat(data, [[Date.UTC(2013, 9, 14, 19, 59), null, null, null, null]]);
$.each(data, function (index, item) {
chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10));
chartOjb.data = item.Series1;
mydata.push({ x: chartOjb.name, y: parseFloat(chartOjb.data) });
//alert(chartOjb.name + "/" + chartOjb.data);
});
// create the chart
$('#container').highcharts('StockChart', {
chart: {
//type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: mydata
}
},
scrollbar: {
liveRedraw: false
},
title: {
text: 'Historical prices from June 2012'
},
subtitle: {
text: 'Displaying 20K records using Highcharts Stock by using JSON'
},
plotOptions: {
line: {
turboThreshold: 20450
}
},
xAxis: {
type: 'datetime',
title: 'Time',
minRange: 3600 * 1000/15 // one hour
},
yAxis:{
title: {
text: 'Prices',
style: {
color: '#89A54E'
}
},
lineWidth: 1,
opposite: false,
showEmpty: false //hides empty data series
},
series: [{
data: data,
pointStart: Date.UTC(2012, 6, 1), // first of June
pointInterval: 3600 * 1000/15,
dataGrouping: {
enabled: false
}
}]
});
});
});
Thanks to Sebastian, I can now see the graphs. Only issue I had was that I wasn't pointing to correct 'data' Your suggestion to not convert to datetime improved the performance
The default highstock chart has height = 400px.
How can height chart be set for auto size based on chart axis and its sizes ?
See the example bellow, the navigation bar is over the volume panel.
http://jsfiddle.net/BYNsJ/
I know that I can set the height for the div but I have a solution that insert/remove axis/series dynamically in the chart and would be nice an auto height chart.
The example is the same Candlestick/Volume demo from Highchart site, but without height property in the div container.
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length;
for (i = 0; i < dataLength; i++) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
Regards.
here is one example which is resize chart according screen.
http://jsfiddle.net/davide_vallicella/LuxFd/2/
Just don't set the height property in HighCharts and it will handle it dynamically for you so long as you set a height on the chart's containing element. It can be a fixed number or a even a percent if position is absolute.
http://api.highcharts.com/highcharts/chart.height
By default the height is calculated from the offset height of the containing element
find example here:- http://jsfiddle.net/wkkAd/149/
#container {
width:100%;
height:100%;
position:absolute;
}
hey I was using angular 2+ and highchart/highstock v.5, I think it will work in JS or jQuery also, here is a easy solution
HTML
<div id="container">
<chart type="StockChart" [options]="stockValueOptions"></chart>
</div>
CSS
#container{
height: 90%;
}
TS
this.stockValueOptions = {
chart: {
renderTo: 'container'
},
yAxis: [{
height: '60%'
},{
top: '65%',
height: '35%'
}]
}
Its working, and a easy one. Remove chart height add height in '%' for the yAxis.
Highcharts does not support dynamic height, you can achieve it by $(window).resize event:
$(window).resize(function()
{
chart.setSize(
$(document).width(),
$(document).height()/2,
false
);
});
See demo fiddle here.
You can set chart.height dynamically with chart.update method.
http://api.highcharts.com/highcharts/Chart.update
function resizeChartFromValues (chart) {
const pixelsForValue = 10
const axis = chart.yAxis[0]
chart.update({ chart: { height: (axis.max - axis.min) * pixelsForValue } })
}
const options = {
chart: {
events: {
load () {resizeChartFromValues(this)}
}
},
series: [{
data: [30, 70, 100],
}]
}
const chart = Highcharts.chart('container', options)
setTimeout(() => {
chart.series[0].setData([10, 20, 30])
resizeChartFromValues(chart)
}, 1000)
Live example: https://jsfiddle.net/a97fgsmc/
I had the same problem and I fixed it with:
<div id="container" style="width: 100%; height: 100%; position:absolute"></div>
No special options to the chart. The chart fits perfect to the browser even if I resize it.
Im using multiple highchart chart inside my page and i use addpoint function to update the chart.
the problem is after some time the chart will be compressed into less than a half of original chart size.
i captured my screen which could be found here for make the problem clear:
http://www.screenr.com/f3E7
sample chart generation code:
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
//var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'ch_trafficio',
type: 'spline',
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
var series1= this.series[1];
}
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
plotOptions : {
area : {
lineWidth : 1,
marker : {
enabled : false,
states : {
hover : {
enabled : true,
radius : 5
}
}
},
shadow : false,
states : {
hover : {
lineWidth : 1
}
}
}
},
legend: {
enabled: true
},
exporting: {
enabled: true
},
series: [{
name: 'InBound',
type : "area",
color: '#89A54E',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -119; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
},{
name: 'OutBound',
type : "area",
color: '#AA4643',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -119; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}
]
});
chart update functions:
chart.series[0].addPoint([x,data.oid1], false, true);
chart.series[1].addPoint([x,data.oid2], true, true);
chart1.series[0].addPoint([x,data.oid5], true, true);
chart2.series[0].addPoint([x,data.oid3], false, true);
chart2.series[1].addPoint([x,data.oid4], true, true);
chart3.series[0].addPoint([x,data.oid7], true, true);
thanks in advance
you need to add a shifting parameter for your points to shift over the chart
var series = chart.series[0],
shift = series.data.length > 100; // shift if the series is longer than 100
and to change adding point like below
chart.series[0].addPoint([x,data.oid1], true, shift);
example here