<html class=" evernoteSafari">
<head>
<title>Linear Guage Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="Chart.LinearGauge.js"></script>
<style type="text/css">
#legend-2-holder li:hover {
background-color: rgba(0, 0, 0, 0.3);
}
#legend-7-holder {
display: block;
position: relative;
padding: 7px;
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 100%;
height: auto;
min-height: 27px;
}
#legend-7-holder span:hover {
background-color: rgba(0, 0, 0, 0.3);
}
#legend-9-holder {
display: block;
float: left;
padding: 7px;
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 100px;
height: auto;
min-height: 210px;
}
#legend-9-holder span:hover {
background-color: rgba(0, 0, 0, 0.3);
}
</style>
<style id="style-1-cropbar-clipper">
/* Copyright 2014 Evernote Corporation. All rights reserved. */
.en-markup-crop-options {
top: 18px !important;
left: 50% !important;
margin-left: -100px !important;
width: 200px !important;
border: 2px rgba(255, 255, 255, .38) solid !important;
border-radius: 4px !important;
}
.en-markup-crop-options div div:first-of-type {
margin-left: 0px !important;
}
</style>
</head>
<body>
<div style="width: 30%; float: left; padding: 20px;">
<p>Basic chart</p>
<canvas id="canvas1" height="425" width="510" style="width: 510px; height: 425px;"></canvas>
</div>
<div style="width: 30%; float: left; padding: 20px;">
<p>Chart with major and minor ticks, axis label units and few values</p>
<canvas id="canvas2" height="425" width="511" style="width: 511px; height: 425px;"></canvas>
<div>
<ul id="legend-2-holder" style="list-style-type: none;">
<li style=""><span style="background-color:#51f40b; display: block; float: left; margin-right: 10px; width: 15px; height: 15px;"></span>Tom</li>
<li style=""><span style="background-color:#fbf404; display: block; float: left; margin-right: 10px; width: 15px; height: 15px;"></span>Jane</li>
<li style=""><span style="background-color:#fb04bd; display: block; float: left; margin-right: 10px; width: 15px; height: 15px;"></span>Erik</li>
</ul>
</div>
</div>
<div style="width: 30%; float: left; padding: 20px;">
<p>Chart with custom ticks and label positions</p>
<canvas id="canvas3" height="425" width="510" style="width: 510px; height: 425px;"></canvas>
<div>
<ul id="legend-3-holder" style="list-style-type: none;">
<li style=""><span style="background-color:#51f40b; display: block; float: left; margin-right: 10px; width: 15px; height: 15px;"></span>Tom</li>
<li style=""><span style="background-color:#fbf404; display: block; float: left; margin-right: 10px; width: 15px; height: 15px;"></span>John</li>
<li style=""><span style="background-color:#fb04bd; display: block; float: left; margin-right: 10px; width: 15px; height: 15px;"></span>Eva</li>
</ul>
</div>
</div>
<div style="width: 100%; float: left; padding: 0px;">
<p>Chart with horizontal orientation</p>
<canvas id="canvas4" height="235" width="1568" style="width: 1568px; height: 235px;"></canvas>
</div>
<div style="width: 100%; float: left; padding: 0px;">
<p>One more chart with different styling</p>
<canvas id="canvas5" height="235" width="1568" style="width: 1568px; height: 235px;"></canvas>
</div>
<div style="width: 30%; float: left; padding: 20px;">
<p>Chart with scale color ranges</p>
<canvas id="canvas6" height="425" width="510" style="width: 510px; height: 425px;"></canvas>
</div>
<div style="width: 30%; float: left; padding: 20px; height: auto;">
<p>Updating values</p>
<canvas id="canvas7" height="255" width="511" style="width: 511px; height: 255px;"></canvas>
<div id="legend-7-holder">
<div style="background-color:#352bfd; display: block; float: left; margin: 6px; width: 15px; height: 15px;"></div><span style=" display: block; float: left; margin: 6px; ">Meat</span>
<div style="background-color:#e89a17; display: block; float: left; margin: 6px; width: 15px; height: 15px;"></div><span style=" display: block; float: left; margin: 6px; ">Milk</span>
<div style="background-color:#51f40b; display: block; float: left; margin: 6px; width: 15px; height: 15px;"></div><span style=" display: block; float: left; margin: 6px; ">Fruits</span>
<div style="background-color:#fc03ef; display: block; float: left; margin: 6px; width: 15px; height: 15px;"></div><span style=" display: block; float: left; margin: 6px; ">Chocolate</span></div>
</div>
<div style="width: 30%; float: left; padding: 20px;">
<p>Color ranges</p>
<canvas id="canvas8" height="425" width="510" style="width: 510px; height: 425px;"></canvas>
</div>
<div style="width: 30%; float: left; padding: 0px;">
<p>Point indicator type</p>
<div style="display: block; float: left; width: 45%;">
<canvas id="canvas9" height="311" width="212" style="display: block; float: left; width: 212px; height: 311px;"></canvas>
</div>
<div id="legend-9-holder">
<div style="display: block; width: 100%; height: 30px;">
<div style="background-color:red;display: block; float: left; margin: 6px; width: 15px; height: 15px;"></div><span style=" display: block; float: left; margin: 6px; ">Flat</span></div>
<div style="display: block; width: 100%; height: 30px;">
<div style="background-color:blue;display: block; float: left; margin: 6px; width: 15px; height: 15px;"></div><span style=" display: block; float: left; margin: 6px; ">House</span></div>
<div style="display: block; width: 100%; height: 30px;">
<div style="background-color:green;display: block; float: left; margin: 6px; width: 15px; height: 15px;"></div><span style=" display: block; float: left; margin: 6px; ">Office</span></div>
</div>
</div>
<div style="width: 60%; float: left; padding: 20px;">
<p>One more point indicator type</p>
<canvas id="canvas10" height="408" width="981" style="width: 981px; height: 408px;"></canvas>
</div>
<div style="width: 46%; float: left; padding: 20px;">
<p>One more point indicator type</p>
<canvas id="canvas11" height="532" width="761" style="width: 761px; height: 532px;"></canvas>
</div>
<div style="width: 47%; float: left; padding: 20px;">
<p>Custom image point indicator type</p>
<canvas id="canvas12" height="543" width="777" style="width: 777px; height: 543px;"></canvas>
</div>
<script>
var randomScalingFactor = function(k) {
return Math.round(Math.random() * k)
};
</script>
<!--DataSets-->
<script>
var barChartData1 = [{
value: 370,
offset: 9,
highlightFill: '#f40b9d'
}];
var barChartData2 = [{
value: 70,
offset: 20,
highlightFill: '#9bfd53',
label: 'Tom'
}, {
value: 320,
offset: 10,
color: '#fbf404',
highlightFill: '#fcf85a',
label: 'Jane'
}, {
value: 112,
offset: 30,
color: '#fb04bd',
highlightFill: '#fd6cd9',
label: 'Erik'
}];
var barChartData3 = [{
value: 470,
width: 20,
offset: 20,
label: 'Tom'
}, {
value: 320,
width: 15,
offset: 17,
color: '#fbf404',
label: 'John'
}, {
value: 112,
width: 10,
offset: 15,
color: '#fb04bd',
label: 'Eva'
}];
var barChartData4 = [{
value: 70,
offset: 20
}, {
value: 320,
offset: 10,
color: '#fbf404'
}, {
value: 112,
offset: 30,
color: '#fb04bd'
}];
var barChartData5 = [{
value: 2.2,
width: 12,
offset: -5,
color: '#e1e113'
}, {
value: 3.5,
width: 4,
offset: -5,
color: '#fb04bd'
}, {
value: -1.1,
width: 8,
offset: -5,
color: '#fe1230'
}];
var barChartData6 = [{
value: 134
}];
var barChartData7 = [{
value: 164,
offset: 8,
color: '#352bfd',
label: 'Meat'
}, {
value: 114,
offset: 17,
color: '#e89a17',
label: 'Milk'
}, {
value: 44,
offset: 26,
label: 'Fruits'
}, {
value: 78,
offset: 35,
color: '#fc03ef',
label: 'Chocolate'
}];
var barChartData8 = [{
value: 39,
offset: 8,
color: '#352bfd',
colorRanges: [{
startpoint: -50,
breakpoint: -30,
color: '#6154ab'
}, {
startpoint: -30,
breakpoint: 30,
color: '#74f40b'
}, {
startpoint: 30,
breakpoint: 50,
color: '#fd0902'
}]
}, {
value: 39,
offset: 17,
color: '#352bfd',
colorRanges: [{
startpoint: -50,
breakpoint: -30,
color: '#6154ab'
}, {
startpoint: -30,
breakpoint: 30,
color: '#74f40b'
}, {
startpoint: 30,
breakpoint: 50,
color: '#fd0902'
}]
}, {
value: 39,
offset: 26,
color: '#352bfd',
colorRanges: [{
startpoint: -50,
breakpoint: -30,
color: '#6154ab'
}, {
startpoint: -30,
breakpoint: 30,
color: '#74f40b'
}, {
startpoint: 30,
breakpoint: 50,
color: '#fd0902'
}]
}];
var barChartData9 = [];
barChartData9.push({
value: 0,
indicator: 'point',
width: 12,
offset: 7,
color: 'red',
label: 'Flat'
});
barChartData9.push({
value: 0,
indicator: 'point',
shape: 'rect',
width: 12,
height: 12,
offset: 12,
color: 'blue',
label: 'House'
});
barChartData9.push({
value: 0,
indicator: 'point',
shape: 'triangle',
width: 12,
height: 12,
offset: 17,
color: 'green',
label: 'Office'
});
var barChartData10 = [];
barChartData10.push({
value: 0,
indicator: 'point',
shape: 'triangle',
width: 18,
height: 25,
offset: 8,
color: '#1b02f7',
colorRanges: [{
startpoint: -150,
breakpoint: -100,
color: '#1b02f7'
}, {
startpoint: -100,
breakpoint: -30,
color: '#8888fb'
}, {
startpoint: -30,
breakpoint: 30,
color: '#31d801'
}, {
startpoint: 30,
breakpoint: 100,
color: '#e1e10d'
}, {
startpoint: 100,
breakpoint: 150,
color: '#d90000'
}],
tooltipRanges: [{
startpoint: -150,
breakpoint: -100,
tooltip: 'Very Low'
}, {
startpoint: -20,
breakpoint: 20,
tooltip: 'Normal'
}, {
startpoint: 100,
breakpoint: 150,
tooltip: 'High'
}]
});
barChartData10.push({
value: 75,
indicator: 'point',
shape: 'inverted-triangle',
width: 9,
height: 12,
offset: -16,
color: '#a9abb8'
});
barChartData10.push({
value: -75,
indicator: 'point',
shape: 'inverted-triangle',
width: 9,
height: 12,
offset: -16,
color: '#a9abb8'
});
var barChartData11 = [];
barChartData11.push({
value: 3,
indicator: 'point',
shape: 'triangle',
width: 9,
height: 12,
offset: 10,
color: '#32fd06'
});
barChartData11.push({
value: -3,
indicator: 'point',
shape: 'triangle',
width: 9,
height: 12,
offset: 10,
color: '#32fd06'
});
barChartData11.push({
value: 7,
indicator: 'point',
shape: 'triangle',
width: 9,
height: 12,
offset: 10,
color: '#fef105'
});
barChartData11.push({
value: -7,
indicator: 'point',
shape: 'triangle',
width: 9,
height: 12,
offset: 10,
color: '#fef105'
});
barChartData11.push({
value: 12,
indicator: 'point',
shape: 'triangle',
width: 9,
height: 12,
offset: 10,
color: '#fe0c05'
});
barChartData11.push({
value: -12,
indicator: 'point',
shape: 'triangle',
width: 9,
height: 12,
offset: 10,
color: '#fe0c05'
});
barChartData11.push({
value: 0,
indicator: 'point',
shape: 'bowtie',
width: 46,
height: 16,
offset: 0,
color: '#1b02f7',
colorRanges: [{
startpoint: -15,
breakpoint: -10,
color: 'red'
}, {
startpoint: -10,
breakpoint: -5,
color: '#f7f706'
}, {
startpoint: -5,
breakpoint: 5,
color: '#49f906'
}, {
startpoint: 5,
breakpoint: 10,
color: '#f7f706'
}, {
startpoint: 10,
breakpoint: 15,
color: 'red'
}]
});
barChartData11.push({
value: 10,
indicator: 'point',
shape: 'diamond',
width: 46,
height: 16,
offset: 0,
color: '#65f305',
colorRanges: [{
startpoint: -15,
breakpoint: -10,
color: 'blue'
}, {
startpoint: -10,
breakpoint: 10,
color: '#49f906'
}, {
startpoint: 10,
breakpoint: 15,
color: 'blue'
}]
});
barChartData11.push({
value: 4,
width: 8,
height: 16,
offset: -35,
color: '#b08948',
colorRanges: [{
startpoint: -15,
breakpoint: -5,
color: 'red'
}, {
startpoint: -5,
breakpoint: 5,
color: 'green'
}, {
startpoint: 5,
breakpoint: 15,
color: 'red'
}]
});
var barChartData12 = [];
barChartData12.push({
value: 4,
width: 30,
height: 40,
offset: -27,
img: 'hand-pointer.png'
});
barChartData12.push({
value: 0,
width: 30,
height: 30,
offset: -15,
img: 'diamond3.png'
});
barChartData12.push({
value: 0,
width: 30,
height: 30,
offset: -15,
img: 'shapes7.png'
});
</script>
<script>
window.onload = function() {
var ctx1 = document.getElementById("canvas1").getContext("2d");
window.myBar1 = new Chart(ctx1).Linear(barChartData1, {
range: {
startValue: -100,
endValue: 500
},
responsive: true,
scaleFontSize: 12,
axisWidth: 6,
tickLabels: {
interval: 50
},
majorTicks: {
interval: 100
}
});
var ctx2 = document.getElementById("canvas2").getContext("2d");
window.myBar2 = new Chart(ctx2).Linear(barChartData2, {
range: {
startValue: -100,
endValue: 500
},
responsive: true,
scaleFontSize: 12,
axisWidth: 6,
axisColor: '#3c5b8a',
tickLabels: {
units: '$',
interval: 100,
customValues: [],
offset: -9,
color: '#3c5b8a'
},
majorTicks: {
interval: 100,
customValues: [],
width: 6,
height: 2,
offset: 0,
color: '#fff'
},
minorTicks: {
interval: 50,
customValues: [],
width: 3,
height: 1,
offset: -1.5,
color: '#fff'
},
legendTemplate: '<ul id=\"legend-2-holder\" style=\"list-style-type: none;\">' + '<% for (var i=0; i<datasets.length; i++) { %>' + '<li style=\"\">' + '<span style=\"background-color:<%=datasets[i].bar.fillColor%>;' + ' display: block; float: left; margin-right: 10px; width: 15px; height: 15px;\"></span>' + '<% if (datasets[i].bar.label) { %><%= datasets[i].bar.label %><% } %>' + '</li>' + '<% } %>' + '</ul>'
//geometry: 'horizontal'
});
var leg2 = document.createElement("div");
leg2.innerHTML = window.myBar2.generateLegend();
document.getElementById("canvas2").parentNode.appendChild(leg2);
window.Chart.helpers.each(leg2.firstChild.childNodes, function(node, ind) {
window.Chart.helpers.addEvent(node, "mouseover", function() {
var activeSegment = window.myBar2.datasets[ind];
activeSegment.bar.save();
window.myBar2.showTooltip([activeSegment.bar]);
activeSegment.bar.restore();
});
}, this);
window.Chart.helpers.addEvent(leg2.firstChild, "mouseout", function() {
window.myBar2.draw();
window.myBar2.activeElements = [];
});
var ctx3 = document.getElementById("canvas3").getContext("2d");
window.myBar3 = new Chart(ctx3).Linear(barChartData3, {
range: {
startValue: -100,
endValue: 500
},
responsive: true,
animationEasing: "easeOutElastic",
scaleFontSize: 12,
axisWidth: 6,
axisColor: '#9e343f',
majorTicks: {
interval: 100,
customValues: [-20, 0, 50, 110, 130, 200, 500],
width: 6,
height: 1,
offset: 0,
color: '#fff'
},
tickLabels: {
units: '%',
interval: 100,
customValues: [-20, 0, 50, 110, 130, 200, 500],
offset: -9,
color: '#777b80'
},
multiTooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
legendTemplate: '<ul id=\"legend-3-holder\" style=\"list-style-type: none;\">' + '<% for (var i=0; i<datasets.length; i++) { %>' + '<li style=\"\">' + '<span style=\"background-color:<%=datasets[i].bar.fillColor%>;' + ' display: block; float: left; margin-right: 10px; width: 15px; height: 15px;\"></span>' + '<% if (datasets[i].bar.label) { %><%= datasets[i].bar.label %><% } %>' + '</li>' + '<% } %>' + '</ul>'
//geometry: 'horizontal'
});
var leg3 = document.createElement("div");
leg3.innerHTML = window.myBar3.generateLegend();
document.getElementById("canvas3").parentNode.appendChild(leg3);
window.Chart.helpers.each(leg3.firstChild.childNodes, function(node, ind) {
window.Chart.helpers.addEvent(node, "mouseover", function() {
var activeSegment = window.myBar3.datasets[ind];
activeSegment.bar.save();
window.myBar3.showTooltip([activeSegment.bar]);
activeSegment.bar.restore();
});
}, this);
window.Chart.helpers.addEvent(leg3.firstChild, "mouseout", function() {
window.myBar3.draw();
window.myBar3.activeElements = [];
});
var ctx4 = document.getElementById("canvas4").getContext("2d");
window.myBar4 = new Chart(ctx4).Linear(barChartData4, {
range: {
startValue: 0,
endValue: 500
},
responsive: true,
scaleFontSize: 12,
axisWidth: 4,
tickLabels: {
units: '$',
interval: 100,
customValues: [],
offset: -9,
color: '#777b80'
},
geometry: 'horizontal'
});
var ctx5 = document.getElementById("canvas5").getContext("2d");
window.myBar5 = new Chart(ctx5).Linear(barChartData5, {
range: {
startValue: -2,
endValue: 5.5
},
responsive: true,
animationEasing: "easeOutElastic",
scaleFontSize: 16,
axisWidth: 35,
axisColor: '#a4ca91',
tickLabels: {
units: 'V',
interval: 1,
customValues: [],
offset: 22,
color: '#777b80'
},
majorTicks: {
interval: 1,
customValues: [],
width: 7,
height: 1,
offset: -15,
color: '#fff'
},
geometry: 'horizontal'
});
var ctx6 = document.getElementById("canvas6").getContext("2d");
window.myBar6 = new Chart(ctx6).Linear(barChartData6, {
range: {
startValue: -100,
endValue: 200
},
responsive: true,
animationEasing: "easeOutElastic",
axisColor: '#c5c7cf',
majorTicks: {
interval: 0,
height: 2
},
minorTicks: {
interval: 25,
width: 2,
offset: -2
},
tickLabels: {
interval: 100
},
scaleColorRanges: [{
start: -50,
end: 30,
color: '#fe5066'
}, {
start: 30,
end: 130,
color: '#82e668'
}, {
start: 130,
end: 180,
color: '#1224fc'
}],
geometry: 'hhorizontal'
});
var ctx7 = document.getElementById("canvas7").getContext("2d");
window.myBar7 = new Chart(ctx7).Linear(barChartData7, {
range: {
startValue: -50,
endValue: 50
},
responsive: true,
animationEasing: "easeOutElastic",
axisColor: '#c5c7cf',
majorTicks: {
interval: 0,
height: 2
},
minorTicks: {
interval: 25,
width: 2,
offset: -2
},
tickLabels: {
interval: 25
},
scaleColorRanges: [{
start: -20,
end: 0,
color: '#fe5066'
}, {
start: 30,
end: 50,
color: '#1224fc'
}],
geometry: 'horizontal',
legendTemplate: '<% for (var i=0; i<datasets.length; i++) { %>' + '<div style=\"background-color:<%=datasets[i].bar.fillColor%>;' + ' display: block; float: left; margin: 6px; width: 15px; height: 15px;\"></div>' + '<span style=\" display: block; float: left; margin: 6px; \">' + '<% if (datasets[i].bar.label) { %><%= datasets[i].bar.label %><% } %>' + '</span>' + '<% } %>'
});
setInterval(function() {
for (var i = 0; i < window.myBar7.datasets.length; i++) {
window.myBar7.datasets[i].value = randomScalingFactor(90) - 50;
}
//window.myBar7.removeData();
window.myBar7.update();
}, 10000);
var leg7 = document.createElement("div");
leg7.setAttribute('id', 'legend-7-holder');
leg7.innerHTML = window.myBar7.generateLegend();
document.getElementById("canvas7").parentNode.appendChild(leg7);
window.Chart.helpers.each(leg7.getElementsByTagName('span'), function(node, ind) {
window.Chart.helpers.addEvent(node, "mouseover", function() {
var activeSegment = window.myBar7.datasets[ind];
activeSegment.bar.save();
window.myBar7.showTooltip([activeSegment.bar]);
activeSegment.bar.restore();
});
}, this);
window.Chart.helpers.each(leg7.getElementsByTagName('span'), function(node, ind) {
window.Chart.helpers.addEvent(node, "mouseout", function() {
window.myBar7.draw();
window.myBar7.activeElements = [];
});
}, this);
var ctx8 = document.getElementById("canvas8").getContext("2d");
window.myBar8 = new Chart(ctx8).Linear(barChartData8, {
range: {
startValue: -50,
endValue: 50
},
responsive: true,
axisColor: '#c5c7cf',
majorTicks: {
interval: 0,
height: 2
},
minorTicks: {
interval: 25,
width: 2,
offset: -2
},
tickLabels: {
interval: 25
},
scaleColorRanges: [{
start: 30,
end: 50,
color: '#fe5066'
}, {
start: -50,
end: -30,
color: '#1224fc'
}],
geometry: 'vertical'
});
setInterval(function() {
window.myBar8.datasets[0].value = randomScalingFactor(90) - 45;
window.myBar8.datasets[1].value = randomScalingFactor(90) - 45;
window.myBar8.datasets[2].value = randomScalingFactor(90) - 45;
window.myBar8.update();
}, 10000);
var ctx9 = document.getElementById("canvas9").getContext("2d");
window.myBar9 = new Chart(ctx9).Linear(barChartData9, {
range: {
startValue: -150,
endValue: 150
},
responsive: true,
animationEasing: "easeOutElastic",
axisColor: '#c5c7cf',
axisWidth: 0,
majorTicks: {
interval: 50,
width: 6,
height: 3,
offset: 1,
color: '#fe013a'
},
minorTicks: {
interval: 6.25,
width: 2,
height: 2,
offset: 0,
color: '#e1f305'
},
tickLabels: {
interval: 50,
units: 'kW'
},
multiTooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
legendTemplate: '<% for (var i=0; i<datasets.length; i++) { %>' + '<div style="display: block; width: 100%; height: 30px;">' + '<div style=\"background-color:<%=datasets[i].bar.fillColor%>;' + 'display: block; float: left; margin: 6px; width: 15px; height: 15px;\"></div>' + '<span style=\" display: block; float: left; margin: 6px; \">' + '<% if (datasets[i].bar.label) { %><%= datasets[i].bar.label %><% } %>' + '</span>' + '</div>' + '<% } %>'
});
setInterval(function() {
window.myBar9.datasets[0].value = randomScalingFactor(280) - 140;
window.myBar9.datasets[1].value = randomScalingFactor(280) - 140;
window.myBar9.datasets[2].value = randomScalingFactor(280) - 140;
window.myBar9.update();
}, 10000);
var leg9 = document.createElement("div");
leg9.setAttribute('id', 'legend-9-holder');
leg9.innerHTML = window.myBar9.generateLegend();
document.getElementById("canvas9").parentNode.parentNode.appendChild(leg9);
window.Chart.helpers.each(leg9.getElementsByTagName('span'), function(node, ind) {
window.Chart.helpers.addEvent(node, "mouseover", function() {
var activeSegment = window.myBar9.datasets[ind];
activeSegment.bar.save();
window.myBar9.showTooltip([activeSegment.bar]);
activeSegment.bar.restore();
});
}, this);
window.Chart.helpers.each(leg9.getElementsByTagName('span'), function(node, ind) {
window.Chart.helpers.addEvent(node, "mouseout", function() {
window.myBar9.draw();
window.myBar9.activeElements = [];
});
}, this);
var ctx10 = document.getElementById("canvas10").getContext("2d");
window.myBar10 = new Chart(ctx10).Linear(barChartData10, {
range: {
startValue: -150,
endValue: 150
},
responsive: true,
animationSteps: 90,
axisColor: '#c5c7cf',
axisWidth: 6,
majorTicks: {
interval: 50,
width: 8,
height: 1,
offset: 1,
color: '#000'
},
minorTicks: {
interval: 12.5,
width: 3,
height: 1,
offset: 0,
color: '#000'
},
tickLabels: {
interval: 50,
units: 'mA',
offset: -17
},
geometry: 'horizontal',
scaleColorRanges: [{
start: -150,
end: -100,
color: '#1b02f7'
}, {
start: -100,
end: -30,
color: '#8888fb'
}, {
start: -30,
end: 30,
color: '#47fe12'
}, {
start: 30,
end: 100,
color: '#e1e10d'
}, {
start: 100,
end: 150,
color: '#fe1229'
}],
});
setInterval(function() {
window.myBar10.datasets[0].value = randomScalingFactor(280) - 140;
window.myBar10.update();
}, 10000);
var ctx11 = document.getElementById("canvas11").getContext("2d");
window.myBar11 = new Chart(ctx11).Linear(barChartData11, {
range: {
startValue: -15,
endValue: 15
},
responsive: true,
animationSteps: 90,
axisColor: '#e9eaed',
axisWidth: 40,
majorTicks: {
interval: 5,
width: 30,
height: 1,
offset: 0,
color: '#a9adb8'
},
minorTicks: {
interval: 1,
width: 20,
height: 1,
offset: 0,
color: '#cfd2d8'
},
tickLabels: {
interval: 5,
units: '%',
offset: 24,
color: 'red'
},
geometry: 'ghorizontal'
});
setInterval(function() {
window.myBar11.datasets[6].value = randomScalingFactor(28) - 14;
window.myBar11.datasets[7].value = randomScalingFactor(28) - 14;
window.myBar11.datasets[8].value = randomScalingFactor(28) - 14;
window.myBar11.update();
}, 10000);
var ctx12 = document.getElementById("canvas12").getContext("2d");
window.myBar12 = new Chart(ctx12).Linear(barChartData12, {
range: {
startValue: -10,
endValue: 25
},
responsive: true,
animationSteps: 90,
axisColor: '#484284',
axisWidth: 4,
majorTicks: {
interval: 5,
width: 3,
height: 1,
offset: 0,
color: '#f3f4f5'
},
minorTicks: {
interval: 1,
width: 2,
height: 1,
offset: 0,
color: '#f4f5f7'
},
tickLabels: {
interval: 5,
units: '%',
offset: 24,
color: 'red'
},
geometry: 'horizontal',
legendTemplate: 'Test for custom image points'
});
//window.myBar12.generateLegend();
setInterval(function() {
window.myBar12.datasets[0].value = randomScalingFactor(35) - 10;
window.myBar12.datasets[1].value = randomScalingFactor(35) - 10;
window.myBar12.datasets[2].value = randomScalingFactor(35) - 10;
window.myBar12.update();
}, 10000);
}
</script>
<span id="buffer-extension-hover-button" style="display: none;position: absolute;z-index: 8675309;width: 100px;height: 25px;background-image: url(http://static.bufferapp.com/images/extensions/img/buffer-hover-icon@1x.png);background-size: 100px 25px;opacity: 0.9;cursor: pointer;"></span></body>
</html>
(function() {
"use strict";
var root = this,
Chart = root.Chart,
helpers = Chart.helpers;
var defaultConfig = {
geometry: 'vertical', // horizontal/vertical
range: {
startValue: -150,
endValue: 300
}, // startValue/endValue
axisColor: '#c0c4cf',
axisWidth: 6, // set to 0 so no axis line is displayed
majorTicks: {},
minorTicks: {},
tickLabels: {},
scaleColorRanges: [],
dataset: {
value: 0,
indicator: 'range', // 'range' or 'point' indicator
shape: 'circle', // for point indicator available options - 'circle', 'rect', 'tringle'
width: 8,
height: 5, // for point indicator
offset: 10, // for range indicator from center of the axis line
color: '#51f40b',
colorRanges: [{
startpoint: 0,
breakpoint: 20,
color: '#6154ab'
}, {
startpoint: 20,
breakpoint: 70,
color: '#74f40b'
}, {
startpoint: 70,
breakpoint: 100,
color: '#fd0902'
}], // for the range, array with breakpoints and colors
tooltipRanges: [{
startpoint: 0,
breakpoint: 20,
tooltip: 'low'
}, {
startpoint: 20,
breakpoint: 70,
tooltip: 'normal'
}, {
startpoint: 70,
breakpoint: 100,
tooltip: 'high'
}],
img: '',
label: ''
},
padding: {
top: 0,
bottom: 0,
left: 0,
right: 0
},
multiTooltipTitles: 'Total'
};
// Linear guage scale class
Chart.LinearScale = Chart.Element.extend({
initialize: function() {
// Calculate size of lable
this.textDimention = function(val) {
var width = 0;
var height = this.fontSize;
var str = val + "";
width = (height / 1.5) * str.length;
return {
width: width,
height: height
};
};
// Prepare values for ticks
// Major ticks
if (typeof(this.majorTicks) == 'object' && this.majorTicks !== null && this.majorTicks.interval > 0) {
var majorVals = [];
if (this.majorTicks.customValues.length > 0) {
majorVals = this.majorTicks.customValues;
} else {
var interval = this.majorTicks.interval;
var numOfMajor = (this.range.endValue - this.range.startValue) / interval;
for (var i = 0; i < numOfMajor - 1; i++) {
majorVals.push(this.range.startValue + (interval * (i + 1)));
}
}
this.majorVals = majorVals;
}
// Minor ticks
if (typeof(this.minorTicks) == 'object' && this.minorTicks !== null && this.minorTicks.interval > 0) {
var minorVals = [];
if (this.minorTicks.customValues.length > 0) {
minorVals = this.minorTicks.customValues;
} else {
var interval = this.minorTicks.interval;
var numOfMinor = (this.range.endValue - this.range.startValue) / interval;
for (var i = 0; i < numOfMinor - 1; i++) {
minorVals.push(this.range.startValue + (interval * (i + 1)));
}
}
this.minorVals = minorVals;
}
// Labels of ticks
if (typeof(this.tickLabels) == 'object' && this.tickLabels !== null && this.tickLabels.interval > 0) {
var labelVals = [];
if (this.tickLabels.customValues.length > 0) {
labelVals = this.tickLabels.customValues;
} else {
var interval = this.tickLabels.interval;
var numOfLabels = ((this.range.endValue - this.range.startValue) / interval) + 1;
for (var i = 0; i < numOfLabels; i++) {
labelVals.push(this.range.startValue + (interval * i));
}
}
this.labelVals = labelVals;
}
// Horizontal orientation
if (this.geometry == 'horizontal') {
this.scalePoint = function(val) {
var displayW = this.width - this.padding.left - this.padding.right;
var rangeH = this.range.endValue - this.range.startValue;
var factor = displayW / rangeH;
return Math.round((val * factor) + this.padding.left - (this.range.startValue * factor));
};
this.base = this.height / 2; // center of chart located at the center of canvas
} else {
this.scalePoint = function(val) {
var displayH = this.height - this.padding.top - this.padding.bottom;
var rangeH = this.range.endValue - this.range.startValue;
var factor = displayH / rangeH;
return Math.round(this.height - (val * factor - (this.range.startValue * factor)) - this.padding.bottom);
};
this.base = this.width / 2; // center of chart located at the center of canvas
}
},
update: function(newProps) {
helpers.extend(this, newProps);
this.initialize();
},
draw: function() {
var ctx = this.ctx;
ctx.textBaseline = "alphabetic";
ctx.textAlign = "start";
// Horizontal orientation
if (this.geometry == 'horizontal') {
// Draw scale background
ctx.beginPath();
ctx.fillStyle = this.axisColor;
ctx.rect(this.padding.left, this.base - this.axisWidth / 2,
this.width - this.padding.left - this.padding.right, this.axisWidth);
ctx.fill();
ctx.closePath();
// Draw scale color ranges
if (typeof(this.scaleColorRanges) == 'object' && this.scaleColorRanges.length > 0) {
helpers.each(this.scaleColorRanges, function(d, ind) {
var width = this.scalePoint(d.end) - this.scalePoint(d.start);
var height = this.axisWidth;
ctx.beginPath();
ctx.fillStyle = d.color;
ctx.rect(
this.scalePoint(d.start),
this.base - (height / 2),
width,
height
);
ctx.fill();
}, this);
}
// Draw scale minor ticks
ctx.beginPath();
if (typeof(this.minorVals) == 'object' && this.minorVals.length > 0) {
ctx.fillStyle = this.minorTicks.color;
ctx.strokeStyle = this.minorTicks.color;
ctx.lineWidth = this.minorTicks.height;
for (var v = 0; v < this.minorVals.length; v++) {
var val = this.minorVals[v];
ctx.moveTo(this.scalePoint(val) - (this.minorTicks.height / 2),
this.base - (this.minorTicks.width / 2) + this.minorTicks.offset);
ctx.lineTo(this.scalePoint(val) - (this.minorTicks.height / 2), (this.base - (this.minorTicks.width / 2) + this.minorTicks.offset) + this.minorTicks.width);
ctx.stroke();
}
}
ctx.closePath();
// Draw scale major ticks
ctx.beginPath();
if (typeof(this.majorVals) == 'object' && this.majorVals.length > 0) {
ctx.fillStyle = this.majorTicks.color;
ctx.strokeStyle = this.majorTicks.color;
ctx.lineWidth = this.majorTicks.height;
for (var v = 0; v < this.majorVals.length; v++) {
var val = this.majorVals[v];
ctx.moveTo(this.scalePoint(val) - (this.majorTicks.height / 2),
this.base - (this.majorTicks.width / 2) + this.majorTicks.offset);
ctx.lineTo(this.scalePoint(val) - (this.majorTicks.height / 2), (this.base - (this.majorTicks.width / 2) + this.majorTicks.offset) + this.majorTicks.width);
ctx.stroke();
}
}
ctx.closePath();
// Draw scale labels
ctx.beginPath();
if (typeof(this.labelVals) == 'object' && this.labelVals.length > 0) {
ctx.fillStyle = this.tickLabels.color;
ctx.font = this.font;
for (var v = 0; v < this.labelVals.length; v++) {
var val = this.labelVals[v];
if (this.showLabels) {
var text = val + this.tickLabels.units;
ctx.fillText(text,
this.scalePoint(val) - this.textDimention(text).width / 2,
this.base + (this.tickLabels.offset > 0 ? 0 : this.textDimention(text).height) - this.tickLabels.offset
);
}
}
}
ctx.closePath();
} else {
// Draw scale background
ctx.beginPath();
ctx.fillStyle = this.axisColor;
ctx.rect(this.base - this.axisWidth / 2, this.padding.top, this.axisWidth, this.height - this.padding.top - this.padding.bottom);
ctx.fill();
ctx.closePath();
// Draw scale color ranges
if (typeof(this.scaleColorRanges) == 'object' && this.scaleColorRanges.length > 0) {
helpers.each(this.scaleColorRanges, function(d, ind) {
var width = this.axisWidth;
var height = this.scalePoint(d.start) - this.scalePoint(d.end);
ctx.beginPath();
ctx.fillStyle = d.color;
ctx.rect(
this.base - (width / 2),
this.scalePoint(d.end),
width,
height
);
ctx.fill();
}, this);
}
// Draw scale minor ticks
ctx.beginPath();
if (typeof(this.minorVals) == 'object' && this.minorVals.length > 0) {
ctx.fillStyle = this.minorTicks.color;
ctx.strokeStyle = this.minorTicks.color;
ctx.lineWidth = this.minorTicks.height;
for (var v = 0; v < this.minorVals.length; v++) {
var val = this.minorVals[v];
ctx.moveTo(this.base - (this.minorTicks.width / 2) + this.minorTicks.offset,
this.scalePoint(val) - (this.minorTicks.height / 2));
ctx.lineTo((this.base - (this.minorTicks.width / 2) + this.minorTicks.offset) + this.minorTicks.width,
this.scalePoint(val) - (this.minorTicks.height / 2));
ctx.stroke();
}
}
ctx.closePath();
// Draw scale major ticks
ctx.beginPath();
if (typeof(this.majorVals) == 'object' && this.majorVals.length > 0) {
ctx.fillStyle = this.majorTicks.color;
ctx.strokeStyle = this.majorTicks.color;
ctx.lineWidth = this.majorTicks.height;
for (var v = 0; v < this.majorVals.length; v++) {
var val = this.majorVals[v];
ctx.moveTo(this.base - (this.majorTicks.width / 2) + this.majorTicks.offset,
this.scalePoint(val) - (this.majorTicks.height / 2));
ctx.lineTo((this.base - (this.majorTicks.width / 2) + this.majorTicks.offset) + this.majorTicks.width,
this.scalePoint(val) - (this.majorTicks.height / 2));
ctx.stroke();
}
}
ctx.closePath();
// Draw scale labels
ctx.beginPath();
if (typeof(this.labelVals) == 'object' && this.labelVals.length > 0) {
ctx.fillStyle = this.tickLabels.color;
ctx.font = this.font;
for (var v = 0; v < this.labelVals.length; v++) {
var val = this.labelVals[v];
if (this.showLabels) {
var text = val + this.tickLabels.units;
ctx.fillText(text,
this.base - (this.tickLabels.offset > 0 ? 0 : this.textDimention(text).width) + this.tickLabels.offset,
this.scalePoint(val) + this.textDimention(text).height / 4
);
}
}
}
ctx.closePath();
}
}
});
Chart.Type.extend({
name: "Linear",
defaults: defaultConfig,
initialize: function(data) {
//Expose options as a scope variable here so we can access it in the ScaleClass
var options = this.options;
var padding = this.padding = {};
padding.top = this.options.scaleFontSize + this.options.padding.top;
padding.bottom = this.options.scaleFontSize + this.options.padding.bottom;
padding.left = this.options.scaleFontSize * 2 + this.options.padding.left;
padding.right = this.options.scaleFontSize * 2 + this.options.padding.right;
this.RangeClass = Chart.Element.extend({
strokeWidth: this.options.barStrokeWidth,
showStroke: this.options.barShowStroke,
ctx: this.chart.ctx,
rangeColorImage: null,
generateImage: function(colors, widths) {
var width = 0;
for (var i = 0; i < widths.length; i++)
width += widths[i];
var canvas = document.createElement('canvas'),
c = canvas.getContext('2d');
canvas.width = width;
canvas.height = 1;
var gw2 = widths[0];
var grd = c.createLinearGradient(0, 0, width, 0);
grd.addColorStop(0, colors[0]);
for (var k = 0; k < colors.length; k++) {
if ((k + 1) < colors.length) {
gw2 += widths[k + 1] / 2;
grd.addColorStop(gw2 / width, colors[k + 1]);
} else grd.addColorStop(1, colors[k]);
this.ctx.closePath();
if ((k + 1) < colors.length)
gw2 += widths[k + 1] / 2;
}
c.fillStyle = grd;
c.fillRect(0, 0, width, 20);
var imgd = c.getImageData(0, 0, canvas.width, 1);
return imgd;
},
getColor: function() {
var startColor = this.fillColor;
var out = 0;
var rc = 0;
var gc = 0;
var bc = 0;
var ac = 1;
// If image data did not filled yet
if (this.rangeColorImage === null) {
var colors = [];
var widths = [];
//colors.push(startColor);
helpers.each(this.colorRanges, function(cl, i) {
if (i === 0)
widths.push((cl.breakpoint - this.axisRange.startValue) * this.scaleValue);
else
widths.push((cl.breakpoint - this.colorRanges[i - 1].breakpoint) * this.scaleValue);
colors.push(cl.color);
}, this);
this.rangeColorImages = this.generateImage(colors, widths);
}
var start = this.axisRange.startValue;
var k = Math.ceil((this.value - start) * this.scaleValue);
rc = this.rangeColorImages.data[k * 4 + 0];
gc = this.rangeColorImages.data[k * 4 + 1];
bc = this.rangeColorImages.data[k * 4 + 2];
ac = this.rangeColorImages.data[k * 4 + 3];
return 'RGBA(' + rc + ', ' + gc + ', ' + bc + ', ' + ac + ')';
},
draw: function() {
var ctx = this.ctx,
leftX, leftY, rightX, rightY;
if (this.img !== null) {
if (this.geometry == 'horizontal') {
var x = this.leftX = this.startPoint + ((this.value - this.startValue) * this.scaleValue) - this.width / 2,
y = this.leftY = this.base - this.width + this.offset * (-1),
width = this.width,
height = this.height;
} else {
var y = this.leftX = this.startPoint - ((this.value - this.startValue) * this.scaleValue) - this.height / 2,
x = this.leftY = this.base + this.offset,
width = this.width,
height = this.height;
}
this.x = x + this.width / 2;
this.y = y + this.height / 2;
this.rightX = this.leftX + this.width;
this.rightY = this.leftY + this.height;
ctx.drawImage(this.img, 0, 0, this.img.width, this.img.height, x, y, width, height);
return;
}
var startColor = this.fillColor;
// Implement color ranges
if (typeof(this.colorRanges) == 'object' && this.colorRanges.length > 0) {
startColor = this.getColor();
}
ctx.beginPath();
ctx.fillStyle = startColor;
ctx.strokeStyle = this.strokeColor;
ctx.lineWidth = 1;
if (this.indicator == 'range') {
if (this.geometry == 'horizontal') {
leftX = this.leftX = this.startPoint;
leftY = this.leftY = this.base - (this.width / 2) + this.offset * (-1);
rightX = this.rightX = this.startPoint + ((this.value - this.startValue) * this.scaleValue);
rightY = this.rightY = this.base + (this.width / 2) + this.offset * (-1);
// tooltips position
this.x = rightX;
this.y = this.base - this.offset;
} else {
leftX = this.leftX = this.base - (this.width / 2) + this.offset;
leftY = this.leftY = this.startPoint;
rightX = this.rightX = this.base + (this.width / 2) + this.offset;
rightY = this.rightY = this.startPoint - ((this.value - this.startValue) * this.scaleValue);
// tooltips position
this.x = this.base + this.offset;
this.y = rightY;
}
ctx.moveTo(leftX, leftY);
ctx.lineTo(rightX, leftY);
ctx.lineTo(rightX, rightY);
ctx.lineTo(leftX, rightY);
}
if (this.indicator == 'point') {
if (this.shape == 'circle') {
if (this.geometry == 'horizontal') {
var x = this.x = this.startPoint + ((this.value - this.startValue) * this.scaleValue),
y = this.y = this.base - (this.height / 2) + this.offset * (-1),
r = this.width / 2,
sAngle = 0,
eAngle = helpers.radians(360),
counterclockwise = false;
} else {
var y = this.y = this.startPoint - ((this.value - this.startValue) * this.scaleValue),
x = this.x = this.base + (this.width / 2) + this.offset,
r = this.width / 2,
sAngle = 0,
eAngle = helpers.radians(360),
counterclockwise = false;
}
this.leftX = x - this.height / 2;
this.rightX = x + this.height / 2;
this.leftY = y - this.height / 2;
this.rightY = y + this.height / 2;
ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);
}
if (this.shape == 'rect') {
if (this.geometry == 'horizontal') {
var x = this.leftX = this.startPoint + ((this.value - this.startValue) * this.scaleValue) - this.width / 2,
y = this.leftY = this.base - this.width + this.offset * (-1),
width = this.width,
height = this.height;
} else {
var y = this.leftY = this.startPoint - ((this.value - this.startValue) * this.scaleValue) - this.height / 2,
x = this.leftX = this.base + this.offset,
width = this.width,
height = this.height;
}
this.x = x + this.width / 2;
this.y = y + this.height / 2;
this.rightX = this.leftX + this.width;
this.rightY = this.leftY + this.height;
ctx.rect(x, y, width, height);
}
if (this.shape == 'triangle') {
if (this.geometry == 'horizontal') {
var x1 = this.startPoint + ((this.value - this.startValue) * this.scaleValue),
y1 = this.base + this.offset * (-1),
x2 = this.leftX = x1 - this.width / 2,
y2 = this.leftY = y1 - this.height,
x3 = x2 + this.width,
y3 = y2;
} else {
var y1 = this.startPoint - ((this.value - this.startValue) * this.scaleValue),
x1 = this.leftX = this.base + this.offset,
x2 = x1 + this.width,
y2 = this.leftY = y1 - this.height / 2,
x3 = x2,
y3 = y2 + this.height;
}
this.x = this.leftX + this.width / 2;
this.y = this.leftY + this.height / 2;
this.rightX = this.leftX + this.width;
this.rightY = this.leftY + this.height;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
}
if (this.shape == 'inverted-triangle') {
if (this.geometry == 'horizontal') {
var x1 = this.startPoint + ((this.value - this.startValue) * this.scaleValue),
y1 = this.leftY = this.base + this.offset * (-1) - this.height,
x2 = this.leftX = x1 - this.width / 2,
y2 = y1 + this.height,
x3 = x2 + this.width,
y3 = y2;
} else {
var y1 = this.startPoint - ((this.value - this.startValue) * this.scaleValue),
x1 = this.base + this.offset + this.width,
x2 = this.leftX = x1 - this.width,
y2 = this.leftY = y1 - this.height / 2,
x3 = x2,
y3 = y2 + this.height;
}
this.x = this.leftX + this.width / 2;
this.y = this.leftY + this.height / 2;
this.rightX = this.leftX + this.width;
this.rightY = this.leftY + this.height;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
}
if (this.shape == 'bowtie') {
if (this.geometry == 'horizontal') {
var local_height = this.height / 2;
var local_width = this.width;
var local_base = this.base - local_height;
var x1 = this.startPoint + ((this.value - this.startValue) * this.scaleValue),
y1 = this.leftY = local_base + this.offset * (-1) + local_height,
x2 = this.leftX = x1 - local_width / 2,
y2 = y1 + local_height,
x3 = x2 + local_width,
y3 = y2;
var x11 = this.startPoint + ((this.value - this.startValue) * this.scaleValue),
y11 = this.base + this.offset * (-1),
x21 = x11 - local_width / 2,
y21 = y11 - local_height,
x31 = x21 + local_width,
y31 = y21;
} else {
var local_width = this.width / 2;
var local_base = this.base - local_width;
var y1 = this.startPoint - ((this.value - this.startValue) * this.scaleValue),
x1 = local_base + this.offset + local_width,
x2 = this.leftX = x1 - local_width,
y2 = this.leftY = y1 - this.height / 2,
x3 = x2,
y3 = y2 + this.height;
var y11 = this.startPoint - ((this.value - this.startValue) * this.scaleValue),
x11 = this.base + this.offset,
x21 = x11 + local_width,
y21 = y11 - this.height / 2,
x31 = x21,
y31 = y21 + this.height;
}
this.x = this.leftX + this.width / 2;
this.y = this.leftY + this.height / 2;
this.rightX = this.leftX + this.width;
this.rightY = this.leftY + this.height;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.lineTo(x11, y11);
ctx.lineTo(x21, y21);
ctx.lineTo(x31, y31);
}
if (this.shape == 'diamond') {
if (this.geometry == 'horizontal') {
var local_height = this.height / 2;
var local_width = this.width;
var local_base = this.base - local_height;
var x1 = this.startPoint + ((this.value - this.startValue) * this.scaleValue),
y1 = this.leftY = local_base + this.offset * (-1),
x2 = this.leftX = x1 - local_width / 2,
y2 = y1 + local_height,
x3 = x2 + local_width,
y3 = y2;
var x11 = this.startPoint + ((this.value - this.startValue) * this.scaleValue),
y11 = this.base + this.offset * (-1) + local_height,
x21 = x11 - local_width / 2,
y21 = y11 - local_height,
x31 = x21 + local_width,
y31 = y21;
} else {
var local_width = this.width / 2;
var local_base = this.base - local_width;
var y1 = this.startPoint - ((this.value - this.startValue) * this.scaleValue),
x1 = this.base + this.offset + local_width,
x2 = x1 - local_width,
y2 = this.leftY = y1 - this.height / 2,
x3 = x2,
y3 = y2 + this.height;
var y11 = this.startPoint - ((this.value - this.startValue) * this.scaleValue),
x11 = this.leftX = local_base + this.offset,
x21 = x11 + local_width,
y21 = y11 - this.height / 2,
x31 = x21,
y31 = y21 + this.height;
}
this.x = this.leftX + this.width / 2;
this.y = this.leftY + this.height / 2;
this.rightX = this.leftX + this.width;
this.rightY = this.leftY + this.height;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.lineTo(x11, y11);
ctx.lineTo(x21, y21);
ctx.lineTo(x31, y31);
}
}
ctx.fill();
},
inRange: function(chartX, chartY) {
if (this.geometry == 'horizontal') {
return ((chartX >= this.leftX && chartX <= this.rightX) || (chartX >= this.rightX && chartX <= this.leftX)) &&
(chartY <= this.rightY && chartY >= this.leftY);
} else {
return (chartX >= this.leftX && chartX <= this.rightX) && ((chartY >= this.rightY && chartY <= this.leftY) ||
(chartY >= this.leftY && chartY <= this.rightY));
}
}
});
this.startPoint = options.range.startValue > 0 ? options.range.startValue : 0;
this.startPoint = options.range.endValue <= 0 ? options.range.startValue : this.startPoint;
this.startValue = this.startPoint;
this.scaleValue = 0;
this.base = 0;
if (options.geometry == 'horizontal') {
this.scaleValue = (this.chart.width - (this.padding.left + this.padding.right)) / (options.range.endValue - options.range.startValue);
this.startPoint = this.padding.left + (Math.abs(options.range.startValue * this.scaleValue) - (Math.abs(this.startPoint) * this.scaleValue));
this.base = this.chart.height / 2;
} else {
this.scaleValue = (this.chart.height - (this.padding.top + this.padding.bottom)) / (options.range.endValue - options.range.startValue);
this.startPoint = this.chart.height - (this.padding.bottom +
(Math.abs(options.range.startValue * this.scaleValue) - (Math.abs(this.startPoint) * this.scaleValue)));
this.base = this.chart.width / 2;
}
this.datasets = [];
//Iterate through each of the datasets, and build this into a property of the chart
if (typeof(data) !== 'undefined' && data !== null && data.length > 0) {
helpers.each(data, function(dataset, datasetIndex) {
this.addData(dataset);
}, this);
}
//Set up tooltip events on the chart
if (this.options.showTooltips) {
helpers.bindEvents(this, this.options.tooltipEvents, function(evt) {
var activeBars = (evt.type !== 'mouseout') ? this.getBarsAtEvent(evt) : [];
helpers.each(this.datasets, function(data) {
data.bar.restore(['fillColor', 'strokeColor']);
});
helpers.each(activeBars, function(activeBar) {
activeBar.fillColor = activeBar.highlightFill;
activeBar.strokeColor = activeBar.highlightStroke;
});
//this.update();
this.showTooltip(activeBars);
});
}
this.buildScale();
this.render();
},
getBarsAtEvent: function(e) {
var barsArray = [],
eventPosition = helpers.getRelativePosition(e),
barIndex;
for (var datasetIndex = 0; datasetIndex < this.datasets.length; datasetIndex++) {
if (this.datasets[datasetIndex].bar.inRange(eventPosition.x, eventPosition.y)) {
barsArray.push(this.datasets[datasetIndex].bar);
}
}
return barsArray;
},
buildScale: function() {
var o = this.options;
// Major ticks defaults
var majorTicks = {
interval: o.majorTicks.interval || 0,
customValues: o.majorTicks.customValues || [],
width: o.majorTicks.width || 6,
height: o.majorTicks.height || 0.5,
offset: o.majorTicks.offset || 0,
color: o.majorTicks.color || '#fff'
}
// Minor ticks defaults
var minorTicks = {
interval: o.minorTicks.interval || 0,
customValues: o.minorTicks.customValues || [],
width: o.minorTicks.width || 6,
height: o.minorTicks.height || 0.5,
offset: o.minorTicks.offset || 0,
color: o.minorTicks.color || '#fff'
}
// Tick labels defaults
var tickLabels = {
units: o.tickLabels.units || '',
interval: o.tickLabels.interval || 0,
customValues: o.tickLabels.customValues || [],
offset: o.tickLabels.offset || -9,
color: o.tickLabels.color || '#777b80'
}
var scaleOptions = {
templateString: o.scaleLabel,
height: this.chart.height,
width: this.chart.width,
ctx: this.chart.ctx,
textColor: o.scaleFontColor,
fontSize: o.scaleFontSize,
fontStyle: o.scaleFontStyle,
fontFamily: o.scaleFontFamily,
integersOnly: o.scaleIntegersOnly,
font: helpers.fontString(o.scaleFontSize, o.scaleFontStyle, o.scaleFontFamily),
padding: this.padding,
showLabels: o.scaleShowLabels,
display: o.showScale,
axisWidth: o.axisWidth,
axisColor: o.axisColor,
geometry: o.geometry,
majorTicks: majorTicks,
minorTicks: minorTicks,
tickLabels: tickLabels,
range: o.range,
scaleColorRanges: o.scaleColorRanges || []
}
this.scale = new Chart.LinearScale(scaleOptions);
},
update: function() {
var options = this.options;
this.startPoint = options.range.startValue > 0 ? options.range.startValue : 0;
this.startPoint = options.range.endValue <= 0 ? options.range.startValue : this.startPoint;
this.startValue = this.startPoint;
this.scaleValue = 0;
this.base = 0;
if (options.geometry == 'horizontal') {
this.scaleValue = (this.chart.width - (this.padding.left + this.padding.right)) / (options.range.endValue - options.range.startValue);
this.startPoint = this.padding.left + (Math.abs(options.range.startValue * this.scaleValue) - (Math.abs(this.startPoint) * this.scaleValue));
this.base = this.chart.height / 2;
} else {
this.scaleValue = (this.chart.height - (this.padding.top + this.padding.bottom)) / (options.range.endValue - options.range.startValue);
this.startPoint = this.chart.height - (this.padding.bottom +
(Math.abs(options.range.startValue * this.scaleValue) - (Math.abs(this.startPoint) * this.scaleValue)));
this.base = this.chart.width / 2;
}
this.scale.update();
var newBarProps = helpers.extend({
base: this.base,
scaleValue: this.scaleValue,
startPoint: this.startPoint
});
helpers.each(this.datasets, function(d) {
d.bar.update(newBarProps);
});
// Reset any highlight colours before updating.
helpers.each(this.activeElements, function(activeElement) {
activeElement.restore(['fillColor', 'strokeColor']);
});
helpers.each(this.datasets, function(d, datasetIndex) {
d.bar.save();
}, this);
this.render();
},
addData: function(dataset) {
var options = this.options;
var imbuffer = new Image();
if (typeof(dataset.img) !== 'undefined')
imbuffer.src = dataset.img;
var label = dataset.label || null,
fillColor = dataset.color || options.dataset.color,
strokeColor = dataset.color || options.dataset.color,
highlightFill = dataset.highlightFill || options.dataset.color,
highlightStroke = dataset.highlightStroke || options.dataset.color,
indicator = dataset.indicator || options.dataset.indicator,
shape = dataset.shape || options.dataset.shape,
width = typeof(dataset.width) !== 'undefined' ? dataset.width : options.dataset.width,
height = typeof(dataset.height) !== 'undefined' ? dataset.height : options.dataset.height,
offset = typeof(dataset.offset) !== 'undefined' ? dataset.offset : options.dataset.offset,
colorRanges = dataset.colorRanges || [],
tooltipRanges = dataset.tooltipRanges || [],
img = typeof(dataset.img) !== 'undefined' ? imbuffer : null;
var datasetObject = {
bar: new this.RangeClass({
label: label,
fillColor: fillColor,
strokeColor: strokeColor,
highlightFill: highlightFill,
highlightStroke: highlightStroke,
value: this.startValue,
startValue: this.startValue,
indicator: indicator,
shape: shape,
width: width,
height: height,
offset: offset,
colorRanges: colorRanges,
tooltipRanges: tooltipRanges,
img: img,
startPoint: this.startPoint,
scaleValue: this.scaleValue,
geometry: options.geometry,
axisRange: options.range,
base: this.base,
units: options.tickLabels.units || ''
}),
value: dataset.value
}
this.datasets.push(datasetObject);
},
removeData: function() {
this.datasets.shift();
this.update();
},
draw: function(ease) {
var self = this;
var easingDecimal = ease || 1;
this.clear();
var ctx = this.chart.ctx;
this.scale.draw(easingDecimal);
if (this.datasets.length > 0) {
helpers.each(this.datasets, function(data, datasetIndex) {
data.bar.transition({
value: data.value
}, easingDecimal).draw();
}, this);
}
},
reflow: function() {
var newScaleProps = helpers.extend({
height: this.chart.height,
width: this.chart.width
});
this.scale.update(newScaleProps);
this.update();
},
showTooltip: function(ChartElements, forceRedraw) {
// Overload original function
// Tooltip ranges implementation function
function rangeTooltip(templFunc, element) {
var tooltip = '';
var tooltipSet = false;
if (typeof(element.tooltipRanges) == 'object' && element.tooltipRanges.length && element.tooltipRanges.length > 0) {
for (var i = 0; i < element.tooltipRanges.length; i++) {
var r = element.tooltipRanges[i];
if (element.value >= r.startpoint && element.value < r.breakpoint) {
tooltip = r.tooltip;
tooltipSet = true;
break;
}
}
}
if (!tooltipSet) {
tooltip = helpers.template(templFunc, element) + element.units;
}
return tooltip;
}
// Only redraw the chart if we've actually changed what we're hovering on.
if (typeof this.activeElements === 'undefined') this.activeElements = [];
var isChanged = (function(Elements) {
var changed = false;
if (Elements.length !== this.activeElements.length) {
changed = true;
return changed;
}
helpers.each(Elements, function(element, index) {
if (element !== this.activeElements[index]) {
changed = true;
}
}, this);
return changed;
}).call(this, ChartElements);
if (!isChanged && !forceRedraw) {
return;
} else {
this.activeElements = ChartElements;
}
this.draw();
if (this.options.customTooltips) {
this.options.customTooltips(false);
}
if (ChartElements.length > 0) {
// If we have multiple datasets, show a MultiTooltip for all of the data points at that index
if (this.datasets && ChartElements.length > 1) {
var dataArray,
dataIndex;
var tooltipLabels = [],
tooltipColors = [],
medianPosition = (function() {
// Get all the points at that particular index
var Elements = [],
dataCollection,
xPositions = [],
yPositions = [],
xMax,
yMax,
xMin,
yMin;
helpers.each(ChartElements, function(chartElement) {
if (chartElement.hasValue()) {
Elements.push(chartElement);
}
}, this);
helpers.each(Elements, function(element) {
xPositions.push(element.x);
yPositions.push(element.y);
//Include any colour information about the element
tooltipLabels.push(rangeTooltip(this.options.multiTooltipTemplate, element));
tooltipColors.push({
fill: element._saved.fillColor || element.fillColor,
stroke: element._saved.strokeColor || element.strokeColor
});
}, this);
yMin = helpers.min(yPositions);
yMax = helpers.max(yPositions);
xMin = helpers.min(xPositions);
xMax = helpers.max(xPositions);
return {
x: (xMin > this.chart.width / 2) ? xMin : xMax,
y: (yMin + yMax) / 2
};
}).call(this);
new Chart.MultiTooltip({
x: medianPosition.x,
y: medianPosition.y,
xPadding: this.options.tooltipXPadding,
yPadding: this.options.tooltipYPadding,
xOffset: this.options.tooltipXOffset,
fillColor: this.options.tooltipFillColor,
textColor: this.options.tooltipFontColor,
fontFamily: this.options.tooltipFontFamily,
fontStyle: this.options.tooltipFontStyle,
fontSize: this.options.tooltipFontSize,
titleTextColor: this.options.tooltipTitleFontColor,
titleFontFamily: this.options.tooltipTitleFontFamily,
titleFontStyle: this.options.tooltipTitleFontStyle,
titleFontSize: this.options.tooltipTitleFontSize,
cornerRadius: this.options.tooltipCornerRadius,
labels: tooltipLabels,
legendColors: tooltipColors,
legendColorBackground: this.options.multiTooltipKeyBackground,
title: this.options.multiTooltipTitles,
chart: this.chart,
ctx: this.chart.ctx,
custom: this.options.customTooltips
}).draw();
} else {
helpers.each(ChartElements, function(Element) {
var tooltipPosition = Element.tooltipPosition();
new Chart.Tooltip({
x: Math.round(tooltipPosition.x),
y: Math.round(tooltipPosition.y),
xPadding: this.options.tooltipXPadding,
yPadding: this.options.tooltipYPadding,
fillColor: this.options.tooltipFillColor,
textColor: this.options.tooltipFontColor,
fontFamily: this.options.tooltipFontFamily,
fontStyle: this.options.tooltipFontStyle,
fontSize: this.options.tooltipFontSize,
caretHeight: this.options.tooltipCaretSize,
cornerRadius: this.options.tooltipCornerRadius,
text: rangeTooltip(this.options.tooltipTemplate, Element),
chart: this.chart,
custom: this.options.customTooltips
}).draw();
}, this);
}
}
return this;
}
});
}).call(this);