Chrome 42.0.2311.135
Firefox 37.0.2
Windows 8
FusionCharts 3.7.0
AngularJs
Twitter bootstrap
Here is the my code:
fusionChart.js
angular.module('app.directive.fusionCharts',[])
.directive('fusionChart', function($interval, simDataFactory, getDriveSessionsFactory){
return{
restrict:'A',
controller: function($scope){
FusionCharts.ready(function () {
var gaugeRpm = new FusionCharts({
"type": "angulargauge",
"renderAt": "chartRpm",
"width": "200",
"height": "200",
"dataFormat": "json",
"dataSource":{
"chart": {
"manageresize": "1",
"origw": "320",
"origh": "320",
"tickvaluedistance": "-5",
"upperlimit": "8",
"bgcolor": "282828",
"lowerlimit": "0",
"basefontcolor": "FFFFFF",
"majortmnumber": "9",
"majortmcolor": "FFFFFF",
"majortmheight": "5",
"majortmthickness": "5",
"minortmnumber": "5",
"minortmcolor": "FFFFFF",
"minortmheight": "3",
"minortmthickness": "2",
"pivotradius": "10",
"pivotbgcolor": "000000",
"pivotbordercolor": "FFFFFF",
"pivotborderthickness": "2",
"tooltipbordercolor": "FFFFFF",
"tooltipbgcolor": "333333",
"gaugeouterradius": "135",
"gaugestartangle": "240",
"gaugeendangle": "-60",
"gaugealpha": "0",
"decimals": "0",
"showcolorrange": "1",
"placevaluesinside": "1",
"pivotfillmix": "1",
"showpivotborder": "1",
"annrenderdelay": "1",
"gaugeoriginx": "160",
"gaugeoriginy": "160",
"refreshinterval": "5",
"showborder": "1",
},
"dials": {
"dial": [
{
"value": "0",
"bgcolor": "000000",
"bordercolor": "FFFFFF",
"borderalpha": "100",
"basewidth": "4",
"topwidth": "4",
"borderthickness": "2",
"valuey": "260"
}
]
},
"annotations": {
"groups": [
{
"x": "160",
"y": "160",
"items": [
{
"type": "circle",
"radius": "150",
"fillasgradient": "1",
"fillcolor": "4B4B4B,AAAAAA",
"fillalpha": "100,100",
"fillratio": "95,5"
},
{
"type": "circle",
"x": "0",
"y": "0",
"radius": "140",
"showborder": "1",
"bordercolor": "cccccc",
"fillasgradient": "1",
"fillcolor": "ffffff,000000",
"fillalpha": "50,100",
"fillratio": "1,99"
}
]
},
{
"x": "160",
"y": "160",
"showbelow": "0",
"scaletext": "1",
"items": [
{
"type": "text",
"y": "80",
"label": "RPM",
"fontcolor": "FFFFFF",
"fontsize": "16",
"bold": "1"
}
}
]
}
}
});
gaugeRpm.render();
home.html
<accordion-group is-open="status.open4">
<div class="row" data-fusion-chart>
...
<div class="col-xs-6 col-md-3">
<div id="chartWrapper">
<div id="chartRpm"></div>
</div>
</div>
</div>
</accordion-group>