Some series are not visible in a time serie chart with columns - highcharts
I want to build and display a time serie chart with n columns by date but some series are not visible.
Here is the chart :
How can see the 4 series without zoom in ? Only 2 are displayed.
When I click on a serie to set it visible/unvisible it hides or display one of previous unvisible serie.
What if I want to display 10 or more series ?
I tried to make the div scrollable and set a width to the chart but it doesn't work either.
Highcharts.chart('container', {
chart: {
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
},
yAxis: {
min: 0
},
plotOptions: {
series: {
}
},
series: [{
name: "1",
type:'column',
data: [
[Date.UTC(1970, 9, 15), 0.5],
[Date.UTC(1970, 9, 31), 0.5],
[Date.UTC(1970, 10, 7), 0.5],
[Date.UTC(1970, 10, 10), 0.5],
[Date.UTC(1970, 11, 10), 0.5],
[Date.UTC(1970, 11, 13), 0.5],
[Date.UTC(1970, 11, 16), 0.5],
[Date.UTC(1970, 11, 19), 0.5],
[Date.UTC(1970, 11, 22), 0.5],
[Date.UTC(1970, 11, 25), 0.5],
[Date.UTC(1970, 11, 28), 0.5],
[Date.UTC(1971, 0, 16), 0.5],
[Date.UTC(1971, 0, 19), 0.5],
[Date.UTC(1971, 0, 22), 0.5],
[Date.UTC(1971, 0, 25), 0.5],
[Date.UTC(1971, 0, 28), 0.5],
[Date.UTC(1971, 0, 31), 0.5],
[Date.UTC(1971, 1, 4), 0.5],
[Date.UTC(1971, 1, 7), 0.5],
[Date.UTC(1971, 1, 10), 0.5],
[Date.UTC(1971, 1, 13), 0.5],
[Date.UTC(1971, 1, 16), 0.5],
[Date.UTC(1971, 1, 19), 0.5],
[Date.UTC(1971, 1, 22), 0.5],
[Date.UTC(1971, 1, 25), 0.5],
[Date.UTC(1971, 1, 28), 0.5],
[Date.UTC(1971, 2, 4), 0.5],
[Date.UTC(1971, 2, 7), 0.5],
[Date.UTC(1971, 2, 10), 0.5],
[Date.UTC(1971, 2, 13), 0.5],
[Date.UTC(1971, 2, 16), 0.5],
[Date.UTC(1971, 2, 19), 0.5],
[Date.UTC(1971, 2, 22), 0.5],
[Date.UTC(1971, 2, 25), 0.5],
[Date.UTC(1971, 2, 27), 0.5],
[Date.UTC(1971, 2, 30), 0.5],
[Date.UTC(1971, 3, 3), 0.5],
[Date.UTC(1971, 3, 6), 0.5],
[Date.UTC(1971, 3, 9), 0.5],
[Date.UTC(1971, 3, 12), 0.5],
[Date.UTC(1971, 3, 15), 0.5],
[Date.UTC(1971, 3, 18), 0.5],
[Date.UTC(1971, 3, 21), 0.5],
[Date.UTC(1971, 3, 24), 0.5],
[Date.UTC(1971, 3, 27), 0.5],
[Date.UTC(1971, 3, 30), 0.5],
[Date.UTC(1971, 4, 3), 0.5],
[Date.UTC(1971, 4, 6), 0.5],
[Date.UTC(1971, 4, 9), 0.5],
[Date.UTC(1971, 4, 12), 0.5],
[Date.UTC(1971, 4, 15), 0.5],
[Date.UTC(1971, 4, 18), 0.5],
[Date.UTC(1971, 4, 21), 0.5],
[Date.UTC(1971, 4, 25), 0.5]
]
}, {
name: "2",
type:'column',
data: [
[Date.UTC(1970, 9, 15), 1],
[Date.UTC(1970, 9, 31), 1],
[Date.UTC(1970, 10, 7),1],
[Date.UTC(1970, 10, 10), 1],
[Date.UTC(1970, 11, 10), 1],
[Date.UTC(1970, 11, 13), 1],
[Date.UTC(1970, 11, 16), 1],
[Date.UTC(1970, 11, 19), 1],
[Date.UTC(1970, 11, 22), 1],
[Date.UTC(1970, 11, 25), 1],
[Date.UTC(1970, 11, 28), 1],
[Date.UTC(1971, 0, 16), 1],
[Date.UTC(1971, 0, 19), 1],
[Date.UTC(1971, 0, 22), 1],
[Date.UTC(1971, 0, 25), 1],
[Date.UTC(1971, 0, 28), 1],
[Date.UTC(1971, 0, 31), 1],
[Date.UTC(1971, 1, 4), 1],
[Date.UTC(1971, 1, 7), 1],
[Date.UTC(1971, 1, 10), 1],
[Date.UTC(1971, 1, 13), 1],
[Date.UTC(1971, 1, 16), 1],
[Date.UTC(1971, 1, 19), 1],
[Date.UTC(1971, 1, 22), 1],
[Date.UTC(1971, 1, 25), 1],
[Date.UTC(1971, 1, 28), 1],
[Date.UTC(1971, 2, 4), 1],
[Date.UTC(1971, 2, 7), 1],
[Date.UTC(1971, 2, 10), 1],
[Date.UTC(1971, 2, 13), 1],
[Date.UTC(1971, 2, 16), 1],
[Date.UTC(1971, 2, 19), 1],
[Date.UTC(1971, 2, 22), 1],
[Date.UTC(1971, 2, 25), 1],
[Date.UTC(1971, 2, 27), 1],
[Date.UTC(1971, 2, 30), 1],
[Date.UTC(1971, 3, 3), 1],
[Date.UTC(1971, 3, 6), 1],
[Date.UTC(1971, 3, 9), 1],
[Date.UTC(1971, 3, 12), 1],
[Date.UTC(1971, 3, 15), 1],
[Date.UTC(1971, 3, 18), 1],
[Date.UTC(1971, 3, 21), 1],
[Date.UTC(1971, 3, 24), 1],
[Date.UTC(1971, 3, 27), 1],
[Date.UTC(1971, 3, 30), 1],
[Date.UTC(1971, 4, 3), 1],
[Date.UTC(1971, 4, 6), 1],
[Date.UTC(1971, 4, 9), 1],
[Date.UTC(1971, 4, 12), 1],
[Date.UTC(1971, 4, 15), 1],
[Date.UTC(1971, 4, 18), 1],
[Date.UTC(1971, 4, 21), 1],
[Date.UTC(1971, 4, 25), 1]
]
}, {
name: "3",
type:'column',
data: [
[Date.UTC(1970, 9, 15), 1.5],
[Date.UTC(1970, 9, 31), 1.5],
[Date.UTC(1970, 10, 7), 1.5],
[Date.UTC(1970, 10, 10), 1.5],
[Date.UTC(1970, 11, 10), 1.5],
[Date.UTC(1970, 11, 13), 1.5],
[Date.UTC(1970, 11, 16), 1.5],
[Date.UTC(1970, 11, 19), 1.5],
[Date.UTC(1970, 11, 22), 1.5],
[Date.UTC(1970, 11, 25), 1.5],
[Date.UTC(1970, 11, 28), 1.5],
[Date.UTC(1971, 0, 16), 1.5],
[Date.UTC(1971, 0, 19), 1.5],
[Date.UTC(1971, 0, 22), 1.5],
[Date.UTC(1971, 0, 25), 1.5],
[Date.UTC(1971, 0, 28), 1.5],
[Date.UTC(1971, 0, 31), 1.5],
[Date.UTC(1971, 1, 4), 1.5],
[Date.UTC(1971, 1, 7), 1.5],
[Date.UTC(1971, 1, 10), 1.5],
[Date.UTC(1971, 1, 13), 1.5],
[Date.UTC(1971, 1, 16), 1.5],
[Date.UTC(1971, 1, 19), 1.5],
[Date.UTC(1971, 1, 22), 1.5],
[Date.UTC(1971, 1, 25), 1.5],
[Date.UTC(1971, 1, 28), 1.5],
[Date.UTC(1971, 2, 4), 1.5],
[Date.UTC(1971, 2, 7), 1.5],
[Date.UTC(1971, 2, 10), 1.5],
[Date.UTC(1971, 2, 13), 1.5],
[Date.UTC(1971, 2, 16), 1.5],
[Date.UTC(1971, 2, 19), 1.5],
[Date.UTC(1971, 2, 22), 1.5],
[Date.UTC(1971, 2, 25), 1.5],
[Date.UTC(1971, 2, 27), 1.5],
[Date.UTC(1971, 2, 30), 1.5],
[Date.UTC(1971, 3, 3), 1.5],
[Date.UTC(1971, 3, 6), 1.5],
[Date.UTC(1971, 3, 9), 1.5],
[Date.UTC(1971, 3, 12), 1.5],
[Date.UTC(1971, 3, 15), 1.5],
[Date.UTC(1971, 3, 18), 1.5],
[Date.UTC(1971, 3, 21), 1.5],
[Date.UTC(1971, 3, 24), 1.5],
[Date.UTC(1971, 3, 27), 1.5],
[Date.UTC(1971, 3, 30), 1.5],
[Date.UTC(1971, 4, 3), 1.5],
[Date.UTC(1971, 4, 6), 1.5],
[Date.UTC(1971, 4, 9), 1.5],
[Date.UTC(1971, 4, 12), 1.5],
[Date.UTC(1971, 4, 15), 1.5],
[Date.UTC(1971, 4, 18), 1.5],
[Date.UTC(1971, 4, 21), 1.5],
[Date.UTC(1971, 4, 25), 1.5]
]
},
{
name: "4",
type:'column',
data: [
[Date.UTC(1970, 9, 15), 0],
[Date.UTC(1970, 9, 31), 0.09],
[Date.UTC(1970, 10, 7), 0.17],
[Date.UTC(1970, 10, 10), 0.1],
[Date.UTC(1970, 11, 10), 0.1],
[Date.UTC(1970, 11, 13), 0.1],
[Date.UTC(1970, 11, 16), 0.11],
[Date.UTC(1970, 11, 19), 0.11],
[Date.UTC(1970, 11, 22), 0.08],
[Date.UTC(1970, 11, 25), 0.23],
[Date.UTC(1970, 11, 28), 0.37],
[Date.UTC(1971, 0, 16), 0.68],
[Date.UTC(1971, 0, 19), 0.55],
[Date.UTC(1971, 0, 22), 0.4],
[Date.UTC(1971, 0, 25), 0.4],
[Date.UTC(1971, 0, 28), 0.37],
[Date.UTC(1971, 0, 31), 0.43],
[Date.UTC(1971, 1, 4), 0.42],
[Date.UTC(1971, 1, 7), 0.39],
[Date.UTC(1971, 1, 10), 0.39],
[Date.UTC(1971, 1, 13), 0.39],
[Date.UTC(1971, 1, 16), 0.39],
[Date.UTC(1971, 1, 19), 0.35],
[Date.UTC(1971, 1, 22), 0.45],
[Date.UTC(1971, 1, 25), 0.62],
[Date.UTC(1971, 1, 28), 0.68],
[Date.UTC(1971, 2, 4), 0.68],
[Date.UTC(1971, 2, 7), 0.65],
[Date.UTC(1971, 2, 10), 0.65],
[Date.UTC(1971, 2, 13), 0.75],
[Date.UTC(1971, 2, 16), 0.86],
[Date.UTC(1971, 2, 19), 1.14],
[Date.UTC(1971, 2, 22), 1.2],
[Date.UTC(1971, 2, 25), 1.27],
[Date.UTC(1971, 2, 27), 1.12],
[Date.UTC(1971, 2, 30), 0.98],
[Date.UTC(1971, 3, 3), 0.85],
[Date.UTC(1971, 3, 6), 1.04],
[Date.UTC(1971, 3, 9), 0.92],
[Date.UTC(1971, 3, 12), 0.96],
[Date.UTC(1971, 3, 15), 0.94],
[Date.UTC(1971, 3, 18), 0.99],
[Date.UTC(1971, 3, 21), 0.96],
[Date.UTC(1971, 3, 24), 1.15],
[Date.UTC(1971, 3, 27), 1.18],
[Date.UTC(1971, 3, 30), 1.12],
[Date.UTC(1971, 4, 3), 1.06],
[Date.UTC(1971, 4, 6), 0.96],
[Date.UTC(1971, 4, 9), 0.87],
[Date.UTC(1971, 4, 12), 0.88],
[Date.UTC(1971, 4, 15), 0.79],
[Date.UTC(1971, 4, 18), 0.54],
[Date.UTC(1971, 4, 21), 0.34],
[Date.UTC(1971, 4, 25), 0]
]
}],
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
To make the chart scrollable, you can use scrollablePlotArea feature.
chart: {
scrollablePlotArea: {
minWidth: 1600
}
}
Live demo: http://jsfiddle.net/BlackLabel/pm2ky5uw/
API Reference: https://api.highcharts.com/highcharts/chart.scrollablePlotArea
However, maybe some other series type will present data in a more visible way? Highcharts JS demos.
You can also consider using Highcharts Stock if columns are a must.
Related
drawing start and end time as intervall in one thick line
I am trying to draw some highcharts graph where the time intervals is being displayed as a thick line based on the date in one line so my series data are start and end times (Timestamp Objects from the database).
Highcharts.chart('container', {
chart: {
spacingTop: 0,
paddingTop: 0,
zoomType: 'x'
},
title: {
text: 'Workink time'
},
yAxis: {
title: {
text: 'Driving time'
}
},
xAxis: {
type: 'datetime',
},
series: [{
name: 'Date',
data: [
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}]
});
It could be look like this picture.
You can add a serie for each of your start and end date tuple, link all of them the first series by setting an id for the first serie
id: 'Installation'
and using
linkedTo: 'Installation',
and set the same color
var color = '#7cb5ec';
this is how the series should look like
series: [{
id: 'Installation',
name: 'Installation',
color: color,
data: [[Date.UTC(1970, 9, 21), 1], [Date.UTC(1970, 9, 22), 1]]
}, {
name: 'Manufacturing',
linkedTo: 'Installation',
color: color,
data: [[Date.UTC(1970, 9, 23), 1], [Date.UTC(1970, 9, 24), 1]]
}, {
name: 'Sales & Distribution',
linkedTo: 'Installation',
color: color,
data: [[Date.UTC(1970, 9, 25), 1], [Date.UTC(1970, 9, 30), 1]]
}, {
name: 'Project Development',
linkedTo: 'Installation',
color: color,
data: [[Date.UTC(1970, 10, 5), 1], [Date.UTC(1970, 10, 10), 1]]
}, {
name: 'Other',
linkedTo: 'Installation',
color: color,
data: [[Date.UTC(1970, 10, 12), 1], [Date.UTC(1970, 10, 30), 1]]
}]
here if the full fiddle http://jsfiddle.net/32mhbyc5/
As I am unsure what the data in your example is meant to represent, I have used the data as #Liviu Boboia parsed it, to provide another example of how to create the broken line visual using the columnrange series type.
Code:
series: [{
data: [
[1, Date.UTC(1970, 9, 21), Date.UTC(1970, 9, 22)],
[1, Date.UTC(1970, 9, 23), Date.UTC(1970, 9, 24)],
[1, Date.UTC(1970, 9, 25), Date.UTC(1970, 9, 30)],
[1, Date.UTC(1970, 10, 5), Date.UTC(1970, 10, 10)],
[1, Date.UTC(1970, 10, 12), Date.UTC(1970, 10, 30)]
]
}]
Fiddle:
http://jsfiddle.net/jlbriggs/0jme6at3/
Output:
setting one array for X axis (in time, each day) and for series only set Y points
How can I set only one time X axis points array in utc datetime.
(even better if there is startPoint:dateFrom and endPoint:DateEnd for for each day)
Then in series I put only Y points for each my charttype ?
is this possible ? Because actually my series object have this data :
let data = [{
"name": "< 100 MB",
"type": "column",
"data": [
[Date.UTC(2013, 7, 1), 2],
[Date.UTC(2013, 7, 2), 3],
[Date.UTC(2013, 7, 3), 3],
[Date.UTC(2013, 7, 4), 2],
[Date.UTC(2013, 7, 5), 1]
]
}, {
"name": "< 10 MB",
"type": "column",
"data": [
[Date.UTC(2013, 7, 1), 3],
[Date.UTC(2013, 7, 2), 3],
[Date.UTC(2013, 7, 3), 2],
[Date.UTC(2013, 7, 4), 4],
[Date.UTC(2013, 7, 5), 10]
]
}, {
"name": "< 1 MB",
"type": "column",
"data": [
[Date.UTC(2013, 7, 1), 2],
[Date.UTC(2013, 7, 2), 3],
[Date.UTC(2013, 7, 3), 2],
[Date.UTC(2013, 7, 4), 3],
[Date.UTC(2013, 7, 5), 5]
]
}];
You can see all my X axis are same... how can improve this ?
Set highcharts datalabel as dropdown list
It's possible to set the datalabel as a dropdown menu list? The problem appear when i have more than six label on my charts, and they overflow from the container.
You want to display dataLabels for points only for one series, chosen by user via dropdown? In that case, simply update series with proper options: http://jsfiddle.net/qwPQj/1/
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Various point on range year'
},
subtitle: {
text: 'Example of Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'BOND'
},
min: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
}
},
series: [{
name: 'Test1',
data: [
[Date.UTC(1970, 9, 27), 0 ],
[Date.UTC(1970, 10, 10), 0.6 ],
[Date.UTC(1970, 10, 18), 0.7 ],
[Date.UTC(1970, 11, 2), 0.8 ],
[Date.UTC(1970, 11, 9), 0.6 ],
[Date.UTC(1970, 11, 16), 0.6 ],
[Date.UTC(1970, 11, 28), 0.67],
[Date.UTC(1971, 0, 1), 0.81],
[Date.UTC(1971, 0, 8), 0.78],
[Date.UTC(1971, 0, 12), 0.98],
[Date.UTC(1971, 0, 27), 1.84],
[Date.UTC(1971, 1, 10), 1.80],
[Date.UTC(1971, 1, 18), 1.80],
[Date.UTC(1971, 1, 24), 1.92],
[Date.UTC(1971, 2, 4), 2.49],
[Date.UTC(1971, 2, 11), 2.79],
[Date.UTC(1971, 2, 15), 2.73],
[Date.UTC(1971, 2, 25), 2.61],
[Date.UTC(1971, 3, 2), 2.76],
[Date.UTC(1971, 3, 6), 2.82],
[Date.UTC(1971, 3, 13), 2.8 ],
[Date.UTC(1971, 4, 3), 2.1 ],
[Date.UTC(1971, 4, 26), 1.1 ],
[Date.UTC(1971, 5, 9), 0.25],
[Date.UTC(1971, 5, 12), 0 ]
]
}, {
name: 'Test2',
data: [
[Date.UTC(1970, 9, 18), 0 ],
[Date.UTC(1970, 9, 26), 0.2 ],
[Date.UTC(1970, 11, 1), 0.47],
[Date.UTC(1970, 11, 11), 0.55],
[Date.UTC(1970, 11, 25), 1.38],
[Date.UTC(1971, 0, 8), 1.38],
[Date.UTC(1971, 0, 15), 1.38],
[Date.UTC(1971, 1, 1), 1.38],
[Date.UTC(1971, 1, 8), 1.48],
[Date.UTC(1971, 1, 21), 1.5 ],
[Date.UTC(1971, 2, 12), 1.89],
[Date.UTC(1971, 2, 25), 2.0 ],
[Date.UTC(1971, 3, 4), 1.94],
[Date.UTC(1971, 3, 9), 1.91],
[Date.UTC(1971, 3, 13), 1.75],
[Date.UTC(1971, 3, 19), 1.6 ],
[Date.UTC(1971, 4, 25), 0.6 ],
[Date.UTC(1971, 4, 31), 0.35],
[Date.UTC(1971, 5, 7), 0 ]
]
}, {
name: 'Test 3',
data: [
[Date.UTC(1970, 9, 9), 0 ],
[Date.UTC(1970, 9, 14), 0.15],
[Date.UTC(1970, 10, 28), 0.35],
[Date.UTC(1970, 11, 12), 0.46],
[Date.UTC(1971, 0, 1), 0.59],
[Date.UTC(1971, 0, 24), 0.58],
[Date.UTC(1971, 1, 1), 0.62],
[Date.UTC(1971, 1, 7), 0.65],
[Date.UTC(1971, 1, 23), 0.77],
[Date.UTC(1971, 2, 8), 0.77],
[Date.UTC(1971, 2, 14), 0.79],
[Date.UTC(1971, 2, 24), 0.86],
[Date.UTC(1971, 3, 4), 0.8 ],
[Date.UTC(1971, 3, 18), 0.94],
[Date.UTC(1971, 3, 24), 0.9 ],
[Date.UTC(1971, 4, 16), 0.39],
[Date.UTC(1971, 4, 21), 0 ]
]
},
{
name: 'Test 4',
data: [
[Date.UTC(1970, 9, 9), 0 ],
[Date.UTC(1970, 9, 14), 0.75],
[Date.UTC(1970, 10, 28), 0.35],
[Date.UTC(1970, 11, 12), 0.46],
[Date.UTC(1971, 0, 1), 0.59],
[Date.UTC(1971, 0, 24), 0.58],
[Date.UTC(1971, 1, 1), 0.62],
[Date.UTC(1971, 1, 7), 0.65],
[Date.UTC(1971, 1, 23), 0.77],
[Date.UTC(1971, 2, 8), 0.77],
[Date.UTC(1971, 2, 14), 0.79],
[Date.UTC(1971, 2, 24), 2.86],
[Date.UTC(1971, 3, 4), 0.8 ],
[Date.UTC(1971, 3, 18), 0.94],
[Date.UTC(1971, 3, 24), 0.9 ],
[Date.UTC(1971, 4, 16), 1.39],
[Date.UTC(1971, 4, 21), 0 ]
]
},
{
name: 'Test5',
data: [
[Date.UTC(1970, 9, 28), 0 ],
[Date.UTC(1970, 9, 16), 0.7 ],
[Date.UTC(1970, 11, 21), 0.87],
[Date.UTC(1970, 11, 21), 1.55],
[Date.UTC(1970, 11, 15), 1.38],
[Date.UTC(1971, 0, 18), 1.38],
[Date.UTC(1971, 0, 15), 1.38],
[Date.UTC(1971, 1, 1), 1.38],
[Date.UTC(1971, 1, 8), 1.48],
[Date.UTC(1971, 1, 21), 1.5 ],
[Date.UTC(1971, 2, 12), 1.89],
[Date.UTC(1971, 2, 15), 2.0 ],
[Date.UTC(1971, 3, 14), 1.94],
[Date.UTC(1971, 3, 19), 3.91],
[Date.UTC(1971, 3, 13), 3.75],
[Date.UTC(1971, 3, 19), 1.6 ],
[Date.UTC(1971, 4, 25), 1.6 ],
[Date.UTC(1971, 4, 31), 0.35],
[Date.UTC(1971, 5, 7), 1 ]
]
}]
});
$("#s").change(function(){
var selected = this.value;
var chart = $('#container').highcharts();
$(chart.series).each(function(i, e) {
e.update({
dataLabels: {
enabled: i == selected
}
}, false);
});
chart.redraw();
});
Note: You have errors in console, you should sort data for series by x-values ascending.
Highcharts: X-axis, plot points and horizontal scrolling
Not sure how to word this, but here goes.
I want my X-axis to be at 1 day intervals, however, I want the actual plot points between days to be at a 5 minute interval. How do I do this? And since there are so many plot points, I'm sure I will need some sort of horizontal scrolling option? Right now my chart is so compact!
Note: Every plot point is a 5 minute time interval starting at 7am and ending at 11pm
Code is below:
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
credits: {
text: 'XML Feed',
href: 'utlfeed.aspx?campus=PR&room=B325'
},
title: {
text: 'PR-B325 Room Utilization',
x: -20 //center
},
subtitle: {
text: 'Source: FreePC',
x: -20
},
xAxis: {
type: 'datetime',
maxZoom: 14 * 24 * 3600000, // fourteen days
tickInterval: 24 * 3600 * 1000
// categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Availability'
},
min: 0,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ' PCs'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Available',
color: '#00FF00',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2013, 9, 17),
data: [[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 21],[Date.UTC(2013, 9, 17), 21],[Date.UTC(2013, 9, 17), 20],[Date.UTC(2013, 9, 17), 19],[Date.UTC(2013, 9, 17), 16],[Date.UTC(2013, 9, 17), 13],[Date.UTC(2013, 9, 17), 10],[Date.UTC(2013, 9, 17), 8],[Date.UTC(2013, 9, 17), 7],[Date.UTC(2013, 9, 17), 5],[Date.UTC(2013, 9, 17), 4],[Date.UTC(2013, 9, 17), 2],[Date.UTC(2013, 9, 17), 2],[Date.UTC(2013, 9, 17), 2],[Date.UTC(2013, 9, 17), 2],[Date.UTC(2013, 9, 17), 2],[Date.UTC(2013, 9, 17), 2],[Date.UTC(2013, 9, 17), 2],[Date.UTC(2013, 9, 17), 3],[Date.UTC(2013, 9, 17), 3],[Date.UTC(2013, 9, 17), 4],[Date.UTC(2013, 9, 17), 3],[Date.UTC(2013, 9, 17), 7],[Date.UTC(2013, 9, 17), 11],[Date.UTC(2013, 9, 17), 13],[Date.UTC(2013, 9, 17), 20],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 29],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 33],[Date.UTC(2013, 9, 20), 12],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 39],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 39],[Date.UTC(2013, 9, 20), 35],[Date.UTC(2013, 9, 20), 37],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 35],[Date.UTC(2013, 9, 20), 35],[Date.UTC(2013, 9, 20), 35],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 3],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 1],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 35],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 35],[Date.UTC(2013, 9, 20), 35],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 39],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 36],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 21), 40],[Date.UTC(2013, 9, 21), 40],[Date.UTC(2013, 9, 21), 40],[Date.UTC(2013, 9, 21), 40],[Date.UTC(2013, 9, 21), 40],[Date.UTC(2013, 9, 21), 40],[Date.UTC(2013, 9, 21), 40],[Date.UTC(2013, 9, 21), 40],[Date.UTC(2013, 9, 21), 40],[Date.UTC(2013, 9, 21), 39],[Date.UTC(2013, 9, 21), 39],[Date.UTC(2013, 9, 21), 39],[Date.UTC(2013, 9, 21), 39],[Date.UTC(2013, 9, 21), 39],[Date.UTC(2013, 9, 21), 39],[Date.UTC(2013, 9, 21), 38],[Date.UTC(2013, 9, 21), 36],[Date.UTC(2013, 9, 21), 35],[Date.UTC(2013, 9, 21), 33],[Date.UTC(2013, 9, 21), 32],[Date.UTC(2013, 9, 21), 32],[Date.UTC(2013, 9, 21), 32],[Date.UTC(2013, 9, 21), 31],[Date.UTC(2013, 9, 21), 31],[Date.UTC(2013, 9, 21), 30],[Date.UTC(2013, 9, 21), 30],[Date.UTC(2013, 9, 21), 29],[Date.UTC(2013, 9, 21), 29],[Date.UTC(2013, 9, 21), 29],[Date.UTC(2013, 9, 21), 29],[Date.UTC(2013, 9, 21), 29],[Date.UTC(2013, 9, 21), 29],[Date.UTC(2013, 9, 21), 29],[Date.UTC(2013, 9, 21), 29],[Date.UTC(2013, 9, 21), 6],[Date.UTC(2013, 9, 21), 6],[Date.UTC(2013, 9, 21), 6],[Date.UTC(2013, 9, 21), 6],[Date.UTC(2013, 9, 21), 6],[Date.UTC(2013, 9, 21), 7],[Date.UTC(2013, 9, 21), 5],[Date.UTC(2013, 9, 21), 5],[Date.UTC(2013, 9, 21), 5],[Date.UTC(2013, 9, 21), 4],[Date.UTC(2013, 9, 21), 6],[Date.UTC(2013, 9, 21), 13],[Date.UTC(2013, 9, 21), 7],[Date.UTC(2013, 9, 21), 13],[Date.UTC(2013, 9, 21), 17],[Date.UTC(2013, 9, 21), 19],[Date.UTC(2013, 9, 21), 18],[Date.UTC(2013, 9, 21), 18],[Date.UTC(2013, 9, 21), 19],[Date.UTC(2013, 9, 21), 18],[Date.UTC(2013, 9, 21), 18],[Date.UTC(2013, 9, 21), 18],[Date.UTC(2013, 9, 21), 20],[Date.UTC(2013, 9, 21), 20],[Date.UTC(2013, 9, 21), 21],[Date.UTC(2013, 9, 21), 19],[Date.UTC(2013, 9, 21), 23],[Date.UTC(2013, 9, 21), 25],[Date.UTC(2013, 9, 21), 24],[Date.UTC(2013, 9, 21), 24],[Date.UTC(2013, 9, 21), 23],[Date.UTC(2013, 9, 21), 24],[Date.UTC(2013, 9, 21), 24],[Date.UTC(2013, 9, 21), 23],[Date.UTC(2013, 9, 21), 23],[Date.UTC(2013, 9, 21), 23],[Date.UTC(2013, 9, 21), 23],[Date.UTC(2013, 9, 21), 25],[Date.UTC(2013, 9, 21), 25],[Date.UTC(2013, 9, 21), 25],[Date.UTC(2013, 9, 21), 25],[Date.UTC(2013, 9, 21), 25],[Date.UTC(2013, 9, 21), 25],[Date.UTC(2013, 9, 21), 25],[Date.UTC(2013, 9, 21), 25],[Date.UTC(2013, 9, 21), 25],[Date.UTC(2013, 9, 21), 30],[Date.UTC(2013, 9, 21), 17],[Date.UTC(2013, 9, 21), 13],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 6],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 6],[Date.UTC(2013, 9, 21), 1],[Date.UTC(2013, 9, 21), 3],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 3],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 2],[Date.UTC(2013, 9, 21), 18],[Date.UTC(2013, 9, 21), 18],[Date.UTC(2013, 9, 21), 12],[Date.UTC(2013, 9, 21), 10],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 10],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 9],[Date.UTC(2013, 9, 21), 10],[Date.UTC(2013, 9, 21), 10],[Date.UTC(2013, 9, 21), 11],[Date.UTC(2013, 9, 21), 11],[Date.UTC(2013, 9, 21), 11],[Date.UTC(2013, 9, 21), 11],[Date.UTC(2013, 9, 21), 13],[Date.UTC(2013, 9, 21), 18],[Date.UTC(2013, 9, 21), 22],[Date.UTC(2013, 9, 21), 22],[Date.UTC(2013, 9, 21), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 29],[Date.UTC(2013, 9, 22), 28],[Date.UTC(2013, 9, 22), 28],[Date.UTC(2013, 9, 22), 28],[Date.UTC(2013, 9, 22), 28],[Date.UTC(2013, 9, 22), 28],[Date.UTC(2013, 9, 22), 28],[Date.UTC(2013, 9, 22), 27],[Date.UTC(2013, 9, 22), 27],[Date.UTC(2013, 9, 22), 27],[Date.UTC(2013, 9, 22), 27],[Date.UTC(2013, 9, 22), 26],[Date.UTC(2013, 9, 22), 26],[Date.UTC(2013, 9, 22), 22],[Date.UTC(2013, 9, 22), 19],[Date.UTC(2013, 9, 22), 17],[Date.UTC(2013, 9, 22), 14],[Date.UTC(2013, 9, 22), 14],[Date.UTC(2013, 9, 22), 13],[Date.UTC(2013, 9, 22), 13]]
}, {
name: 'Unavailable',
color: '#FF0000',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2013, 9, 17),
data: [[Date.UTC(2013, 9, 17), 16],[Date.UTC(2013, 9, 17), 16],[Date.UTC(2013, 9, 17), 16],[Date.UTC(2013, 9, 17), 16],[Date.UTC(2013, 9, 17), 16],[Date.UTC(2013, 9, 17), 16],[Date.UTC(2013, 9, 17), 16],[Date.UTC(2013, 9, 17), 16],[Date.UTC(2013, 9, 17), 16],[Date.UTC(2013, 9, 17), 19],[Date.UTC(2013, 9, 17), 19],[Date.UTC(2013, 9, 17), 20],[Date.UTC(2013, 9, 17), 21],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 27],[Date.UTC(2013, 9, 17), 30],[Date.UTC(2013, 9, 17), 32],[Date.UTC(2013, 9, 17), 33],[Date.UTC(2013, 9, 17), 35],[Date.UTC(2013, 9, 17), 36],[Date.UTC(2013, 9, 17), 38],[Date.UTC(2013, 9, 17), 38],[Date.UTC(2013, 9, 17), 38],[Date.UTC(2013, 9, 17), 38],[Date.UTC(2013, 9, 17), 38],[Date.UTC(2013, 9, 17), 38],[Date.UTC(2013, 9, 17), 38],[Date.UTC(2013, 9, 17), 37],[Date.UTC(2013, 9, 17), 37],[Date.UTC(2013, 9, 17), 36],[Date.UTC(2013, 9, 17), 37],[Date.UTC(2013, 9, 17), 33],[Date.UTC(2013, 9, 17), 29],[Date.UTC(2013, 9, 17), 27],[Date.UTC(2013, 9, 17), 20],[Date.UTC(2013, 9, 17), 15],[Date.UTC(2013, 9, 17), 15],[Date.UTC(2013, 9, 17), 11],[Date.UTC(2013, 9, 17), 12],[Date.UTC(2013, 9, 17), 13],[Date.UTC(2013, 9, 17), 13],[Date.UTC(2013, 9, 17), 12],[Date.UTC(2013, 9, 17), 11],[Date.UTC(2013, 9, 17), 11],[Date.UTC(2013, 9, 17), 11],[Date.UTC(2013, 9, 17), 11],[Date.UTC(2013, 9, 17), 11],[Date.UTC(2013, 9, 17), 11],[Date.UTC(2013, 9, 17), 11],[Date.UTC(2013, 9, 17), 11],[Date.UTC(2013, 9, 17), 11],[Date.UTC(2013, 9, 17), 11],[Date.UTC(2013, 9, 17), 11],[Date.UTC(2013, 9, 17), 12],[Date.UTC(2013, 9, 17), 13],[Date.UTC(2013, 9, 17), 13],[Date.UTC(2013, 9, 17), 13],[Date.UTC(2013, 9, 17), 13],[Date.UTC(2013, 9, 17), 13],[Date.UTC(2013, 9, 17), 13],[Date.UTC(2013, 9, 17), 13],[Date.UTC(2013, 9, 17), 13],[Date.UTC(2013, 9, 17), 18],[Date.UTC(2013, 9, 17), 20],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 29],[Date.UTC(2013, 9, 17), 29],[Date.UTC(2013, 9, 17), 27],[Date.UTC(2013, 9, 17), 26],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 20],[Date.UTC(2013, 9, 17), 17],[Date.UTC(2013, 9, 17), 20],[Date.UTC(2013, 9, 17), 19],[Date.UTC(2013, 9, 17), 20],[Date.UTC(2013, 9, 17), 18],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 26],[Date.UTC(2013, 9, 17), 26],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 23],[Date.UTC(2013, 9, 17), 17],[Date.UTC(2013, 9, 17), 17],[Date.UTC(2013, 9, 17), 19],[Date.UTC(2013, 9, 17), 18],[Date.UTC(2013, 9, 17), 15],[Date.UTC(2013, 9, 17), 15],[Date.UTC(2013, 9, 17), 20],[Date.UTC(2013, 9, 17), 20],[Date.UTC(2013, 9, 17), 22],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 23],[Date.UTC(2013, 9, 17), 17],[Date.UTC(2013, 9, 17), 16],[Date.UTC(2013, 9, 17), 16],[Date.UTC(2013, 9, 17), 16],[Date.UTC(2013, 9, 17), 18],[Date.UTC(2013, 9, 17), 19],[Date.UTC(2013, 9, 17), 20],[Date.UTC(2013, 9, 17), 19],[Date.UTC(2013, 9, 17), 19],[Date.UTC(2013, 9, 17), 18],[Date.UTC(2013, 9, 17), 18],[Date.UTC(2013, 9, 17), 18],[Date.UTC(2013, 9, 17), 19],[Date.UTC(2013, 9, 17), 21],[Date.UTC(2013, 9, 17), 23],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 26],[Date.UTC(2013, 9, 17), 26],[Date.UTC(2013, 9, 17), 26],[Date.UTC(2013, 9, 17), 27],[Date.UTC(2013, 9, 17), 27],[Date.UTC(2013, 9, 17), 29],[Date.UTC(2013, 9, 17), 29],[Date.UTC(2013, 9, 17), 29],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 17), 23],[Date.UTC(2013, 9, 17), 25],[Date.UTC(2013, 9, 17), 22],[Date.UTC(2013, 9, 17), 22],[Date.UTC(2013, 9, 17), 23],[Date.UTC(2013, 9, 17), 24],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 15],[Date.UTC(2013, 9, 19), 14],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 34],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 40],[Date.UTC(2013, 9, 19), 39],[Date.UTC(2013, 9, 19), 39],[Date.UTC(2013, 9, 19), 35],[Date.UTC(2013, 9, 19), 35],[Date.UTC(2013, 9, 19), 23],[Date.UTC(2013, 9, 19), 26],[Date.UTC(2013, 9, 19), 27],[Date.UTC(2013, 9, 19), 21],[Date.UTC(2013, 9, 19), 28],[Date.UTC(2013, 9, 19), 11],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 19), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 7],[Date.UTC(2013, 9, 20), 28],[Date.UTC(2013, 9, 20), 40],[Date.UTC(2013, 9, 20), 1],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 1],[Date.UTC(2013, 9, 20), 5],[Date.UTC(2013, 9, 20), 3],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 5],[Date.UTC(2013, 9, 20), 5],[Date.UTC(2013, 9, 20), 5],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 37],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 39],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 5],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 5],[Date.UTC(2013, 9, 20), 5],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 1],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 20), 0],[Date.UTC(2013, 9, 22), 14],[Date.UTC(2013, 9, 22), 18],[Date.UTC(2013, 9, 22), 21],[Date.UTC(2013, 9, 22), 23],[Date.UTC(2013, 9, 22), 26],[Date.UTC(2013, 9, 22), 26],[Date.UTC(2013, 9, 22), 27],[Date.UTC(2013, 9, 22), 27]]
}]
});
});
Here is the jsFiddle link: http://jsfiddle.net/gakca/
Thanks,
David
Feel free to check the following jsFiddle, I made some changes based on your jsFiddle. But not quite sure if it's what you looking for or not.
http://jsfiddle.net/ethanph5/BC7Ks/2/
xAxis: {
type: 'datetime',
maxZoom: 7 * 24 * 3600000,
tickInterval: 24 * 3600 * 1000,
minTickInterval: 60 * 1000,
minRange: 1800 * 1000
}
To get more zoom in, you should play around with minTickInterval and minRange to see what's the best setting for your need.
To add a scrollbar to x axis, here are the answers: How to enable Highcharts scrollbar? and highcharts scroll through axis
The key changes are:
In HTML:
<script src="http://code.highcharts.com/stock/highstock.js"></script>
In Javascript:
scrollbar: {
enabled: true
}
Here is my updated jsFiddle: http://jsfiddle.net/ethanph5/BC7Ks/3/
show two different series with different start intervals with the same xAxis highcharts
http://jsbin.com/enotab/39/editI want to show data from 2 different years on the same XAxis without using 2 x axes. In which case i get the following result
I want to have an overlay graph with the 2 series where 2012 series becomes a shadow graph. How is it possible? this is my static code:
var mychart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
title: {
text: 'Chart Title'
},
xAxis: [{
type: 'datetime',
minRange: 31 * 24 * 3600000,
labels: {
formatter: function () {
return Highcharts.dateFormat('%e %b %y', this.value);
}
}
}],
yAxis: {
title: {
text: 'Current Values'
},
gridLineColor: 'transparent',
plotLines: [{
value: 0,
color: 'green',
dashStyle: 'longdashdot',
width: 1
}, {
value: 30,
color: 'orange',
dashStyle: 'longdashdot',
width: 1
}, {
value: 60,
color: 'red',
dashStyle: 'longdashdot',
width: 1
}, {
value: 80,
color: 'black',
dashStyle: 'longdashdot',
width: 1
}]
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
series: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0.1)']
]
},
lineWidth: 1,
shadow: false,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5,
fillColor: 'red'
}
}
},
states: {
hover: {
lineWidth: 1
}
},
threshold: null
} //area
}, //plotoptions
series: [{
type: 'area',
//color:'#89a54e',
color: '#4572a7',
lineWidth: 0.1,
name: '2012',
// xAxis: 0,
zIndex: -1,
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2013, 0, 1),
data: [
[Date.UTC(2013, 0, 1), 3],
[Date.UTC(2013, 0, 2), 12],
[Date.UTC(2013, 0, 3), 30],
[Date.UTC(2013, 0, 4), 22],
[Date.UTC(2013, 0, 5), 12],
[Date.UTC(2013, 0, 8), 13],
[Date.UTC(2013, 0, 9), 12],
[Date.UTC(2013, 0, 11), 13],
[Date.UTC(2013, 0, 12), 22],
[Date.UTC(2013, 0, 15), 1],
[Date.UTC(2013, 0, 16), 25],
[Date.UTC(2013, 0, 18), 43],
[Date.UTC(2013, 0, 19), 26],
[Date.UTC(2013, 0, 20), 23],
[Date.UTC(2013, 0, 21), 12],
[Date.UTC(2013, 0, 22), 13],
[Date.UTC(2013, 0, 23), 22],
[Date.UTC(2013, 0, 24), 1],
[Date.UTC(2013, 0, 25), 25],
[Date.UTC(2013, 0, 26), 43],
[Date.UTC(2013, 0, 27), 26],
[Date.UTC(2013, 0, 28), 23],
[Date.UTC(2013, 0, 29), 12],
[Date.UTC(2013, 0, 30), 13],
[Date.UTC(2013, 0, 31), 22],
[Date.UTC(2013, 1, 1), 1],
[Date.UTC(2013, 1, 2), -5],
[Date.UTC(2013, 1, 3), 43],
[Date.UTC(2013, 1, 4), 26],
[Date.UTC(2013, 1, 5), 23],
[Date.UTC(2013, 1, 6), 25],
[Date.UTC(2013, 1, 7), 43],
[Date.UTC(2013, 1, 8), 26],
[Date.UTC(2013, 1, 9), 23],
[Date.UTC(2013, 1, 10), 35],
[Date.UTC(2013, 1, 11), 38],
[Date.UTC(2013, 1, 14), 36],
[Date.UTC(2013, 1, 15), 3],
[Date.UTC(2013, 1, 16), 55],
[Date.UTC(2013, 1, 17), 43],
[Date.UTC(2013, 1, 18), 22],
[Date.UTC(2013, 1, 19), -3]
]
}, {
type: 'line',
name: '2013',
color: '#89a54e',
lineWidth: 3,
zIndex: 3,
// xAxis:1,
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2012, 0, 1),
data: [
[Date.UTC(2012, 0, 1), 13],
[Date.UTC(2012, 0, 2), 52],
[Date.UTC(2012, 0, 3), 3],
[Date.UTC(2012, 0, 4), 12],
[Date.UTC(2012, 0, 5), 2],
[Date.UTC(2012, 0, 6), 35],
[Date.UTC(2012, 0, 7), 12],
[Date.UTC(2012, 0, 8), 35],
[Date.UTC(2012, 0, 9), 22],
[Date.UTC(2012, 0, 11), 3],
[Date.UTC(2012, 0, 12), 32],
[Date.UTC(2012, 0, 15), 41],
[Date.UTC(2012, 0, 16), 45],
[Date.UTC(2012, 0, 18), 63],
[Date.UTC(2012, 0, 19), 16],
[Date.UTC(2012, 0, 20), 83],
[Date.UTC(2012, 0, 21), 1],
[Date.UTC(2012, 0, 22), 75],
[Date.UTC(2012, 0, 23), 52],
[Date.UTC(2012, 0, 24), 1],
[Date.UTC(2012, 0, 25), 65],
[Date.UTC(2012, 0, 26), 13],
[Date.UTC(2012, 0, 27), 76],
[Date.UTC(2012, 0, 28), 56],
[Date.UTC(2012, 0, 29), 12],
[Date.UTC(2012, 0, 30), 13],
[Date.UTC(2012, 0, 31), 22],
[Date.UTC(2012, 1, 1), 1],
[Date.UTC(2012, 1, 2), 25],
[Date.UTC(2012, 1, 3), 43],
[Date.UTC(2012, 1, 4), 26],
[Date.UTC(2012, 1, 5), 23],
[Date.UTC(2012, 1, 6), 25],
[Date.UTC(2012, 1, 7), 43],
[Date.UTC(2012, 1, 8), 26],
[Date.UTC(2012, 1, 9), 23],
[Date.UTC(2012, 1, 10), 35],
[Date.UTC(2012, 1, 11), 48],
[Date.UTC(2012, 1, 14), 86],
[Date.UTC(2012, 1, 15), 73],
[Date.UTC(2012, 1, 16), 55],
[Date.UTC(2012, 1, 17), 43],
[Date.UTC(2012, 1, 18), 22],
[Date.UTC(2012, 1, 19), -3]
]
}]
});
});
It depends on what you want shown on the x axis. If you just want to keep the first axis labels, then simply remove the labels from the second x axis and offset it over the first:
xAxis:[ {type: 'datetime', minRange:31*24 *3600000 , offset:10,
labels: {formatter: function() {return Highcharts.dateFormat('%e %b', this.value);
}
} },
{type: 'datetime', minRange:31*24 *3600000 , offset:10,
labels: {enabled:false}
}],