0

I using ZingChart to do gauge chart. The chart only display first and last section only. Two section missing in between. I have 5 values, but I want to display for 4 value only. So, I created 4 rules for ring(arr_ringrules) and plot(arr_plotrules) and pass the rules arrays to object. But, only first and last section display in colour defined in rules.

$(document).ready(function() {
  window.feed = function(callback) {
    var tick = {};
    tick.plot0 = Math.ceil(350 + (Math.random() * 500));
    callback(JSON.stringify(tick));
  };
  d = [150, 200, 250, 300, 400];

  let sum = d.reduce(function(a, b) {
    return a + b;
  }, 0);

  perc_array = [];
  perc_rulescolor = []
  colour_array = ["#11d8ee", "#3cc457", "#f12b0e", "#dda522"];

  perc = '';
  for (i = 0; i < d.length; i++) {
    perc = parseInt((d[i] / sum) * 100);

    perc_array.push(perc);

    if (typeof colour_array[i] === 'undefined') {

    } else {
      if (i == 0) {
        obj_color = {
          rule: "%v < " + perc + " && %v >= 0",
          'backgroundColor': colour_array[i]
        };
      } else {
        prev_array_val = perc_array[(i - 1)];
        console.log(prev_array_val + '=>' + perc);
        obj_color = {
          rule: "%v < " + perc + " && %v >= " + prev_array_val,
          'backgroundColor': colour_array[i]
        }
      }
      perc_rulescolor.push(obj_color);
    }
  }
  arr_ringrules = [{
      rule: '%v >= 0 && %v < 11.54',
      backgroundColor: '#0cf311'
    },
    {
      rule: '%v >= 11.54 && %v < 15.38',
      backgroundColor: '#eaf50a'
    },
    {
      rule: '%v >= 15.38 && %v < 19.23',
      backgroundColor: '#db7b24'
    },
    {
      rule: '%v >= 19.23 && %v < 23.08',
      backgroundColor: '#ff0000'
    }
  ];
  arr_plotrules = [{
      rule: '%v >= 0 && %v < 11.54',
      text: '%v<br>EXCELLENT'
    },
    {
      rule: '%v >= 11.54 && %v < 15.38',
      text: '%v<br>Good'
    },
    {
      rule: '%v >= 15.38 && %v < 19.23',
      text: '%v<br>Fair'
    },
    {
      rule: '%v >= 19.23 && %v < 23.08',
      text: '%v<br>Bad'
    }
  ];

  var myConfig = {
    type: "gauge",
    globals: {
      fontSize: 25
    },
    plotarea: {
      marginTop: 80
    },
    plot: {
      size: '100%',
      valueBox: {
        placement: 'center',
        text: '%v', //default
        fontSize: 35,
        rules: arr_plotrules

      }
    },
    tooltip: {
      borderRadius: 5
    },
    scaleR: {
      aperture: 180,
      values: "0:100:20",
      center: {
        visible: false
      },
      tick: {
        visible: false
      },
      item: {
        offsetR: 0,
        rules: [{
          rule: '%i == 9',
          offsetX: 15
        }]
      },
      labels: ['0', '20', '40', '60', '80', '100'],
      ring: {
        size: 100,
        rules: arr_ringrules
      }
    },

    series: [{
      values: [80], // starting value
      backgroundColor: 'black',
      indicator: [10, 10, 10, 10, 0.75],
      animation: {
        effect: 2,
        method: 1,
        sequence: 4,
        speed: 900
      },
    }]
  };
  zingchart.render({
    id: 'myChart',
    data: myConfig,
    height: 500,
    width: '100%'
  });
})
html,
body {
  height: 100%;
  width: 100%;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>

</html>
Premlatha
  • 1,676
  • 2
  • 20
  • 40

1 Answers1

0

Label R value:-

start angle:end angle:scale

I have change this to 0:180:1

Scale R label- to display scale around the gauge chart

I have change to

['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110', '120', '130', '140', '150', '160', '170', '180'].

Next, I calculate cumulative percentage value and cumulative degree from 180 and store in array while looping. I have used the cumulative degree to create the array object for ringrules,arr_ringrules_custom and plotrules,arr_plotrules_custom.

For my requirement , I want to display color section until section that have value 300. I have created colour_array contain four colours which I want set to display first four value from data array,d.

data array,d = [150, 200, 250, 300, 400];-contain 5 items
colour_array = ["#11d8ee", "#3cc457", "#f12b0e", "#dda522"];-contain 4 items

I do validation on colour_array[index] show undefined inside data array loop in order to avoid creating object for arr_ringrules_custom for last items on data. In else statement of this validation, I have created four objects and insert to arr_ringrules_custom in loop.

For arr_plotrules_custom, I have created 1 objects. The object created in if statement of validating colour_array[index] show undefined. It show undefined in last loop because colour_array[4] not exist.

obj_text = {
    rule: '%v >= ' + prev_array_val,
    'text': perc_array[(i - 1)] + '%'
  }

I have use rule >= prev_array_val, angle for value 300 in order to show the label at center of chart. Since I want to show the percentage value , have stated perc_array[(i - 1)] + '%'.

$(document).ready(function() {
  window.feed = function(callback) {
    var tick = {};
    tick.plot0 = Math.ceil(350 + (Math.random() * 500));
    callback(JSON.stringify(tick));
  };
  d = [150, 200, 250, 300, 400];
  let sum = d.reduce(function(a, b) {
    return a + b;
  }, 0);
  perc_array = [];
  degree_array = [];
  arr_ringrules_custom = [];
  arr_plotrules_custom = [];
  colour_array = ["#11d8ee", "#3cc457", "#f12b0e", "#dda522"];

  //calculate percentage
  var perc = 0;
  var degree = 0;
  for (i = 0; i < d.length; i++) {
    perc += parseFloat((d[i] / sum * 100).toFixed(2));
    perc_array.push(perc);
    degree += parseFloat(((d[i] / sum) * 180).toFixed(2)); //calculating degree

    degree_array.push(degree);
    if (typeof colour_array[i] === 'undefined') {

      prev_array_val = parseFloat(degree_array[(i - 1)]).toFixed(2);
      obj_text = {
        rule: '%v >= ' + prev_array_val,
        'text': perc_array[(i - 1)] + '%'
      }
      arr_plotrules_custom.push(obj_text);
    } else {
      if (i == 0) {
        obj_color = {
          rule: '%v >= 0 && %v < ' + degree,
          'backgroundColor': colour_array[i]
        };
      } else {
        prev_array_val = parseFloat(degree_array[(i - 1)]).toFixed(2);
        obj_color = {
          rule: '%v >= ' + prev_array_val + ' && %v < ' + degree,
          'backgroundColor': colour_array[i]
        }
      }
      arr_ringrules_custom.push(obj_color);
    }
  }
  console.log(arr_plotrules_custom);
  end_mark = parseFloat(degree_array[(colour_array.length - 1)].toFixed(2));
  var myConfig = {
    type: "gauge",
    globals: {
      fontSize: 25
    },
    plotarea: {
      marginTop: 80
    },
    plot: {
      size: '100%',
      valueBox: {
        placement: 'center',
        text: '%v', //default
        fontSize: 35,
        rules: arr_plotrules_custom
      }
    },
    tooltip: {
      borderRadius: 5
    },
    scaleR: {
      aperture: 180,
      values: "0:180:1",
      center: {
        visible: false
      },
      tick: {
        visible: false
      },
      item: {
        offsetR: 0,
        rules: [{
          rule: '%i == 9',
          offsetX: 15
        }]
      },
      labels: ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110', '120', '130', '140', '150', '160', '170', '180'],
      ring: {
        size: 100,
        rules: arr_ringrules_custom
      }
    },
    series: [{
      values: [end_mark], // starting value
      backgroundColor: 'black',
      indicator: [10, 10, 10, 10, 0.75],
      animation: {
        effect: 2,
        method: 1,
        sequence: 4,
        speed: 900
      },
    }]
  };
  zingchart.render({
    id: 'myChart',
    data: myConfig,
    height: 500,
    width: '100%'
  });
})
html,
body {
  height: 100%;
  width: 100%;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="jQuery/jquery-3.4.1.min.js"></script>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>

</html>
Premlatha
  • 1,676
  • 2
  • 20
  • 40