• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="zc"></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     window.addEventListener('load', function() {
    35.  
    36.       var pattern = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAFJJREFUWEft1MENACAIQ9HuvzQGE406QHvwH0z0hMADVZXWkfrqfUeDd7LzA4nMj6r7y3612d3zNx4GogD3FLAH2AMYwAAGMIABDGAAAxj42sAAIjn2iJSofAQAAAAASUVORK5CYII=';
    37.       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'];
    38.       var metrics = ['Schools', 'Hate Crimes', 'Housing', 'Employment', 'Adoption', 'Hospital Visits', 'Marriage'];
    39.       var palette = ['#7EC2EB', '#833C99', '#D1028A', '#87BC38', '#0060A8', '#EFBA4D', '#CE2C20'];
    40.       var levels = {
    41.         '-1': 'Prohibited or banned',
    42.         '0': 'No law or unclear',
    43.         '0.5': 'Limited',
    44.         '1': 'Maximum'
    45.       };
    46.  
    47.       var cdata = {
    48.         backgroundColor: '#fff',
    49.         graphset: [{
    50.             x: 0,
    51.             y: 0,
    52.             width: '100%',
    53.             height: '100%',
    54.             backgroundColor: 'none',
    55.             type: 'radar',
    56.             plotarea: {
    57.               margin: 10
    58.             },
    59.             scale: {
    60.               sizeFactor: 0.9
    61.             },
    62.             scaleV: {
    63.               offsetStart: 120,
    64.               visible: false
    65.             },
    66.             scaleK: {
    67.               values: states,
    68.               aspect: 'circle',
    69.               ranged: true,
    70.               guide: {
    71.                 visible: false
    72.               },
    73.               tick: {
    74.                 visible: false
    75.               }
    76.             },
    77.             plot: {
    78.               borderWidth: 1,
    79.               borderColor: '#fff',
    80.               angleSpace: 0,
    81.               animation: {
    82.                 speed: 50,
    83.                 effect: 1,
    84.                 sequence: 1
    85.               },
    86.               aspect: 'piano',
    87.               jsRule: 'plot_jsRule(0)'
    88.             },
    89.             tooltip: {
    90.               padding: 10,
    91.               fontSize: 13,
    92.               color: '#fff',
    93.               backgroundColor: '#333',
    94.               text: '%plot-text in %scale-key-text: %data-level'
    95.             },
    96.             series: []
    97.           },
    98.           {
    99.             x: 0,
    100.             y: 0,
    101.             width: '100%',
    102.             height: '100%',
    103.             backgroundColor: 'none',
    104.             type: 'radar',
    105.             plotarea: {
    106.               margin: 10
    107.             },
    108.             scale: {
    109.               sizeFactor: 0.275
    110.             },
    111.             scaleK: {
    112.               values: ['Limited', 'Maximum'],
    113.               aperture: 90,
    114.               refAngle: 180,
    115.               ranged: true,
    116.               item: {
    117.                 fontSize: 10,
    118.                 fontWeight: 'bold',
    119.                 autoRotate: true,
    120.                 color: '#000'
    121.               },
    122.               guide: {
    123.                 visible: false
    124.               },
    125.               tick: {
    126.                 visible: false
    127.               }
    128.             },
    129.             scaleV: {
    130.               offsetStart: 10,
    131.               visible: false
    132.             },
    133.             plot: {
    134.               maxTrackers: 0,
    135.               aspect: 'piano',
    136.               angleSpace: 0,
    137.               borderWidth: 0,
    138.               jsRule: 'plot_jsRule(1)'
    139.             },
    140.             series: [],
    141.             labels: [{
    142.                 flat: true,
    143.                 x: '50%',
    144.                 y: '50%',
    145.                 offsetY: 5,
    146.                 offsetX: -85,
    147.                 backgroundColor: '#ccc',
    148.                 backgroundImage: pattern,
    149.                 alpha: 0.75,
    150.                 width: 10,
    151.                 height: 10
    152.               },
    153.               {
    154.                 flat: true,
    155.                 x: '50%',
    156.                 y: '50%',
    157.                 fontSize: 10,
    158.                 fontWeight: 'bold',
    159.                 offsetY: 2,
    160.                 offsetX: -70,
    161.                 text: 'Prohibited or banned'
    162.               },
    163.               {
    164.                 flat: true,
    165.                 x: '50%',
    166.                 y: '50%',
    167.                 offsetY: 20,
    168.                 offsetX: -85,
    169.                 backgroundColor: '#ccc',
    170.                 width: 10,
    171.                 height: 10
    172.               },
    173.               {
    174.                 flat: true,
    175.                 x: '50%',
    176.                 y: '50%',
    177.                 offsetY: 17,
    178.                 offsetX: -70,
    179.                 fontSize: 10,
    180.                 fontWeight: 'bold',
    181.                 text: 'No law or unclear'
    182.               }
    183.             ]
    184.           },
    185.           {
    186.             x: 0,
    187.             y: 0,
    188.             width: '100%',
    189.             height: '100%',
    190.             backgroundColor: 'none',
    191.             type: 'radar',
    192.             title: {
    193.               text: 'Rights by type',
    194.               y: '50%',
    195.               offsetY: 40
    196.             },
    197.             plotarea: {
    198.               margin: 10
    199.             },
    200.             scale: {
    201.               sizeFactor: 0.275
    202.             },
    203.             scaleK: {
    204.               visible: false,
    205.             },
    206.             scaleV: {
    207.               offsetStart: 15,
    208.               offsetEnd: 5,
    209.               values: metrics,
    210.               labels: metrics,
    211.               maxItems: metrics.length,
    212.               itemsOverlap: true,
    213.               refLine: {
    214.                 visible: false
    215.               },
    216.               item: {
    217.                 fontSize: 10,
    218.                 fontWeight: 'bold',
    219.                 color: '#000'
    220.               },
    221.               guide: {
    222.                 visible: false
    223.               },
    224.               tick: {
    225.                 visible: false
    226.               }
    227.             }
    228.           }
    229.         ]
    230.       };
    231.  
    232.       window.plot_jsRule = function(p, chart) {
    233.         var obj = {};
    234.         switch (p.value) {
    235.           case -1:
    236.             obj = {
    237.               backgroundColor: '#ccc',
    238.               backgroundImage: pattern,
    239.               alpha: 0.75
    240.             };
    241.             break;
    242.           case 0:
    243.             obj = {
    244.               backgroundColor: '#ccc'
    245.             };
    246.             break;
    247.           case 0.5:
    248.             obj = {
    249.               backgroundColor: palette[p.plotindex],
    250.               alpha: 0.35
    251.             };
    252.             break;
    253.           case 1:
    254.             obj = {
    255.               backgroundColor: palette[p.plotindex],
    256.               alpha: 1
    257.             };
    258.             break;
    259.         }
    260.         return obj;
    261.       };
    262.  
    263.       for (var m = 0; m < metrics.length; m++) {
    264.         var values = [],
    265.           dataLevels = [];
    266.         for (var s = 0; s < states.length; s++) {
    267.           /* 
    268.           	-1  = Prohibited or banned
    269.           	0   = No law or unclear
    270.           	0.5 = Limited
    271.           	1   = Maximum
    272.           */
    273.           var r = Math.random(),
    274.             v = 0;
    275.           if (r >= 0 && r < 0.2) {
    276.             v = -1;
    277.           } else if (r >= 0.2 && r < 0.4) {
    278.             v = 0;
    279.           } else if (r >= 0.4 && r < 0.7) {
    280.             v = 0.5;
    281.           } else {
    282.             v = 1;
    283.           }
    284.           values.push(v);
    285.           dataLevels.push(levels[v]);
    286.         }
    287.         cdata.graphset[0].series.push({
    288.           values: values,
    289.           text: metrics[m],
    290.           dataLevel: dataLevels
    291.         });
    292.         cdata.graphset[1].series.push({
    293.           values: [0.5, 1],
    294.           text: metrics[m]
    295.         });
    296.       }
    297.  
    298.       zingchart.render({
    299.         id: 'zc',
    300.         width: 640,
    301.         height: 640,
    302.         output: 'svg',
    303.         data: cdata
    304.       });
    305.  
    306.     });
    307.   </script>
    308. </body>
    309.  
    310. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="zc"></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. window.addEventListener('load', function() {
    2.  
    3.   var pattern = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAFJJREFUWEft1MENACAIQ9HuvzQGE406QHvwH0z0hMADVZXWkfrqfUeDd7LzA4nMj6r7y3612d3zNx4GogD3FLAH2AMYwAAGMIABDGAAAxj42sAAIjn2iJSofAQAAAAASUVORK5CYII=';
    4.   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'];
    5.   var metrics = ['Schools', 'Hate Crimes', 'Housing', 'Employment', 'Adoption', 'Hospital Visits', 'Marriage'];
    6.   var palette = ['#7EC2EB', '#833C99', '#D1028A', '#87BC38', '#0060A8', '#EFBA4D', '#CE2C20'];
    7.   var levels = {
    8.     '-1': 'Prohibited or banned',
    9.     '0': 'No law or unclear',
    10.     '0.5': 'Limited',
    11.     '1': 'Maximum'
    12.   };
    13.  
    14.   var cdata = {
    15.     backgroundColor: '#fff',
    16.     graphset: [{
    17.         x: 0,
    18.         y: 0,
    19.         width: '100%',
    20.         height: '100%',
    21.         backgroundColor: 'none',
    22.         type: 'radar',
    23.         plotarea: {
    24.           margin: 10
    25.         },
    26.         scale: {
    27.           sizeFactor: 0.9
    28.         },
    29.         scaleV: {
    30.           offsetStart: 120,
    31.           visible: false
    32.         },
    33.         scaleK: {
    34.           values: states,
    35.           aspect: 'circle',
    36.           ranged: true,
    37.           guide: {
    38.             visible: false
    39.           },
    40.           tick: {
    41.             visible: false
    42.           }
    43.         },
    44.         plot: {
    45.           borderWidth: 1,
    46.           borderColor: '#fff',
    47.           angleSpace: 0,
    48.           animation: {
    49.             speed: 50,
    50.             effect: 1,
    51.             sequence: 1
    52.           },
    53.           aspect: 'piano',
    54.           jsRule: 'plot_jsRule(0)'
    55.         },
    56.         tooltip: {
    57.           padding: 10,
    58.           fontSize: 13,
    59.           color: '#fff',
    60.           backgroundColor: '#333',
    61.           text: '%plot-text in %scale-key-text: %data-level'
    62.         },
    63.         series: []
    64.       },
    65.       {
    66.         x: 0,
    67.         y: 0,
    68.         width: '100%',
    69.         height: '100%',
    70.         backgroundColor: 'none',
    71.         type: 'radar',
    72.         plotarea: {
    73.           margin: 10
    74.         },
    75.         scale: {
    76.           sizeFactor: 0.275
    77.         },
    78.         scaleK: {
    79.           values: ['Limited', 'Maximum'],
    80.           aperture: 90,
    81.           refAngle: 180,
    82.           ranged: true,
    83.           item: {
    84.             fontSize: 10,
    85.             fontWeight: 'bold',
    86.             autoRotate: true,
    87.             color: '#000'
    88.           },
    89.           guide: {
    90.             visible: false
    91.           },
    92.           tick: {
    93.             visible: false
    94.           }
    95.         },
    96.         scaleV: {
    97.           offsetStart: 10,
    98.           visible: false
    99.         },
    100.         plot: {
    101.           maxTrackers: 0,
    102.           aspect: 'piano',
    103.           angleSpace: 0,
    104.           borderWidth: 0,
    105.           jsRule: 'plot_jsRule(1)'
    106.         },
    107.         series: [],
    108.         labels: [{
    109.             flat: true,
    110.             x: '50%',
    111.             y: '50%',
    112.             offsetY: 5,
    113.             offsetX: -85,
    114.             backgroundColor: '#ccc',
    115.             backgroundImage: pattern,
    116.             alpha: 0.75,
    117.             width: 10,
    118.             height: 10
    119.           },
    120.           {
    121.             flat: true,
    122.             x: '50%',
    123.             y: '50%',
    124.             fontSize: 10,
    125.             fontWeight: 'bold',
    126.             offsetY: 2,
    127.             offsetX: -70,
    128.             text: 'Prohibited or banned'
    129.           },
    130.           {
    131.             flat: true,
    132.             x: '50%',
    133.             y: '50%',
    134.             offsetY: 20,
    135.             offsetX: -85,
    136.             backgroundColor: '#ccc',
    137.             width: 10,
    138.             height: 10
    139.           },
    140.           {
    141.             flat: true,
    142.             x: '50%',
    143.             y: '50%',
    144.             offsetY: 17,
    145.             offsetX: -70,
    146.             fontSize: 10,
    147.             fontWeight: 'bold',
    148.             text: 'No law or unclear'
    149.           }
    150.         ]
    151.       },
    152.       {
    153.         x: 0,
    154.         y: 0,
    155.         width: '100%',
    156.         height: '100%',
    157.         backgroundColor: 'none',
    158.         type: 'radar',
    159.         title: {
    160.           text: 'Rights by type',
    161.           y: '50%',
    162.           offsetY: 40
    163.         },
    164.         plotarea: {
    165.           margin: 10
    166.         },
    167.         scale: {
    168.           sizeFactor: 0.275
    169.         },
    170.         scaleK: {
    171.           visible: false,
    172.         },
    173.         scaleV: {
    174.           offsetStart: 15,
    175.           offsetEnd: 5,
    176.           values: metrics,
    177.           labels: metrics,
    178.           maxItems: metrics.length,
    179.           itemsOverlap: true,
    180.           refLine: {
    181.             visible: false
    182.           },
    183.           item: {
    184.             fontSize: 10,
    185.             fontWeight: 'bold',
    186.             color: '#000'
    187.           },
    188.           guide: {
    189.             visible: false
    190.           },
    191.           tick: {
    192.             visible: false
    193.           }
    194.         }
    195.       }
    196.     ]
    197.   };
    198.  
    199.   window.plot_jsRule = function(p, chart) {
    200.     var obj = {};
    201.     switch (p.value) {
    202.       case -1:
    203.         obj = {
    204.           backgroundColor: '#ccc',
    205.           backgroundImage: pattern,
    206.           alpha: 0.75
    207.         };
    208.         break;
    209.       case 0:
    210.         obj = {
    211.           backgroundColor: '#ccc'
    212.         };
    213.         break;
    214.       case 0.5:
    215.         obj = {
    216.           backgroundColor: palette[p.plotindex],
    217.           alpha: 0.35
    218.         };
    219.         break;
    220.       case 1:
    221.         obj = {
    222.           backgroundColor: palette[p.plotindex],
    223.           alpha: 1
    224.         };
    225.         break;
    226.     }
    227.     return obj;
    228.   };
    229.  
    230.   for (var m = 0; m < metrics.length; m++) {
    231.     var values = [],
    232.       dataLevels = [];
    233.     for (var s = 0; s < states.length; s++) {
    234.       /* 
    235.       	-1  = Prohibited or banned
    236.       	0   = No law or unclear
    237.       	0.5 = Limited
    238.       	1   = Maximum
    239.       */
    240.       var r = Math.random(),
    241.         v = 0;
    242.       if (r >= 0 && r < 0.2) {
    243.         v = -1;
    244.       } else if (r >= 0.2 && r < 0.4) {
    245.         v = 0;
    246.       } else if (r >= 0.4 && r < 0.7) {
    247.         v = 0.5;
    248.       } else {
    249.         v = 1;
    250.       }
    251.       values.push(v);
    252.       dataLevels.push(levels[v]);
    253.     }
    254.     cdata.graphset[0].series.push({
    255.       values: values,
    256.       text: metrics[m],
    257.       dataLevel: dataLevels
    258.     });
    259.     cdata.graphset[1].series.push({
    260.       values: [0.5, 1],
    261.       text: metrics[m]
    262.     });
    263.   }
    264.  
    265.   zingchart.render({
    266.     id: 'zc',
    267.     width: 640,
    268.     height: 640,
    269.     output: 'svg',
    270.     data: cdata
    271.   });
    272.  
    273. });