• Edit
  • Download
    • <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      type: "bar",
      title: {
        text: 'Category 1'
      },
      scaleX: {
        labels: ['Sub Category 1', 'Sub Category 2', 'Sub Category 3']
      },
      scaleY: {
        label: {
          text: "Rating"
        }
      },
      plot: {
        tooltip: {
          text: 'Category: %kl <br> Criteria: %data-criteria <br> Rating: %v'
        },
        valueBox: {
          text: '%data-criteria',
          fontColor: '#000'
        },
        rules: [ // set the colors of the bars based on vaue
          {
            rule: '%v == 1',
            backgroundColor: '#F44336' //red
          },
          {
            rule: '%v == 2',
            backgroundColor: '#FF9800' //orange
          },
          {
            rule: '%v == 3',
            backgroundColor: '#FFC107' //amber
          },
          {
            rule: '%v == 4',
            backgroundColor: '#FFEB3B' //yellow
          },
          {
            rule: '%v == 5',
            backgroundColor: '#4CAF50' //green
          }
        ]
      },
      series: [{
          values: [2, 4],
          'data-criteria': ['Crit 1', 'Crit 2']
        },
        {
          values: [5, 3],
          'data-criteria': ['Crit 3', 'Crit 4']
        },
        {
          values: [null, null, 1],
          'data-criteria': ['', '', 'Crit 5']
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: 600
    });
  </script>
</body>

</html>
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart'></div>
</body>

</html>
    
      
    
      
    
        
    var myConfig = {
  type: "bar",
  title: {
    text: 'Category 1'
  },
  scaleX: {
    labels: ['Sub Category 1', 'Sub Category 2', 'Sub Category 3']
  },
  scaleY: {
    label: {
      text: "Rating"
    }
  },
  plot: {
    tooltip: {
      text: 'Category: %kl <br> Criteria: %data-criteria <br> Rating: %v'
    },
    valueBox: {
      text: '%data-criteria',
      fontColor: '#000'
    },
    rules: [ // set the colors of the bars based on vaue
      {
        rule: '%v == 1',
        backgroundColor: '#F44336' //red
      },
      {
        rule: '%v == 2',
        backgroundColor: '#FF9800' //orange
      },
      {
        rule: '%v == 3',
        backgroundColor: '#FFC107' //amber
      },
      {
        rule: '%v == 4',
        backgroundColor: '#FFEB3B' //yellow
      },
      {
        rule: '%v == 5',
        backgroundColor: '#4CAF50' //green
      }
    ]
  },
  series: [{
      values: [2, 4],
      'data-criteria': ['Crit 1', 'Crit 2']
    },
    {
      values: [5, 3],
      'data-criteria': ['Crit 3', 'Crit 4']
    },
    {
      values: [null, null, 1],
      'data-criteria': ['', '', 'Crit 5']
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 400,
  width: 600
});