FusionCharts - Configuring Hover Effect for LED chart
Created using FusionCharts Suite XT - www.fusioncharts.com
by FusionCharts
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="chart-container">
FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var chart = new FusionCharts({
type: 'hled',
renderAt: 'chart-container',
id: 'myHLED1',
width: '300',
height: '200',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Battery Charge Remaining",
"lowerLimit": "0",
"upperLimit": "100",
"showTickMarks": "0",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"origW": "300",
"origH": "200",
"ledGap": "0",
"showhovereffect": "1",
//Single Fill color
"useSameFillColor": "1",
"chartBottomMargin": "20",
"theme": "fusion"
},
//All annotations are grouped under this element
"annotations": {
"groups": [{
//Each group needs a unique ID
"id": "indicator",
"showbelow": "1",
"items": [
{
"id": "bgRectAngle",
//Polygon item
"type": "rectangle",
"radius": "5",
"fillColor": "#333333",
"x": "$gaugeEndX - 10",
"tox": "$gaugeEndX + 12",
"y": "$gaugeCenterY-20",
"toy": "$gaugeCenterY + 20"
}
]
}, {
//Each group needs a unique ID
"id": "remainingTime",
"showbelow": "0",
"items": [
{
"id": "remainingTxt",
//Polygon item
"type": "text",
"text": "",
"fontColor": "#FFFFFF",
"fontSize": "12",
"bold": "1",
"x": "$gaugeCenterX",
"y": "$gaugeCenterY",
}
]
}]
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "30",
...