• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .chart--container {
    10.       height: 100%;
    11.       width: 100%;
    12.       min-height: 530px;
    13.     }
    14.  
    15.     .zc-ref {
    16.       display: none;
    17.     }
    18.   </style>
    19. </head>
    20. ​
    21.  
    22. <body class="zc-body">
    23.   ​
    24.   <div id="myChart" class="chart--container">
    25.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    26.   </div>
    27.  
    28.   <script>
    29.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE DATA
    30.     // -----------------------------
    31.     let images = {
    32.       devil: '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',
    33.       cloud: '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',
    34.       fireball: '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',
    35.       sun: 'iVBORw0KGgoAAAANSUhEUgAAAC4AAABQCAYAAABmkUeGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAB61JREFUeNrsmvtPXEUUx8/dBRYKC8vyqEArsaCUNn2kEqNVSmNqrWmLxNTGxFToD1osP5H4N5j0JxKTGqqJQIg/WJOmEhtrrQ1IrI1pTGnTUhSaoAWk0F3esLvcO54z91wcNmy7LC8b7yZfsr17Z85nzpw586omhIAn8eOAJ/Rjg9vgNrgNboPb4Da4DW6D2+A2+Np94uiPpmmLKePkBjuUhtM2yghTuINUWQbV9/VoAWjXFrfIhhJ0PMqlyMmGQ6gAK6SAhJeJZ3hdeT/A7+qL8niUH43fX4dKRaWjPAxDHp9BTaDGUJMMDwyazGVSUIlcF8GOoPxKGYPrWhq4UDpcc0gvEWQaKgf1dGlpxrb29ocGg0yhfKghBprmokncwCyUlxsusKwDy97C739y+VkS2tQVm8vi8Tj2HAEUoraf/WrLSV1Pd9af6fXV19/tGx4O9OHz+ww/weVSuMyGzExXXnX15rzqE/lep9Ov5+S2f4rPExh6hntBjzrQI/6mm+KYdKOKUBWojyvfc3cKfYcQ+h4hjMPC7zsiGr54RZSUZDzE32+g2lk36Bn9Ru/Qu7IMlqU6qC6us4htOBS7EZk1+SdCVhEcpVq8jFOK6U2oEtS+1is55WWlVBAbrrnYqZkylFt/GoWmpnuybGXlJti7J43DeNjsDBGQ0dHWLsTeVwda8B+XUddRVMiPdkNsN0bwIBZOkN5O4rjeiiorLIh764+76/NBUBiPc09z+GvcAM3NlYybwIKiZ5SjIc50rpYEz24e7O3umT2HD9pQt1EDND7QtqElxJYOHVjQyTFI3s5FFaCKaz5MzwcDx6SYVZLHDMtnhrmWzFYmw5IM8HcsqxlAddV+NFTMY8PPlZDDghzvxoIpLszjGsdzHAMncRojaKp8tzfdcaCnMzfbkxZgb87EOPclyl4ZGXVBQXH/A5/fuIgPr6Io7vs5tqhLg9ylc6ky3ONOBnYpeZc8vZ49vYPAyw95sj1uLG+EOFZj/WBZLRE87gSgOhubfbv5B7LdgxoMy/EBboCupkNrdlvHeTqLvbyBB2SxNz1hV/mh3Oy6U/hIYBiKEWr6EsBpUIckfN2pZyhSClu+7U/1+YPZbPceh08/p9dRnivkDGuFigVtxTLl6c2oLYUF7p01HxTnVx3LB08qhoXRZ0o8ZAcscamkZWBw5kmNjCVCY3MvnP6sEwfsOKXUO6i7qG5uAPXAFDKHLHBrRszjfFpS+W7hwePHCovKXvZoMpYFZgZjyASWA26p0Cp8MjcAO1ozM1LbzyOiobm7q+nL7gucKrtQNMGNInPAAk/iJFxY+mL8vrONz9U+tT4rSXan8DMw9pRMfyt1nq7J9AhaGjcgXT77e3Bo+mjV73Xt10KX2fPDyDwdPjhd+IKhT992yqFAHSGMsFS2Uh/BITxl5n1aqODg16fB2X5NZhRrJTpvIyGUdKPVN2IyprE7i/R6yBzHq6oQ2waQLGaaVhnnwC23UlKeqm+GvhE/rAHwfBEDsXA3zDCjEQ4e4BWdb9gHfecvLrCnWWURA7HwdDzBjAuCj3HOvH+6icNlDSUZ/l0mj0UCD/EMRZuAoeu34K/Wq2sHTbaJQdmYTC4UKtZ+L8TrA+qW8aZzawcubZtLzwlmUvexj9sB4YQq4nhHEVydcwday2pOnuBCUZ2rWOuVJN5uuSsrcDYTuNYy4lfP22QLbUrb5o4ohZniF8rjDmU3Lje2JVtdG/c+T8DY8tng6oFLW7NAtomBF3weZrOONuaBu3gpKze2Ne+kemUlUqs4CZEttisZzJViFrO5IoFTt3gzPY68ij0Ya7P66npb9TraJgZi4WONlEjg8XxYs676iCfPQx1jMPhqTz7Spg7EQCy85E5cKFQ05UxPVB8OeGEaJ6wAzrm6WIN0KEzbyCBZeA2lnjuG5/FA6XZwOPVJfa1nTUvEQkzhh0WRNxKvw8HjB6CobAdosAaftg4QDRehq+l7eORGIvLWLRd21rwJ+VX7MSelrCzsCM6RjZdwjfIN9Hb3Q1Rbt8dvlt2wq/wlyK47sfwNIODaMwAtv8AD3zj8xkcUkTbLIWTW1XOVqI4nql6Dwoba5QU/Xoee/kF6lZZ1HY87ngg/V7FOjWaVtbmfD/z8XBharkHqyDhke5KXyduTss4HDB3VgdBCd0BCuSmYZOAB7jaqsIO6Er2zbDmb6uLw6FBCZEBxlpVNRLSXV4Y4P7fM9bMXqAs7T1+A3uUCl3WZwD3KAJxm20Zst250rnlOFg5y11Hc3esegBttt9ADEWBab2LcfmKKvkd6j+qgutjLg2wjKG0aS7kDEvPi3/I8jfQ7DT9ijt8iU+ZcrJ7/FT34Hfiu98idC20CoPEKuEsKYGPNG+CteAFAHRtYRxenPOukdlraiuLo5tHn418rL74tsw1Nvxs5x28f+BxO6gY46y+BD9U3PA6PvkpxQ171fimv0wF6zvtAVyk3OVdTY31oM6DYjPFg/6wCflSmS/JXxtzlVTFsa++E2C6visGBZa3LKxqMdBg5iTZ1xWZs4AtcFyaE5fjlvi4MRnPGt1jwlb6gDUV74xYL+H/mSlyz/zezDW6D2+A2uA1ug9vgNrgNboPb4P8b8H8EGAB6+ViYJAqRlgAAAABJRU5ErkJggg==',
    36.     };
    37.  
    38.     let gcolors = [
    39.       '#0AAEF6',
    40.       '#08A8F6',
    41.       '#0BA8F5',
    42.       '#3AB5C5',
    43.       '#72C58F',
    44.       '#A6D15B',
    45.       '#DDD324',
    46.       '#FCB800',
    47.       '#FC7300',
    48.       '#FE2901',
    49.       '#FD2300',
    50.       '#FF0000',
    51.     ];
    52.  
    53.     // HELPER METHODS
    54.     // -----------------------------
    55.     function rule_scaleY_item(p) {
    56.       return {
    57.         color: gcolors[p.index],
    58.       };
    59.     }
    60.  
    61.     function rule_plot(p) {
    62.       let cindex = Math.round(p.value / 10);
    63.       let colors = gcolors.slice(0, cindex);
    64.       let stops = [],
    65.         step = parseFloat(Number(0.9 / colors.length).toFixed(2));
    66.       for (let i = 0; i < colors.length; i++) {
    67.         stops.push(parseFloat(Number(0.05 + i * step).toFixed(2)));
    68.       }
    69.       return {
    70.         gradientStops: stops.join(' '),
    71.         gradientColors: colors.join(' '),
    72.       };
    73.     }
    74.  
    75.     function rule_plot_valueBox(p) {
    76.       let combo = p.plotindex + '-' + p.nodeindex;
    77.       let image = '';
    78.       switch (combo) {
    79.         case '1-0':
    80.           image = images.cloud;
    81.           break;
    82.         case '0-2':
    83.           image = images.fireball;
    84.           break;
    85.         case '1-3':
    86.           image = images.sun;
    87.           break;
    88.         case '0-5':
    89.           image = images.devil;
    90.           break;
    91.       }
    92.       if (image !== '') {
    93.         return {
    94.           width: '46px',
    95.           height: '80px',
    96.           offsetY: '18px',
    97.           canvasBackgroundPosition: '0 -18',
    98.           backgroundImage: 'data:image/png;base64,' + image,
    99.           backgroundRepeat: 'no-repeat',
    100.         };
    101.       }
    102.       return {
    103.         visible: false,
    104.       };
    105.     }
    106.  
    107.     // CHART CONFIG
    108.     // -----------------------------
    109.     let chartConfig = {
    110.       type: 'vbar',
    111.       globals: {
    112.         fontFamily: '"Exo 2"',
    113.       },
    114.       backgroundColor: '#444444 #111111',
    115.       title: {
    116.         text: 'AVERAGE HIGH & LOW TEMPERATURES IN PHOENIX, ARIZONA',
    117.         color: '#ffffff',
    118.         fontSize: '15px',
    119.         padding: '30px 5px',
    120.       },
    121.       plot: {
    122.         tooltip: {
    123.           text: '%plot-text IN %scale-key-text IS %node-value°',
    124.           backgroundColor: '#212121',
    125.           borderColor: '#000000',
    126.           borderWidth: '1px',
    127.           color: '#ffffff',
    128.           fontSize: '15px',
    129.           padding: '10px',
    130.           shadow: true,
    131.           shadowColor: '#424242',
    132.         },
    133.         valueBox: {
    134.           text: '%node-value°',
    135.           backgroundColor: 'none',
    136.           color: '#000000',
    137.           jsRule: 'rule_plot_valueBox()',
    138.           shadow: false,
    139.         },
    140.         barSpace: 0.3,
    141.         barsSpaceLeft: 0.2,
    142.         barsSpaceRight: 0.2,
    143.         borderColor: '#000',
    144.         borderWidth: '1px',
    145.         fillAngle: 270,
    146.         jsRule: 'rule_plot()',
    147.         shadow: true,
    148.         shadowColor: '#111',
    149.         shadowDistance: 1,
    150.       },
    151.       plotarea: {
    152.         margin: '100px 0px 40px 0px',
    153.         backgroundColor: '#000000',
    154.       },
    155.       scaleX: {
    156.         values: [
    157.           'JAN',
    158.           'FEB',
    159.           'MAR',
    160.           'APR',
    161.           'MAY',
    162.           'JUN',
    163.           'JUL',
    164.           'AUG',
    165.           'SEP',
    166.           'OCT',
    167.           'NOV',
    168.           'DEC',
    169.         ],
    170.         item: {
    171.           color: '#ffffff',
    172.         },
    173.         lineWidth: '0px',
    174.         offsetStart: '50px',
    175.         offsetEnd: '20px',
    176.         tick: {
    177.           visible: false,
    178.         },
    179.       },
    180.       scaleY: {
    181.         values: '0:110:10',
    182.         guide: {
    183.           items: [{
    184.               backgroundColor: '#252525',
    185.             },
    186.             {
    187.               backgroundColor: '#121212',
    188.             },
    189.           ],
    190.           lineColor: '#444444',
    191.           lineStyle: 'solid',
    192.         },
    193.         item: {
    194.           color: '#ffffff',
    195.           fontWeight: 900,
    196.           jsRule: 'rule_scaleY_item()',
    197.           offsetX: '40px',
    198.         },
    199.         refLine: {
    200.           visible: false,
    201.         },
    202.       },
    203.       series: [{
    204.           text: 'AVG. HIGH TEMP.',
    205.           values: [65, 71, 75, 84, 92, 103, 105, 101, 98, 88, 76, 65],
    206.         },
    207.         {
    208.           text: 'AVG. LOW TEMP.',
    209.           values: [41, 43, 49, 55, 64, 72, 80, 79, 73, 62, 48, 41],
    210.         },
    211.       ],
    212.       resources: [{
    213.           type: 'css',
    214.           url: 'https://fonts.googleapis.com/css?family=Exo+2'
    215.         },
    216.         {
    217.           backgroundImage: 'data:image/png;base64,' + images.devil,
    218.         },
    219.         {
    220.           backgroundImage: 'data:image/png;base64,' + images.cloud,
    221.         },
    222.         {
    223.           backgroundImage: 'data:image/png;base64,' + images.fireball,
    224.         },
    225.         {
    226.           backgroundImage: 'data:image/png;base64,' + images.sun,
    227.         },
    228.       ],
    229.     };
    230.  
    231.     // RENDER CHARTS
    232.     // -----------------------------
    233.     zingchart.render({
    234.       id: 'myChart',
    235.       data: chartConfig,
    236.       output: 'svg',
    237.     });
    238.   </script>
    239. </body>
    240.  
    241. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9. ​
    10.  
    11. <body class="zc-body">
    12.   ​
    13.   <div id="myChart" class="chart--container">
    14.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    15.   </div>
    16.  
    17. </body>
    18.  
    19. </html>
    1. .chart--container {
    2.   height: 100%;
    3.   width: 100%;
    4.   min-height: 530px;
    5. }
    6.  
    7. .zc-ref {
    8.   display: none;
    9. }
    1. // DEFINE DATA
    2. // -----------------------------
    3. let images = {
    4.   devil: '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',
    5.   cloud: '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',
    6.   fireball: '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',
    7.   sun: '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',
    8. };
    9.  
    10. let gcolors = [
    11.   '#0AAEF6',
    12.   '#08A8F6',
    13.   '#0BA8F5',
    14.   '#3AB5C5',
    15.   '#72C58F',
    16.   '#A6D15B',
    17.   '#DDD324',
    18.   '#FCB800',
    19.   '#FC7300',
    20.   '#FE2901',
    21.   '#FD2300',
    22.   '#FF0000',
    23. ];
    24.  
    25. // HELPER METHODS
    26. // -----------------------------
    27. function rule_scaleY_item(p) {
    28.   return {
    29.     color: gcolors[p.index],
    30.   };
    31. }
    32.  
    33. function rule_plot(p) {
    34.   let cindex = Math.round(p.value / 10);
    35.   let colors = gcolors.slice(0, cindex);
    36.   let stops = [],
    37.     step = parseFloat(Number(0.9 / colors.length).toFixed(2));
    38.   for (let i = 0; i < colors.length; i++) {
    39.     stops.push(parseFloat(Number(0.05 + i * step).toFixed(2)));
    40.   }
    41.   return {
    42.     gradientStops: stops.join(' '),
    43.     gradientColors: colors.join(' '),
    44.   };
    45. }
    46.  
    47. function rule_plot_valueBox(p) {
    48.   let combo = p.plotindex + '-' + p.nodeindex;
    49.   let image = '';
    50.   switch (combo) {
    51.     case '1-0':
    52.       image = images.cloud;
    53.       break;
    54.     case '0-2':
    55.       image = images.fireball;
    56.       break;
    57.     case '1-3':
    58.       image = images.sun;
    59.       break;
    60.     case '0-5':
    61.       image = images.devil;
    62.       break;
    63.   }
    64.   if (image !== '') {
    65.     return {
    66.       width: '46px',
    67.       height: '80px',
    68.       offsetY: '18px',
    69.       canvasBackgroundPosition: '0 -18',
    70.       backgroundImage: 'data:image/png;base64,' + image,
    71.       backgroundRepeat: 'no-repeat',
    72.     };
    73.   }
    74.   return {
    75.     visible: false,
    76.   };
    77. }
    78.  
    79. // CHART CONFIG
    80. // -----------------------------
    81. let chartConfig = {
    82.   type: 'vbar',
    83.   globals: {
    84.     fontFamily: '"Exo 2"',
    85.   },
    86.   backgroundColor: '#444444 #111111',
    87.   title: {
    88.     text: 'AVERAGE HIGH & LOW TEMPERATURES IN PHOENIX, ARIZONA',
    89.     color: '#ffffff',
    90.     fontSize: '15px',
    91.     padding: '30px 5px',
    92.   },
    93.   plot: {
    94.     tooltip: {
    95.       text: '%plot-text IN %scale-key-text IS %node-value°',
    96.       backgroundColor: '#212121',
    97.       borderColor: '#000000',
    98.       borderWidth: '1px',
    99.       color: '#ffffff',
    100.       fontSize: '15px',
    101.       padding: '10px',
    102.       shadow: true,
    103.       shadowColor: '#424242',
    104.     },
    105.     valueBox: {
    106.       text: '%node-value°',
    107.       backgroundColor: 'none',
    108.       color: '#000000',
    109.       jsRule: 'rule_plot_valueBox()',
    110.       shadow: false,
    111.     },
    112.     barSpace: 0.3,
    113.     barsSpaceLeft: 0.2,
    114.     barsSpaceRight: 0.2,
    115.     borderColor: '#000',
    116.     borderWidth: '1px',
    117.     fillAngle: 270,
    118.     jsRule: 'rule_plot()',
    119.     shadow: true,
    120.     shadowColor: '#111',
    121.     shadowDistance: 1,
    122.   },
    123.   plotarea: {
    124.     margin: '100px 0px 40px 0px',
    125.     backgroundColor: '#000000',
    126.   },
    127.   scaleX: {
    128.     values: [
    129.       'JAN',
    130.       'FEB',
    131.       'MAR',
    132.       'APR',
    133.       'MAY',
    134.       'JUN',
    135.       'JUL',
    136.       'AUG',
    137.       'SEP',
    138.       'OCT',
    139.       'NOV',
    140.       'DEC',
    141.     ],
    142.     item: {
    143.       color: '#ffffff',
    144.     },
    145.     lineWidth: '0px',
    146.     offsetStart: '50px',
    147.     offsetEnd: '20px',
    148.     tick: {
    149.       visible: false,
    150.     },
    151.   },
    152.   scaleY: {
    153.     values: '0:110:10',
    154.     guide: {
    155.       items: [{
    156.           backgroundColor: '#252525',
    157.         },
    158.         {
    159.           backgroundColor: '#121212',
    160.         },
    161.       ],
    162.       lineColor: '#444444',
    163.       lineStyle: 'solid',
    164.     },
    165.     item: {
    166.       color: '#ffffff',
    167.       fontWeight: 900,
    168.       jsRule: 'rule_scaleY_item()',
    169.       offsetX: '40px',
    170.     },
    171.     refLine: {
    172.       visible: false,
    173.     },
    174.   },
    175.   series: [{
    176.       text: 'AVG. HIGH TEMP.',
    177.       values: [65, 71, 75, 84, 92, 103, 105, 101, 98, 88, 76, 65],
    178.     },
    179.     {
    180.       text: 'AVG. LOW TEMP.',
    181.       values: [41, 43, 49, 55, 64, 72, 80, 79, 73, 62, 48, 41],
    182.     },
    183.   ],
    184.   resources: [{
    185.       type: 'css',
    186.       url: 'https://fonts.googleapis.com/css?family=Exo+2'
    187.     },
    188.     {
    189.       backgroundImage: 'data:image/png;base64,' + images.devil,
    190.     },
    191.     {
    192.       backgroundImage: 'data:image/png;base64,' + images.cloud,
    193.     },
    194.     {
    195.       backgroundImage: 'data:image/png;base64,' + images.fireball,
    196.     },
    197.     {
    198.       backgroundImage: 'data:image/png;base64,' + images.sun,
    199.     },
    200.   ],
    201. };
    202.  
    203. // RENDER CHARTS
    204. // -----------------------------
    205. zingchart.render({
    206.   id: 'myChart',
    207.   data: chartConfig,
    208.   output: 'svg',
    209. });