Gauge marker distance

Created using FusionCharts Suite XT - www.fusioncharts.com

by Clemens Himmer

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="https://rawgit.com/fusioncharts/angular-fusioncharts/master/src/angular-fusioncharts.js"></script>
<div ng-app="app">

  <div ng-controller="testCtrl">
    <p ng-bind="getChartData()">
    
    </p>
    <fusioncharts type="angulargauge" height="96px" datasource="{{getChartData()}}" config="{&quot;containerBackgroundOpacity&quot;:0,&quot;dataEmptyMessage&quot;:&quot;&quot;}"></fusioncharts>
    <input type="range" ng-model="value" min="0.01" max="5" step="0.1"/>
  </div>

</div>

JavaScript

angular.module('app', ['ng-fusioncharts'])
  .controller('testCtrl', ['$scope', function($scope) {
    $scope.value = 0.01;
    
    $scope.chartFormat = {
      lowerLimit: 0,
      upperLimit: 5,
      lowerLimitDisplay: 0,
      upperLimitDisplay: 5,
      showTickMarks: 0,
      showTickValues: 0,
      showGaugeBorder: 0,
      majorTMHeight: 0,
      majorTMThickness: 0,
      showToolTip: 0,
      plotHoverEffect: 0,
      animation: 0,
      chartTopMargin: 20,
      gaugeInnerRadius: '76%',
      bgalpha: 0,
      containerBackgroundColor: '#ff0000',
      containerBackgroundOpacity: 100,
      canvasbgalpha: 0,
      legendbgalpha: 0,
      pivotRadius: 5,
      pivotFillAlpha: 100,
      pivotFillMix: " ",
      pivotFillColor: "black",
      theme: "fint",
      baseFontSize: 14,
      baseFont: 'HelveticaNeue-CondensedBold,Helvetica,Arial'
   }
   
   $scope.getChartData = function()
   {
   		console.log('called');
      var value = $scope.value;
      var sollJAZ = 3.1;
      var maxValue = 5;
      
      this.chartFormat.upperLimit = maxValue;
      this.chartFormat.upperLimitDisplay = maxValue;
      
      return {
         chart: this.chartFormat,
         dials: {
            dial: [
               {
                                       value: value,
                        borderThickness: 0,
                        showValue: 0,
                        baseWidth: 3,
                        topWidth: 3,
                        rearExtension: 0
               }
            ]
         },
         colorRange: {
            color: [
               {
                  minValue: 0,
                  maxValue: sollJAZ * 0.5,
                  code: '#ff0000'
               },
               {
                  minValue: sollJAZ * 0.5,
                  maxValue: sollJAZ,
                  code: '#ffff00'
               },
               {
                  minValue: sollJAZ,
                  maxValue: maxValue,
                  code: '#00ff00'
...