javascriptchartsgaugezingchart

Zingchart-gaugechart display first and last section only


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>


Solution

  • 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>