(function(Chart) { var helpers = Chart.helpers; var plugins = Chart.plugins; Chart.defaults.global.animation.duration = 1000; Chart.defaults._set('linearGauge', { scale: { type: 'linearGauge', horizontal: false, range: { startValue: -100, endValue: 500 }, responsive: true, font: { fontName: 'Arial', fontSize: 12 }, axisWidth: 6, ticks: { majorTicks: { interval: 100, height: 1, } }, scaleLabel: { display: true, interval: 100, units: '', customValues: [], offset: -10, color: '#777b80' } }, padding: { top: 0, bottom: 0, left: 0, right: 0 }, tooltips: { callbacks: { label: function(tooltipItem, data) { var label = data.datasets[tooltipItem.datasetIndex].label || ''; if (label) { label += ': '; } label += Math.round(data.datasets[tooltipItem.datasetIndex].data[0] * 100) / 100; return label; } } }, legend: { display: true, labels: { fontColor: 'rgb(0, 0, 0)' }, position: 'bottom' } }); Chart.controllers.linearGauge = Chart.DatasetController.extend({ dataElementType: Chart.elements.Gaugerect, initialize: function() { var me = this; var meta; Chart.DatasetController.prototype.initialize.apply(me, arguments); meta = me.getMeta(); }, linkScales: helpers.noop, update: function(reset) { var me = this; var rects = me.getMeta().data; var i, ilen; me.datashifts = 0; for (i = 0, ilen = rects.length; i < ilen; ++i) { me.updateElement(rects[i], i, me.datashifts); me.datashifts += 10; } }, updateElement: function(rectangle, index, reset) { var me = this; var chart = me.chart; var meta = me.getMeta(); var dataset = me.getDataset(); var custom = rectangle.custom || {}; var rectangleOptions = chart.options.elements.rectangle; var gaugeOptions = chart.options.elements.gaugerect; rectangle._Scale = me.getScaleForId(chart.options.scale.id || 'gaugescale'); rectangle._datasetIndex = me.index; rectangle._index = index; rectangle.rangeColorImage = null; // Init element model rectangle._model = { datasetLabel: dataset.label, label: chart.data.labels[index], borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleOptions.borderSkipped, backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.valueAtIndexOrDefault(dataset.backgroundColor, index, gaugeOptions.backgroundColor), borderColor: custom.borderColor ? custom.borderColor : helpers.valueAtIndexOrDefault(dataset.borderColor, index, rectangleOptions.borderColor), borderWidth: custom.borderWidth ? custom.borderWidth : helpers.valueAtIndexOrDefault(dataset.borderWidth, index, rectangleOptions.borderWidth) }; // Set empty view as start point for animation if(typeof rectangle._view === 'undefined') rectangle._view = {}; me.updateElementGeometry(rectangle, index, reset); }, updateElementGeometry: function(rectangle, index, reset) { var me = this; var model = rectangle._model; var start = rectangle._view; var dataset = me.getDataset().data; var dopt = me.getDataset(); var chart = me.chart; var datasets = chart.data.datasets; var gaugeOptions = chart.options.elements.gaugerect; var vscale = me.getScaleForId(chart.options.scale.id || 'gaugescale'); //var base = vscale.getBasePixel(); var base = vscale.getBase(); var horizontal = rectangle._Scale.isHorizontal(); //var ruler = me._ruler || me.getRuler(); var vpixels = me.calculateBarValuePixels(me.index, index, horizontal); model.horizontal = horizontal; model.base = base; model.head = vpixels.head; model.x = horizontal ? vpixels.base : vpixels.offset; model.y = horizontal ? (vpixels.offset - (dopt.width || gaugeOptions.width)) : vpixels.head; model.height = horizontal ? (dopt.width || gaugeOptions.width) : (vpixels.base - vpixels.head); model.width = horizontal ? (vpixels.head - vpixels.base) : (dopt.width || gaugeOptions.width); model.value = vscale.getRightValue(datasets[me.index].data[index]); model.scaleValue = 0; if (horizontal) { model.scaleValue = vscale.width / (vscale.options.range.endValue - vscale.options.range.startValue); } else { model.scaleValue = vscale.height / (vscale.options.range.endValue - vscale.options.range.startValue); } if(typeof start.x === 'undefined' && typeof start.y === 'undefined'){ if(horizontal){ start.x = vpixels.base; start.width = 0; } else { start.y = vpixels.base; start.height = 0; } } }, calculateBarValuePixels: function(datasetIndex, index, horizontal) { var me = this; var chart = me.chart; var scale = me.getScaleForId(chart.options.scale.id || 'gaugescale'); var datasets = chart.data.datasets; var dopt = datasets[datasetIndex]; var value = scale.getRightValue(datasets[datasetIndex].data[index]); var stacked = scale.options.stacked; var start = 0; var i, imeta, ivalue, base, head, size, offset; base = scale.scalePoint(start); head = scale.scalePoint(start + value); size = (head - base) / 2; offset = horizontal ? scale.yCenter - dopt.offset : scale.xCenter + dopt.offset; return { size: size, base: base, head: head, center: head + size / 2, offset: offset }; }, draw: function() { var me = this; var chart = me.chart; var rects = me.getMeta().data; var dataset = me.getDataset(); var ilen = rects.length; var i = 0; helpers.canvas.clipArea(chart.ctx, chart.chartArea); for (; i < ilen; ++i) { if (!isNaN(dataset.data[i])) { rects[i].draw(); } } helpers.canvas.unclipArea(chart.ctx); }, setHoverStyle: function(rectangle) { var dataset = this.chart.data.datasets[rectangle._datasetIndex]; var index = rectangle._index; var custom = rectangle.custom || {}; var model = rectangle._model; model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.valueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor)); model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.valueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor)); model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.valueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth); }, removeHoverStyle: function(rectangle) { var dataset = this.chart.data.datasets[rectangle._datasetIndex]; var index = rectangle._index; var custom = rectangle.custom || {}; var model = rectangle._model; var rectangleElementOptions = this.chart.options.elements.gaugerect; model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.valueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor); model.borderColor = custom.borderColor ? custom.borderColor : helpers.valueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor); model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.valueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth); } }); }).call(this, Chart);