How To Migrate From An Older Version

Migration Guide

Here we tried to collect and provide all information you may find useful if you need to migrate from an older version to a new one. This guide only relates to a breaking changes in the releases which may cause problems with end-user code when changing canvas gauges version to a new one.

Migration From v1.x.x to v2.x.x

Version 2 of canvas gauges contains breaking changes both in scripting API and gauges configuration in comparison to version 1.

Configuration Changes

The table below contains a list of configuration options which was changed in a new API and HTML attributes.

Old propertyNew propertyNew HTML attributeComments
valueFormat.intvalueIntdata-value-int 
valueFormat.decvalueDecdata-value-dec 
updateValueOnAnimationanimatedValuedata-animated-value 
glow--Removed from spec
animation.durationanimationDurationdata-animation-duration 
animation.fnanimationRuledata-animation-rule 
colors.platecolorPlatedata-color-plate 
colors.majorTickscolorMajorTicksdata-color-major-ticks 
colors.minorTickscolorMinorTicksdata-color-minor-ticks 
colors.titlecolorTitledata-color-title 
colors.unitscolorUnitsdata-color-units 
colors.numberscolorNumbersdata-color-numbers 
colors.needle.startcolorNeedledata-color-needle 
colors.needle.endcolorNeedleEnddata-color-needle-end 
colors.needle.circle.outerStartcolorNeedleCircleOuterdata-color-needle-circle-outeronly radial gauge
colors.needle.circle.outerEndcolorNeedleCircleOuterEnddata-color-needle-circle-outer-endonly radial gauge
colors.needle.circle.innerStartcolorNeedleCircleInnerdata-color-needle-circle-inneronly radial gauge
colors.needle.circle.innerEndcolorNeedleCircleInnerEnddata-color-needle-circle-inner-endonly radial gauge
colors.needle.shadowUpcolorNeedleShadowUpdata-color-needle-shadow-up 
colors.needle.shadowDowncolorNeedleShadowDowndata-color-needle-shadow-down 
colors.valueBox.rectStartcolorValueBoxRectdata-color-value-box-rect 
colors.valueBox.rectEndcolorValueBoxRectEnddata-color-value-box-rect-end 
colors.valueBox.backgroundcolorValueBoxBackgrounddata-color-value-box-background 
colors.valueBox.shadowcolorValueBoxShadowdata-color-value-box-shadow 
colors.valueText.foregroundcolorValueTextdata-color-value-text 
colors.valueText.shadowcolorValueTextShadowdata-color-value-text-shadow 
colors.circle.shadowcolorBorderShadowdata-color-border-shadow 
colors.circle.outerStartcolorBorderOuterdata-color-border-outer 
colors.circle.outerEndcolorBorderOuterEnddata-color-border-end 
colors.circle.middleStartcolorBorderMiddledata-color-border-middle 
colors.circle.middleEndcolorBorderMiddleEnddata-color-border-middle-end 
colors.circle.innerStartcolorBorderInnerdata-color-border-inner 
colors.circle.innerEndcolorBorderInnerEnddata-color-border-inner-end 
circlesbordersdata-borderstransformed to boolean
circles.outerVisibleborderOuterWidthdata-border-outer-widthtransformed to numeric
circles.middleVisibleborderMiddleWidthdata-border-middle-widthtransformed to numeric
circles.innerVisibleborderInnerWidthdata-border-inner-widthtransformed to numeric
valueBox.visiblevalueBoxdata-value-boxtruthy or falsy
valueText.visiblevalueTextdata-value-textfalsy or text
majorTicksFormat.intmajorTicksIntdata-major-ticks-int 
majorTicksFormat.decmajorTicksDecdata-major-ticks-dec 

JavaScript API Changes

Here is a list of breaking changes for scripting API. It is related mainly to new RadialGauge implementation, as far as old code does not have any other gauges implementations.

Old propertyNew propertyComments
Gauge(options)RadialGauge(options) 
updateConfig(options)update(options) 
setValue(value)valuevalue is a property now, simply setter
getValue()valuevalue is a property now, simply getter
clear()-removed as not required anymore
onready-removed as not required anymore