I am experience a change in how a chart is rendered depending on whether it is given either data or a blank set of data. To demonstrate this, use the following in jsfiddle to demonstrate the problem. If you try it with and without the part highlighted in red, you will notice that the vlines labeled as One, Two, and Three shift positions causing my annotation images to no longer appear on the vlines. How do I work around this problem?
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'mscombi2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Test Chart with data",
"captionAlignment": "left",
"chartTopMargin": "10",
"chartLeftMargin": "10",
"chartRightMargin": "10",
"showborder": "1",
"paletteColors": "#1A51A3",
"bgAlpha": "0",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"captionpadding": "20",
"showXAxisLines": "0",
"divLineColor": "#000000",
"axisLineAlpha": "25",
"divLineAlpha": "0",
"showValues": "0",
"showLegend": "0",
"showAlternateHGridColor": "0",
"animation": "0",
"anchorRadius": "3",
"anchorborderthickness": "6",
"yAxisMinValue": "0",
"yAxisMaxValue": "100",
"numberSuffix": "%",
"showAxisLines": "1",
"showtooltip": "1",
"canvasPadding": "50"
},
"categories": [{
"category": [{
"label": "One"
}, {
"vline": "1",
"lineposition": "0",
"color": "#CCCCCC"
}, {
"label": "Two"
}, {
"vline": "1",
"lineposition": "0",
"color": "#CCCCCC"
}, {
"label": "Three"
}, {
"vline": "1",
"lineposition": "0",
"color": "#CCCCCC"
}]
}],
"dataset": [{
"seriesname": "TEST Elementary",
"renderAs": "line",
"lineDashLen": 0,
"lineDashGap": 1000,
"lineThickness": 3,
"data": [{
"value": 67,
"dashed": true,
"toolText": null
}, {
"value": 64,
"dashed": true,
"toolText": null
}]
}],
"annotations": {
"groups": [{
"id": "targetIndicators",
"y": "$canvasStartY + 40.5",
"items": [{
"type": "image",
"url": "http://www.healthit.gov/sites/all/modules/contrib/gmap/markers/healthit/small_blue_dot.png",
"tooltext": "Target, 80%",
"x": "$chartcenterx - 158"
}, {
"type": "image",
"url": "http://www.healthit.gov/sites/all/modules/contrib/gmap/markers/healthit/small_blue_dot.png",
"tooltext": "Target, 80%",
"x": "$chartcenterx + 13"
}, {
"type": "image",
"url": "http://www.healthit.gov/sites/all/modules/contrib/gmap/markers/healthit/small_blue_dot.png",
"tooltext": "Target, 80%",
"x": "$chartcenterx + 183"
}]
}]
}
}
});
revenueChart.render();
});