• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="zc"></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        window.addEventListener('load', function() {
    
          var pattern = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAFJJREFUWEft1MENACAIQ9HuvzQGE406QHvwH0z0hMADVZXWkfrqfUeDd7LzA4nMj6r7y3612d3zNx4GogD3FLAH2AMYwAAGMIABDGAAAxj42sAAIjn2iJSofAQAAAAASUVORK5CYII=';
          var states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];
          var metrics = ['Schools', 'Hate Crimes', 'Housing', 'Employment', 'Adoption', 'Hospital Visits', 'Marriage'];
          var palette = ['#7EC2EB', '#833C99', '#D1028A', '#87BC38', '#0060A8', '#EFBA4D', '#CE2C20'];
          var levels = {
            '-1': 'Prohibited or banned',
            '0': 'No law or unclear',
            '0.5': 'Limited',
            '1': 'Maximum'
          };
    
          var cdata = {
            backgroundColor: '#fff',
            graphset: [{
                x: 0,
                y: 0,
                width: '100%',
                height: '100%',
                backgroundColor: 'none',
                type: 'radar',
                plotarea: {
                  margin: 10
                },
                scale: {
                  sizeFactor: 0.9
                },
                scaleV: {
                  offsetStart: 120,
                  visible: false
                },
                scaleK: {
                  values: states,
                  aspect: 'circle',
                  ranged: true,
                  guide: {
                    visible: false
                  },
                  tick: {
                    visible: false
                  }
                },
                plot: {
                  borderWidth: 1,
                  borderColor: '#fff',
                  angleSpace: 0,
                  animation: {
                    speed: 50,
                    effect: 1,
                    sequence: 1
                  },
                  aspect: 'piano',
                  jsRule: 'plot_jsRule(0)'
                },
                tooltip: {
                  padding: 10,
                  fontSize: 13,
                  color: '#fff',
                  backgroundColor: '#333',
                  text: '%plot-text in %scale-key-text: %data-level'
                },
                series: []
              },
              {
                x: 0,
                y: 0,
                width: '100%',
                height: '100%',
                backgroundColor: 'none',
                type: 'radar',
                plotarea: {
                  margin: 10
                },
                scale: {
                  sizeFactor: 0.275
                },
                scaleK: {
                  values: ['Limited', 'Maximum'],
                  aperture: 90,
                  refAngle: 180,
                  ranged: true,
                  item: {
                    fontSize: 10,
                    fontWeight: 'bold',
                    autoRotate: true,
                    color: '#000'
                  },
                  guide: {
                    visible: false
                  },
                  tick: {
                    visible: false
                  }
                },
                scaleV: {
                  offsetStart: 10,
                  visible: false
                },
                plot: {
                  maxTrackers: 0,
                  aspect: 'piano',
                  angleSpace: 0,
                  borderWidth: 0,
                  jsRule: 'plot_jsRule(1)'
                },
                series: [],
                labels: [{
                    flat: true,
                    x: '50%',
                    y: '50%',
                    offsetY: 5,
                    offsetX: -85,
                    backgroundColor: '#ccc',
                    backgroundImage: pattern,
                    alpha: 0.75,
                    width: 10,
                    height: 10
                  },
                  {
                    flat: true,
                    x: '50%',
                    y: '50%',
                    fontSize: 10,
                    fontWeight: 'bold',
                    offsetY: 2,
                    offsetX: -70,
                    text: 'Prohibited or banned'
                  },
                  {
                    flat: true,
                    x: '50%',
                    y: '50%',
                    offsetY: 20,
                    offsetX: -85,
                    backgroundColor: '#ccc',
                    width: 10,
                    height: 10
                  },
                  {
                    flat: true,
                    x: '50%',
                    y: '50%',
                    offsetY: 17,
                    offsetX: -70,
                    fontSize: 10,
                    fontWeight: 'bold',
                    text: 'No law or unclear'
                  }
                ]
              },
              {
                x: 0,
                y: 0,
                width: '100%',
                height: '100%',
                backgroundColor: 'none',
                type: 'radar',
                title: {
                  text: 'Rights by type',
                  y: '50%',
                  offsetY: 40
                },
                plotarea: {
                  margin: 10
                },
                scale: {
                  sizeFactor: 0.275
                },
                scaleK: {
                  visible: false,
                },
                scaleV: {
                  offsetStart: 15,
                  offsetEnd: 5,
                  values: metrics,
                  labels: metrics,
                  maxItems: metrics.length,
                  itemsOverlap: true,
                  refLine: {
                    visible: false
                  },
                  item: {
                    fontSize: 10,
                    fontWeight: 'bold',
                    color: '#000'
                  },
                  guide: {
                    visible: false
                  },
                  tick: {
                    visible: false
                  }
                }
              }
            ]
          };
    
          window.plot_jsRule = function(p, chart) {
            var obj = {};
            switch (p.value) {
              case -1:
                obj = {
                  backgroundColor: '#ccc',
                  backgroundImage: pattern,
                  alpha: 0.75
                };
                break;
              case 0:
                obj = {
                  backgroundColor: '#ccc'
                };
                break;
              case 0.5:
                obj = {
                  backgroundColor: palette[p.plotindex],
                  alpha: 0.35
                };
                break;
              case 1:
                obj = {
                  backgroundColor: palette[p.plotindex],
                  alpha: 1
                };
                break;
            }
            return obj;
          };
    
          for (var m = 0; m < metrics.length; m++) {
            var values = [],
              dataLevels = [];
            for (var s = 0; s < states.length; s++) {
              /* 
              	-1  = Prohibited or banned
              	0   = No law or unclear
              	0.5 = Limited
              	1   = Maximum
              */
              var r = Math.random(),
                v = 0;
              if (r >= 0 && r < 0.2) {
                v = -1;
              } else if (r >= 0.2 && r < 0.4) {
                v = 0;
              } else if (r >= 0.4 && r < 0.7) {
                v = 0.5;
              } else {
                v = 1;
              }
              values.push(v);
              dataLevels.push(levels[v]);
            }
            cdata.graphset[0].series.push({
              values: values,
              text: metrics[m],
              dataLevel: dataLevels
            });
            cdata.graphset[1].series.push({
              values: [0.5, 1],
              text: metrics[m]
            });
          }
    
          zingchart.render({
            id: 'zc',
            width: 640,
            height: 640,
            output: 'svg',
            data: cdata
          });
    
        });
      </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="zc"></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    window.addEventListener('load', function() {
    
      var pattern = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAFJJREFUWEft1MENACAIQ9HuvzQGE406QHvwH0z0hMADVZXWkfrqfUeDd7LzA4nMj6r7y3612d3zNx4GogD3FLAH2AMYwAAGMIABDGAAAxj42sAAIjn2iJSofAQAAAAASUVORK5CYII=';
      var states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];
      var metrics = ['Schools', 'Hate Crimes', 'Housing', 'Employment', 'Adoption', 'Hospital Visits', 'Marriage'];
      var palette = ['#7EC2EB', '#833C99', '#D1028A', '#87BC38', '#0060A8', '#EFBA4D', '#CE2C20'];
      var levels = {
        '-1': 'Prohibited or banned',
        '0': 'No law or unclear',
        '0.5': 'Limited',
        '1': 'Maximum'
      };
    
      var cdata = {
        backgroundColor: '#fff',
        graphset: [{
            x: 0,
            y: 0,
            width: '100%',
            height: '100%',
            backgroundColor: 'none',
            type: 'radar',
            plotarea: {
              margin: 10
            },
            scale: {
              sizeFactor: 0.9
            },
            scaleV: {
              offsetStart: 120,
              visible: false
            },
            scaleK: {
              values: states,
              aspect: 'circle',
              ranged: true,
              guide: {
                visible: false
              },
              tick: {
                visible: false
              }
            },
            plot: {
              borderWidth: 1,
              borderColor: '#fff',
              angleSpace: 0,
              animation: {
                speed: 50,
                effect: 1,
                sequence: 1
              },
              aspect: 'piano',
              jsRule: 'plot_jsRule(0)'
            },
            tooltip: {
              padding: 10,
              fontSize: 13,
              color: '#fff',
              backgroundColor: '#333',
              text: '%plot-text in %scale-key-text: %data-level'
            },
            series: []
          },
          {
            x: 0,
            y: 0,
            width: '100%',
            height: '100%',
            backgroundColor: 'none',
            type: 'radar',
            plotarea: {
              margin: 10
            },
            scale: {
              sizeFactor: 0.275
            },
            scaleK: {
              values: ['Limited', 'Maximum'],
              aperture: 90,
              refAngle: 180,
              ranged: true,
              item: {
                fontSize: 10,
                fontWeight: 'bold',
                autoRotate: true,
                color: '#000'
              },
              guide: {
                visible: false
              },
              tick: {
                visible: false
              }
            },
            scaleV: {
              offsetStart: 10,
              visible: false
            },
            plot: {
              maxTrackers: 0,
              aspect: 'piano',
              angleSpace: 0,
              borderWidth: 0,
              jsRule: 'plot_jsRule(1)'
            },
            series: [],
            labels: [{
                flat: true,
                x: '50%',
                y: '50%',
                offsetY: 5,
                offsetX: -85,
                backgroundColor: '#ccc',
                backgroundImage: pattern,
                alpha: 0.75,
                width: 10,
                height: 10
              },
              {
                flat: true,
                x: '50%',
                y: '50%',
                fontSize: 10,
                fontWeight: 'bold',
                offsetY: 2,
                offsetX: -70,
                text: 'Prohibited or banned'
              },
              {
                flat: true,
                x: '50%',
                y: '50%',
                offsetY: 20,
                offsetX: -85,
                backgroundColor: '#ccc',
                width: 10,
                height: 10
              },
              {
                flat: true,
                x: '50%',
                y: '50%',
                offsetY: 17,
                offsetX: -70,
                fontSize: 10,
                fontWeight: 'bold',
                text: 'No law or unclear'
              }
            ]
          },
          {
            x: 0,
            y: 0,
            width: '100%',
            height: '100%',
            backgroundColor: 'none',
            type: 'radar',
            title: {
              text: 'Rights by type',
              y: '50%',
              offsetY: 40
            },
            plotarea: {
              margin: 10
            },
            scale: {
              sizeFactor: 0.275
            },
            scaleK: {
              visible: false,
            },
            scaleV: {
              offsetStart: 15,
              offsetEnd: 5,
              values: metrics,
              labels: metrics,
              maxItems: metrics.length,
              itemsOverlap: true,
              refLine: {
                visible: false
              },
              item: {
                fontSize: 10,
                fontWeight: 'bold',
                color: '#000'
              },
              guide: {
                visible: false
              },
              tick: {
                visible: false
              }
            }
          }
        ]
      };
    
      window.plot_jsRule = function(p, chart) {
        var obj = {};
        switch (p.value) {
          case -1:
            obj = {
              backgroundColor: '#ccc',
              backgroundImage: pattern,
              alpha: 0.75
            };
            break;
          case 0:
            obj = {
              backgroundColor: '#ccc'
            };
            break;
          case 0.5:
            obj = {
              backgroundColor: palette[p.plotindex],
              alpha: 0.35
            };
            break;
          case 1:
            obj = {
              backgroundColor: palette[p.plotindex],
              alpha: 1
            };
            break;
        }
        return obj;
      };
    
      for (var m = 0; m < metrics.length; m++) {
        var values = [],
          dataLevels = [];
        for (var s = 0; s < states.length; s++) {
          /* 
          	-1  = Prohibited or banned
          	0   = No law or unclear
          	0.5 = Limited
          	1   = Maximum
          */
          var r = Math.random(),
            v = 0;
          if (r >= 0 && r < 0.2) {
            v = -1;
          } else if (r >= 0.2 && r < 0.4) {
            v = 0;
          } else if (r >= 0.4 && r < 0.7) {
            v = 0.5;
          } else {
            v = 1;
          }
          values.push(v);
          dataLevels.push(levels[v]);
        }
        cdata.graphset[0].series.push({
          values: values,
          text: metrics[m],
          dataLevel: dataLevels
        });
        cdata.graphset[1].series.push({
          values: [0.5, 1],
          text: metrics[m]
        });
      }
    
      zingchart.render({
        id: 'zc',
        width: 640,
        height: 640,
        output: 'svg',
        data: cdata
      });
    
    });