Google Charts to Hide a Row and Modify Tooltip - tooltip
I was able to get the following code by referencing this Question
to work but am having a hard time changing the tooltip
So I worked with making the tooltip functional and got that to work but am having a very difficult time getting both to work
Thanks!
Code Sample 1: Hide A Row
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'Attention Phase Harmony');
data.addColumn('number', 'Clarity of Periphery');
data.addColumn('number', 'Body Temperature');
data.addColumn('number', 'Clarity of Center of Attention');
data.addColumn('number', 'Energetic Phenomena');
data.addColumn('number', 'Pain-Pleasure');
data.addColumn('number', 'Mental Illness');
data.addColumn('number', 'Mind Speed');
data.addColumn('number', 'Motivation');
data.addColumn('number', 'Powers');
data.addColumn('number', 'Sleep');
data.addRow([1, 4, 0, 0, 1, -4, 2, -4, 1, 3, 1, 0 ]);
data.addRow([2, 2, 1, 1, 1, 2, 0, -3, 2, 0, 0, 0 ]);
data.addRow([3, -1, 1, 2, 1, 3, -4, 0, 3, -4, -1, 2 ]);
data.addRow([4, 4, 1, 4, 4, 4, 4, 3, 4, 4, 4, -4 ]);
data.addRow([5, 0, -2, -4, -4, -4, 2, -3, -4, -3, 0, 4 ]);
data.addRow([6, 2, 3, 1, -2, 1, 1, 3, 2, -2, 1, 0 ]);
data.addRow([7, -2, 3, -1, -3, -3, -2, 3, -1, -2, -1, 2 ]);
data.addRow([8, -3, 3, 0, -2, -3, -3, 3, 2, 2, -2, 2 ]);
data.addRow([9, -3, 3, 0, -3, 0, -3, 2, 3, 3, -3, 2 ]);
data.addRow([10, -4, 4, 1, -4, 2, -4, 4, 4, -4, -4, 3 ]);
data.addRow([11, 4, 3, 0, 3, 0, 1, -2, 0, -2, 3, 0 ]);
alert(data.getNumberOfColumns());
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// create columns array
var columns = [];
// display these data series by default
var defaultSeries = [1];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
if (i == 0 || defaultSeries.indexOf(i) > -1) {
// if the column is the domain column or in the default list, display the series
columns.push(i);
}
else {
// otherwise, hide it
columns[i] = {
label: data.getColumnLabel(i),
type: data.getColumnType(i),
calc: function () {
return null;
}
};
}
if (i > 0) {
// set the default series option
series[i - 1] = {};
if (defaultSeries.indexOf(i) == -1) {
// backup the default color (if set)
if (typeof(series[i - 1].color) !== 'undefined') {
series[i - 1].backupColor = series[i - 1].color;
}
series[i - 1].color = '#CCCCCC';
}
}
}
var options = {
pointSize: 5,
width: 1000,
height: 400,
series: series,
curveType: 'function',
vAxis: {
viewWindow:{
max:5,
min:-5
},
gridlines: { count: 11, color: '#CCC' }
},
chartArea: {width: '60%'},
hAxis: {
title: "Nanas",
gridlines: { count: 11, color: '#CCC' }
,slantedTextAngle:90 ,textStyle: {fontSize: 13}
}
}
function showHideSeries () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row == null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
}
else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
}
}
google.visualization.events.addListener(chart, 'select', showHideSeries);
// create a view with the default columns
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart_div"></div>
<div id="creativeCommons" style="text-align: center; width: 400px;">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to turn on or off data series by clicking on legend entries</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>
</body>
</html>
Code Sample 2: ToolTip
function drawChart() {
var data = google.visualization.arrayToDataTable([
["X",
"Attention Phase Harmony", {label: 'Tooltip', role: 'tooltip'},
"Clarity of Periphery", {label: 'Tooltip', role: 'tooltip'},
"Body Temperature", {label: 'Tooltip', role: 'tooltip'},
"Clarity of Center of Attention", {label: 'Tooltip', role: 'tooltip'}],
[1, 0, "APH", null,null,null,null,null,null],
[2, 1, "APH", null,null,null,null,null,null],
[3, 1, "APH", null,null,null,null,null,null],
[4, 1, "APH", null,null,null,null,null,null],
[5, -2, "APH", null,null,null,null,null,null],
[6, 3, "APH", null,null,null,null,null,null],
[7, 3, "APH", null,null,null,null,null,null],
[8, 3, "APH", null,null,null,null,null,null],
[9, 3, "APH", null,null,null,null,null,null],
[10, 4, "APH", null,null,null,null,null,null],
[11, 3, "APH", null,null,null,null,null,null],
[1, null,null, 4,"tooltip info about product 1", null,null,null,null],
[2, null,null, 2,"tooltip info about product 1", null,null,null,null],
[3, null,null, -1,"tooltip info about product 1", null,null,null,null],
[4, null,null, 4,"tooltip info about product 1", null,null,null,null],
[5, null,null, 0,"tooltip info about product 1", null,null,null,null],
[6, null,null, 2,"tooltip info about product 1", null,null,null,null],
[7, null,null, -2,"tooltip info about product 1", null,null,null,null],
[8, null,null, -3,"tooltip info about product 1", null,null,null,null],
[9, null,null, -3,"tooltip info about product 1", null,null,null,null],
[10, null,null, -4,"tooltip info about product 1", null,null,null,null],
[11, null,null, 4,"tooltip info about product 1", null,null,null,null],
[1, null,null,null,null, 0,"tooltip info about product 1", null,null],
[2, null,null,null,null, 1,"tooltip info about product 1", null,null],
[3, null,null,null,null, 2,"tooltip info about product 1", null,null],
[4, null,null,null,null, 4,"tooltip info about product 1", null,null],
[5, null,null,null,null, -4,"tooltip info about product 1", null,null],
[6, null,null,null,null, 1,"tooltip info about product 1", null,null],
[7, null,null,null,null, -1,"tooltip info about product 1", null,null],
[8, null,null,null,null, 0,"tooltip info about product 1", null,null],
[9, null,null,null,null, 0,"tooltip info about product 1", null,null],
[10, null,null,null,null, 1,"tooltip info about product 1", null,null],
[11, null,null,null,null, 0,"tooltip info about product 1", null,null],
[1, null,null,null,null,null,null, 1,"tooltip info about product 1" ],
[2, null,null,null,null,null,null, 1,"tooltip info about product 1" ],
[3, null,null,null,null,null,null, 1,"tooltip info about product 1" ],
[4, null,null,null,null,null,null, 4,"tooltip info about product 1" ],
[5, null,null,null,null,null,null, -4,"tooltip info about product 1" ],
[6, null,null,null,null,null,null, -2,"tooltip info about product 1" ],
[7, null,null,null,null,null,null, -3,"tooltip info about product 1" ],
[8, null,null,null,null,null,null, -2,"tooltip info about product 1" ],
[9, null,null,null,null,null,null, -3,"tooltip info about product 1" ],
[10, null,null,null,null,null,null, -4,"tooltip info about product 1" ],
[11, null,null,null,null,null,null, 3,"tooltip info about product 1" ]
]);
var options = {
pointSize: 5,
width: 1000,
height: 400,
curveType: 'function',
vAxis: {
viewWindow:{
max:5,
min:-5
},
gridlines: { count: 11, color: '#CCC' }
},
chartArea: {width: '60%'},
hAxis: {
title: "Nanas",
gridlines: { count: 11, color: '#CCC' }
,slantedTextAngle:90 ,textStyle: {fontSize: 13}
}
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart_div"></div>
<div id="creativeCommons" style="text-align: center; width: 400px;">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to turn on or off data series by clicking on legend entries</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>
</body>
</html>
I've seen this post a little while ago, and used the base code from asgallant (thanks by the way). Nevertheless, I found another solution which can be easier to implement as I created a utility class for handling the whole process (and I'm using a little trick to avoid changing the Graph data, all is a matter of display style. Instead of changning calc() function to handle line drawing, I just apply a 0 lineWidth style on the serie.
column.lineWidth = 0;
Code can be found here : http://jsfiddle.net/w9b1eyxy/58/
Hope this can help in a near future.
Related
Highchart Heatmap shows index number in YAxis
Heatmap shows index in YAxis instead of Category Name. Is this bug in Highchart?
function getPointCategoryName(point, dimension) {
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: [
'Hello-Yaxis-1',
'Hello-Yaxis-2',
'Hello-Yaxis-3',
'Hello-Yaxis-4',
'Hello-Yaxis-5',
'Hello-Yaxis-6',
'Hello-Yaxis-7',
'Hello-Yaxis-8',
'Hello-Yaxis-9',
'Hello-Yaxis-10',
'Hello-Yaxis-11',
'Hello-Yaxis-12',
'Hello-Yaxis-13',
'Hello-Yaxis-14',
'Hello-Yaxis-15',
'Hello-Yaxis-16',
'Hello-Yaxis-17',
'Hello-Yaxis-18',
'Hello-Yaxis-19',
'Hello-Yaxis-20'
],
title: null,
reversed: true
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91],
[9, 19, 999999]
],
dataLabels: {
enabled: true,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
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>
<script src="https://code.highcharts.com/modules/heatmap.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>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Heatmap showing employee data per weekday. Heatmaps are commonly used to
visualize hot spots within data sets, and to show patterns or correlations.
Due to their compact nature, they are often used with large sets of data.
</p>
</figure>
It's not a bug. Notice that the tickInterval in your case is 2, so the next label should be 'Hello-Yaxis-21' which is not defined - that's why Highcharts render the next value as a count number - it is the default behavior. See: https://jsfiddle.net/BlackLabel/sqw78ugj/
Highchart heatmap: exclude the total row for color Axis
I'am using highchart for create a heatmap with total row: Highchart heatmap with total row The data sample: [ [0, 0, 30], [0, 1, 15], [0, 2, 10], [0, 3, 5], [1, 0, 50], [1, 1, 20], [1, 2, 10], [1, 3, 20] ] Total row is [0, 0, 30] and [1, 0, 50] But for now maxColor is assigned to cell [1, 0, 50] under total row. How can I make the maxColor is assigned to [1, 1, 20] cell? Like this image: Please help me, thank you.
You can set colorAxis.max to 20 and change the color individually for the 'total' points:
colorAxis: {
max: 20,
...
},
series: [{
...,
data: [{x: 0, y: 0, value: 30, color: 'red'},
[0, 1, 15],
[0, 2, 10],
[0, 3, 5],
{x: 1, y: 0, value: 50, color: 'red'},
[1, 1, 20],
[1, 2, 10],
[1, 3, 20]
]
}]
Live demo: https://jsfiddle.net/BlackLabel/ue13kfmc/
API: https://api.highcharts.com/highcharts/colorAxis.max
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:
Heatmap 0 data values are not aligned properly
If there is any data with 0 in the heatmap it is not aligned.
Set some data to 0 in the heatmap. The data with value of 0 is not aligned. Is there anything we can do to align it?
http://jsfiddle.net/yg0v13j6/
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 0], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: 'black',
style: {
textShadow: 'none',
HcTextStroke: null
}
}
}]
});
});
It's a bug in 4.0.4 version, fixed on master branch: http://jsfiddle.net/yg0v13j6/1/
You can add:
format: '{point.value}',
to your dataLabels configuration and it will align the number properly.
I fixed the problem by upgrading from version 4.0.1 to version 4.2.5. So the error must have been fixed somewhere between those two versions. But it is not merely a bug in 4.0.4 (as it has been claimed) since I also experienced the problem in version 4.0.1. Matheus Baumgart's fix about adding a format key to the JSON did not work for me.
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}
}],