<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Demo</h1>
<select id="variables">
<option value="1">Unidad X</option>
<option value="2">Unidad Y</option>
<option value="3">Unidad Z</option>
</select>
<button id="btnAdd">Add</button>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script data-require="moment.js@2.10.2" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="highcharts-pluggin-xrange.js"></script>
<script src="script.js"></script>
</body>
</html>
// Code goes here
$(function () {
var chart =new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy',
events : {
load : function () {
for (var tickPos in this.yAxis[2].ticks) {
var chh = this.yAxis[2].chart;
var $element = $(this.yAxis[2].ticks[tickPos].label.element);
$element.css( 'cursor', 'pointer' );
$element.unbind('click');
$element.click(function() {
var serieName = 'Alarms-' + this.innerHTML;
//si ya está añadido la serie => lo quita
var found = -1;
for(var i=0;i<chh.series.length; i++){
if (chh.series[i].name === serieName)
found = i;
}
if (found > -1){
chh.series[found].remove(true);
return;
}
//alert(this.innerHTML);
chh.addSeries(
{
name: serieName,
type: 'xrange',
yAxis: 3,
color: Highcharts.getOptions().colors[3],
linecap:'square',
marker:{enabled:false},
pointWidth: 5,
data: [
{ x: Date.UTC(2014, 10, 1,13),
x2: Date.UTC(2014, 10, 1,20),
y: 0 },
{ x: Date.UTC(2014, 10, 1, 6),
x2: Date.UTC(2014, 10, 1, 12),
y: 1 },
{ x: Date.UTC(2014, 10, 1, 5),
x2: Date.UTC(2014, 10, 1, 11),
y: 2 },
{ x: Date.UTC(2014, 10, 1, 3),
x2: Date.UTC(2014, 10, 1, 10),
y: 3 },
{ x: Date.UTC(2014, 10, 1, 5),
x2: Date.UTC(2014, 10, 1, 14),
y: 4 }
]
}
,true,true);
});
}
}
}
},
title: {
text: 'Demo'
},
xAxis: {
type: 'datetime',
min: Date.UTC(2014, 10, 1),
max: Date.UTC(2014, 10, 2),
plotBands: [{
color: '#DDFDDE', // '#FDDDDF', //'#FCFFC5', // Color value
from: Date.UTC(2014, 10, 1,0), // Start of the plot band
to: Date.UTC(2014, 10, 1,12) // End of the plot band
},{
color: '#FDDDDF',
from: Date.UTC(2014, 10, 1,12), // Start of the plot band
to: Date.UTC(2014, 10, 1,19) // End of the plot band
},{
color: '#F2F2F2', //'#FCFBC4',
from: Date.UTC(2014, 10, 1,19), // Start of the plot band
to: Date.UTC(2014, 10, 2) // End of the plot band
}],
},
yAxis: [{ // Primary yAxis
id:'kw-axis',
lineWidth: 1,
title: {
text: 'kW',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
//format: '{value} kW',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min:10,
max:30
}, { // Secondary yAxis
id:'ms-axis',
lineWidth: 1,
gridLineWidth: 0,
title: {
text: 'm/s',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
//format: '{value} m/s',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}, { //yAxis index 2
lineWidth: 1,
title: {
text: '',// 'Categories',
/*style: {
color: Highcharts.getOptions().colors[2]
}*/
},
labels: {
style: {
color: Highcharts.getOptions().colors[2]
}
}
,categories: ['IAOGFP', 'IANOFO', 'IAONEW']
}, { //yAxis index 3 //alarms
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[3]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[3]
}
}
,categories: ['Walm1', 'Walm2', 'Walm3','Walm4','Walm5']
}
],
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
r: 10,
fill: Highcharts.getOptions().colors[1]
})
.css({
color: '#FFFFFF'
})
.add();
}
chart.lbl
.show()
.attr({
text: 'x: ' + this.x + ', y: ' + this.y + ', x2:' + this.x2
});
}
}
},
events: {
mouseOut: function () {
if (this.chart.lbl) {
this.chart.lbl.hide();
}
}
}
}
},
tooltip: {
enabled: false
/* snap: 50,
formatter: function() {
if (this.series.name.match("^Alarms-") || this.series.name.match("^Categories")){
var yname = this.series.yAxis.categories[this.point.y];
var dfrom = moment(this.point.x).format('MM/DD H:mm:ss');
var dto = moment(this.point.x2).format('MM/DD H:mm:ss');
return this.series.name + '<br>' +
yname + '<br>' +
dfrom + ' to ' + dto;
}
var dfrom = moment(this.point.x).format('MM/DD H:mm');
return this.series.name + '<br>' +
this.point.y + '<br>' +
dfrom;
}
*/
},
series: [
{
name: "Production",
type: "line",
yAxis: 0,
pointInterval: 600 * 1000,
pointStart: Date.UTC(2014, 10, 1),
lineWidth:1,
data: [17.0, 18.0, 18.0, 18.0, 18.0, 17.0, 17.0, 17.0, 16.0, 17.0, 16.0, 16.0, 17.0, 16.0, 16.0, 16.0, 15.0, 16.0, 15.0, 15.0, 16.0, 15.0, 16.0, 15.0, 16.0, 16.0, 16.0, 18.0, 18.0, 18.0, 17.0, 17.0, 16.0, 18.0, 18.0, 17.0, 17.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 17.0, 15.0, 15.0, 15.0, 15.0, 16.0, 15.0, 16.0, 16.0, 16.0, 17.0, 16.0, 18.0, 17.0, 17.0, 16.0, 17.0, 16.0, 17.0, 16.0, 17.0, 16.0, 18.0, 18.0, 18.0, 18.0, 17.0, 18.0, 16.0, 17.0, 18.0, 16.0, 18.0, 18.0, 18.0, 17.0, 18.0, 19.0, 18.0, 18.0, 18.0, 18.0, 18.0, 19.0, 18.0, 18.0, 18.0, 17.0, 18.0, 16.0, 16.0, 17.0, 16.0, 16.0, 16.0, 15.0, 16.0, 16.0, 16.0, 17.0, 16.0, 17.0, 18.0, 19.0, 19.0, 19.0, 18.0, 18.0, 21.0, 21.0, 20.0, 20.0, 18.0, 18.0, 18.0, 19.0, 18.0, 17.0, 17.0, 17.0, 16.0, 15.0, 16.0, 18.0, 9.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0],
},
{
name: "WindSpeed",
yAxis: 1,
pointInterval: 600 * 1000,
pointStart: Date.UTC(2014, 10, 1),
lineWidth:1,
data: [9.41, 10.65, 11.0, 10.89, 10.24, 9.78, 9.79, 9.51, 7.94, 8.99, 8.53, 8.86, 9.57, 7.51, 7.0, 7.43, 6.65, 6.84, 6.49, 7.55, 7.95, 8.02, 7.15, 7.54, 7.33, 7.67, 10.84, 11.81, 12.54, 10.44, 8.89, 9.3, 9.64, 10.5, 10.54, 8.05, 7.89, 8.13, 7.77, 8.38, 7.42, 7.16, 8.09, 9.0, 8.91, 9.94, 9.81, 8.56, 7.92, 7.78, 8.62, 8.2, 8.28, 8.31, 8.41, 8.8, 9.61, 10.63, 9.59, 9.31, 8.27, 8.4, 9.11, 9.42, 9.07, 9.71, 10.26, 12.26, 10.98, 10.25, 10.28, 9.61, 10.55, 9.11, 9.92, 9.77, 10.08, 10.17, 12.32, 9.14, 9.8, 11.48, 13.48, 10.71, 9.81, 8.37, 8.95, 9.02, 8.91, 10.24, 9.3, 8.92, 7.16, 8.39, 9.62, 10.38, 8.35, 6.95, 7.58, 8.76, 7.34, 8.59, 9.06, 10.2, 9.69, 9.44, 10.12, 10.91, 12.13, 14.37, 14.76, 15.51, 14.57, 16.05, 14.22, 12.5, 13.8, 15.28, 18.61, 18.02, 16.95, 17.78, 15.93, 16.94, 16.0, 16.38, 16.46, 16.26, 16.44, 13.2, 12.59, 11.8, 12.49, 12.04, 11.24, 13.13, 11.76, 10.9, 10.32, 10.11, 10.35, 9.98, 11.2, 10.37]
},
//serie states
{
name: 'Positive Discrepancy',
yAxis: 0,
lineWidth: 8,
linecap:'square',
marker:{enabled:false},
color: Highcharts.getOptions().colors[5],
pointInterval: 8 * 3600 * 1000,
pointStart: Date.UTC(2014, 10, 1),
data: [30,30,null,null]
},
{
name: 'Negative Discrepancy',
yAxis: 0,
lineWidth: 8,
linecap:'square',
marker: {enabled: false},
color: Highcharts.getOptions().colors[6],
pointInterval: 8 * 3600 * 1000,
pointStart: Date.UTC(2014, 10, 1),
data: [null,30,30,null]
},
{
name: 'Discrepancy Exclusion',
yAxis: 0,
lineWidth: 8,
linecap:'square',
marker: {enabled: false},
color: Highcharts.getOptions().colors[7],
pointInterval: 8 * 3600 * 1000,
pointStart: Date.UTC(2014, 10, 1),
data: [null,null,30,30]
},
{
name: 'Categories',
type: 'xrange',
yAxis: 2,
color: Highcharts.getOptions().colors[2],
//borderRadius: 5,
linecap:'square',
marker:{enabled:false},
pointWidth: 8,
data: [{
x: Date.UTC(2014, 10, 1,1),
x2: Date.UTC(2014, 10, 1,4),
y: 0
}, {
x: Date.UTC(2014, 10, 1, 3),
x2: Date.UTC(2014, 10, 1, 7),
y: 1
}, {
x: Date.UTC(2014, 10, 1, 5),
x2: Date.UTC(2014, 10, 1, 11),
y: 2
}, {
x: Date.UTC(2014, 10, 1, 10),
x2: Date.UTC(2014, 10, 1, 16),
y:1
}, {
x: Date.UTC(2014, 10, 1, 14),
x2: Date.UTC(2014, 10, 1, 20),
y: 2
} ]
}
]
});
}); //fin load
//add button
$("#btnAdd").click(function(){
var chart = $('#container').highcharts();
chart.addAxis({ // Secondary yAxis
id: 'new-axis',
title: {
text: 'New '
},
lineWidth: 1,
lineColor: '#08F',
opposite: true
});
chart.addSeries({
name: 'Rainfall',
type: 'line',
color: '#08F',
yAxis: 'new-axis',
pointInterval: 600 * 1000,
pointStart: Date.UTC(2014, 10, 1),
lineWidth: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
});
});
/* Styles go here */
$(function () {
/**
* Highcharts X-range series plugin
*/
(function (H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
each = H.each;
defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
H.seriesTypes.xrange = H.extendClass(columnType, {
type: 'xrange',
parallelArrays: ['x', 'x2', 'y'],
animate: H.seriesTypes.line.prototype.animate,
/**
* Borrow the column series metrics, but with swapped axes. This gives free access
* to features like groupPadding, grouping, pointWidth etc.
*/
getColumnMetrics: function () {
var metrics,
chart = this.chart,
swapAxes = function () {
each(chart.series, function (s) {
var xAxis = s.xAxis;
s.xAxis = s.yAxis;
s.yAxis = xAxis;
});
};
swapAxes();
this.yAxis.closestPointRange = 1;
metrics = columnType.prototype.getColumnMetrics.call(this);
swapAxes();
return metrics;
},
translate: function () {
columnType.prototype.translate.apply(this, arguments);
var series = this,
xAxis = series.xAxis,
yAxis = series.yAxis,
metrics = series.columnMetrics;
H.each(series.points, function (point) {
barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
point.shapeArgs = {
x: point.plotX,
y: point.plotY, // + metrics.offset,
width: barWidth,
height: metrics.width
};
point.tooltipPos[0] += barWidth / 2;
point.tooltipPos[1] -= metrics.width / 2;
});
}
});
/**
* Max x2 should be considered in xAxis extremes
*/
H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) {
var axis = this,
dataMax = Number.MIN_VALUE;
proceed.call(this);
if (this.isXAxis) {
each(this.series, function (series) {
each(series.x2Data || [], function (val) {
if (val > dataMax) {
dataMax = val;
}
});
});
if (dataMax > Number.MIN_VALUE) {
axis.dataMax = dataMax;
}
}
});
}(Highcharts));
});