• 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.     var images = {
    35.       devil: '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',
    36.       cloud: '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',
    37.       fireball: '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',
    38.       sun: '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'
    39.     };
    40.  
    41.     var gcolors = [
    42.       '#0AAEF6',
    43.       '#08A8F6',
    44.       '#0BA8F5',
    45.       '#3AB5C5',
    46.       '#72C58F',
    47.       '#A6D15B',
    48.       '#DDD324',
    49.       '#FCB800',
    50.       '#FC7300',
    51.       '#FE2901',
    52.       '#FD2300',
    53.       '#FF0000'
    54.     ];
    55.  
    56.     window.rule_scaleY_item = function(p) {
    57.       return {
    58.         color: gcolors[p.index]
    59.       };
    60.     };
    61.  
    62.     window.rule_plot = function(p) {
    63.       var cindex = Math.round(p.value / 10);
    64.       var colors = gcolors.slice(0, cindex);
    65.       var stops = [],
    66.         step = parseFloat(Number(0.9 / colors.length).toFixed(2));
    67.       for (var i = 0; i < colors.length; i++) {
    68.         stops.push(parseFloat(Number(0.05 + i * step).toFixed(2)));
    69.       }
    70.       return {
    71.         gradientStops: stops.join(' '),
    72.         gradientColors: colors.join(' ')
    73.       };
    74.     }
    75.  
    76.     window.rule_plot_valueBox = function(p) {
    77.       var combo = p.plotindex + '-' + p.nodeindex;
    78.       var image = '';
    79.       switch (combo) {
    80.         case '1-0':
    81.           image = images.cloud;
    82.           break;
    83.         case '0-2':
    84.           image = images.fireball;
    85.           break;
    86.         case '1-3':
    87.           image = images.sun;
    88.           break;
    89.         case '0-5':
    90.           image = images.devil;
    91.           break;
    92.       }
    93.       if (image !== '') {
    94.         return {
    95.           width: 46,
    96.           height: 80,
    97.           offsetY: 18,
    98.           canvasBackgroundPosition: '0 -18',
    99.           backgroundImage: 'data:image/png;base64,' + image,
    100.           backgroundRepeat: 'no-repeat'
    101.         };
    102.       }
    103.       return {
    104.         visible: false
    105.       }
    106.     };
    107.  
    108.     var cdata = {
    109.       "globals": {
    110.         "fontFamily": "Lucida Sans Unicode"
    111.       },
    112.       "type": "vbar",
    113.       "title": {
    114.         "text": "AVERAGE HIGH & LOW TEMPERATURES IN PHOENIX, ARIZONA",
    115.         "fontSize": 15,
    116.         "padding": "30 5",
    117.         "color": "#ffffff"
    118.       },
    119.       "resources": [{
    120.           "backgroundImage": "data:image/png;base64," + images.devil
    121.         },
    122.         {
    123.           "backgroundImage": "data:image/png;base64," + images.cloud
    124.         },
    125.         {
    126.           "backgroundImage": "data:image/png;base64," + images.fireball
    127.         },
    128.         {
    129.           "backgroundImage": "data:image/png;base64," + images.sun
    130.         }
    131.       ],
    132.       "backgroundColor": "#444444 #111111",
    133.       "plotarea": {
    134.         "backgroundColor": "#000000",
    135.         "margin": "100 0 40 0"
    136.       },
    137.       "scaleX": {
    138.         "offsetStart": 50,
    139.         "offsetEnd": 20,
    140.         "values": ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    141.         "lineWidth": 0,
    142.         "tick": {
    143.           "visible": false
    144.         },
    145.         "item": {
    146.           "color": "#ffffff"
    147.         }
    148.       },
    149.       "scaleY": {
    150.         "values": "0:110:10",
    151.         "item": {
    152.           "color": "#ffffff",
    153.           "offsetX": 40,
    154.           "fontWeight": 900,
    155.           "jsRule": "rule_scaleY_item()"
    156.         },
    157.         "refLine": {
    158.           "visible": false
    159.         },
    160.         "guide": {
    161.           "lineStyle": "solid",
    162.           "lineColor": "#444444",
    163.           "items": [{
    164.               "backgroundColor": "#252525"
    165.             },
    166.             {
    167.               "backgroundColor": "#121212"
    168.             }
    169.           ]
    170.         }
    171.       },
    172.       "plot": {
    173.         "barSpace": 0.3,
    174.         "barsSpaceLeft": 0.2,
    175.         "barsSpaceRight": 0.2,
    176.         "borderWidth": 1,
    177.         "borderColor": "#000",
    178.         "shadow": true,
    179.         "shadowColor": "#111",
    180.         "shadowDistance": 1,
    181.         "fillAngle": 270,
    182.         "jsRule": "rule_plot()",
    183.         "valueBox": {
    184.           "color": "#000000",
    185.           "shadow": false,
    186.           "backgroundColor": "none",
    187.           "text": "%node-value\u00B0",
    188.           "jsRule": "rule_plot_valueBox()"
    189.         }
    190.       },
    191.       "series": [{
    192.           "values": [65, 71, 75, 84, 92, 103, 105, 101, 98, 88, 76, 65],
    193.           "text": "AVG. HIGH TEMP."
    194.         },
    195.         {
    196.           "values": [41, 43, 49, 55, 64, 72, 80, 79, 73, 62, 48, 41],
    197.           "text": "AVG. LOW TEMP."
    198.         }
    199.       ],
    200.       "tooltip": {
    201.         "shadow": true,
    202.         "shadowColor": "#424242",
    203.         "backgroundColor": "#212121",
    204.         "padding": 10,
    205.         "fontSize": 15,
    206.         "color": "#ffffff",
    207.         "borderWidth": 1,
    208.         "borderColor": "#000000",
    209.         "text": "%plot-text IN %scale-key-text IS %node-value\u00B0"
    210.       }
    211.     };
    212.  
    213.     zingchart.render({
    214.       id: 'zc',
    215.       width: 600,
    216.       height: 400,
    217.       output: 'svg',
    218.       data: cdata
    219.     });
    220.   </script>
    221. </body>
    222.  
    223. </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. var images = {
    2.   devil: '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',
    3.   cloud: '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',
    4.   fireball: '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',
    5.   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=='
    6. };
    7.  
    8. var gcolors = [
    9.   '#0AAEF6',
    10.   '#08A8F6',
    11.   '#0BA8F5',
    12.   '#3AB5C5',
    13.   '#72C58F',
    14.   '#A6D15B',
    15.   '#DDD324',
    16.   '#FCB800',
    17.   '#FC7300',
    18.   '#FE2901',
    19.   '#FD2300',
    20.   '#FF0000'
    21. ];
    22.  
    23. window.rule_scaleY_item = function(p) {
    24.   return {
    25.     color: gcolors[p.index]
    26.   };
    27. };
    28.  
    29. window.rule_plot = function(p) {
    30.   var cindex = Math.round(p.value / 10);
    31.   var colors = gcolors.slice(0, cindex);
    32.   var stops = [],
    33.     step = parseFloat(Number(0.9 / colors.length).toFixed(2));
    34.   for (var i = 0; i < colors.length; i++) {
    35.     stops.push(parseFloat(Number(0.05 + i * step).toFixed(2)));
    36.   }
    37.   return {
    38.     gradientStops: stops.join(' '),
    39.     gradientColors: colors.join(' ')
    40.   };
    41. }
    42.  
    43. window.rule_plot_valueBox = function(p) {
    44.   var combo = p.plotindex + '-' + p.nodeindex;
    45.   var image = '';
    46.   switch (combo) {
    47.     case '1-0':
    48.       image = images.cloud;
    49.       break;
    50.     case '0-2':
    51.       image = images.fireball;
    52.       break;
    53.     case '1-3':
    54.       image = images.sun;
    55.       break;
    56.     case '0-5':
    57.       image = images.devil;
    58.       break;
    59.   }
    60.   if (image !== '') {
    61.     return {
    62.       width: 46,
    63.       height: 80,
    64.       offsetY: 18,
    65.       canvasBackgroundPosition: '0 -18',
    66.       backgroundImage: 'data:image/png;base64,' + image,
    67.       backgroundRepeat: 'no-repeat'
    68.     };
    69.   }
    70.   return {
    71.     visible: false
    72.   }
    73. };
    74.  
    75. var cdata = {
    76.   "globals": {
    77.     "fontFamily": "Lucida Sans Unicode"
    78.   },
    79.   "type": "vbar",
    80.   "title": {
    81.     "text": "AVERAGE HIGH & LOW TEMPERATURES IN PHOENIX, ARIZONA",
    82.     "fontSize": 15,
    83.     "padding": "30 5",
    84.     "color": "#ffffff"
    85.   },
    86.   "resources": [{
    87.       "backgroundImage": "data:image/png;base64," + images.devil
    88.     },
    89.     {
    90.       "backgroundImage": "data:image/png;base64," + images.cloud
    91.     },
    92.     {
    93.       "backgroundImage": "data:image/png;base64," + images.fireball
    94.     },
    95.     {
    96.       "backgroundImage": "data:image/png;base64," + images.sun
    97.     }
    98.   ],
    99.   "backgroundColor": "#444444 #111111",
    100.   "plotarea": {
    101.     "backgroundColor": "#000000",
    102.     "margin": "100 0 40 0"
    103.   },
    104.   "scaleX": {
    105.     "offsetStart": 50,
    106.     "offsetEnd": 20,
    107.     "values": ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    108.     "lineWidth": 0,
    109.     "tick": {
    110.       "visible": false
    111.     },
    112.     "item": {
    113.       "color": "#ffffff"
    114.     }
    115.   },
    116.   "scaleY": {
    117.     "values": "0:110:10",
    118.     "item": {
    119.       "color": "#ffffff",
    120.       "offsetX": 40,
    121.       "fontWeight": 900,
    122.       "jsRule": "rule_scaleY_item()"
    123.     },
    124.     "refLine": {
    125.       "visible": false
    126.     },
    127.     "guide": {
    128.       "lineStyle": "solid",
    129.       "lineColor": "#444444",
    130.       "items": [{
    131.           "backgroundColor": "#252525"
    132.         },
    133.         {
    134.           "backgroundColor": "#121212"
    135.         }
    136.       ]
    137.     }
    138.   },
    139.   "plot": {
    140.     "barSpace": 0.3,
    141.     "barsSpaceLeft": 0.2,
    142.     "barsSpaceRight": 0.2,
    143.     "borderWidth": 1,
    144.     "borderColor": "#000",
    145.     "shadow": true,
    146.     "shadowColor": "#111",
    147.     "shadowDistance": 1,
    148.     "fillAngle": 270,
    149.     "jsRule": "rule_plot()",
    150.     "valueBox": {
    151.       "color": "#000000",
    152.       "shadow": false,
    153.       "backgroundColor": "none",
    154.       "text": "%node-value\u00B0",
    155.       "jsRule": "rule_plot_valueBox()"
    156.     }
    157.   },
    158.   "series": [{
    159.       "values": [65, 71, 75, 84, 92, 103, 105, 101, 98, 88, 76, 65],
    160.       "text": "AVG. HIGH TEMP."
    161.     },
    162.     {
    163.       "values": [41, 43, 49, 55, 64, 72, 80, 79, 73, 62, 48, 41],
    164.       "text": "AVG. LOW TEMP."
    165.     }
    166.   ],
    167.   "tooltip": {
    168.     "shadow": true,
    169.     "shadowColor": "#424242",
    170.     "backgroundColor": "#212121",
    171.     "padding": 10,
    172.     "fontSize": 15,
    173.     "color": "#ffffff",
    174.     "borderWidth": 1,
    175.     "borderColor": "#000000",
    176.     "text": "%plot-text IN %scale-key-text IS %node-value\u00B0"
    177.   }
    178. };
    179.  
    180. zingchart.render({
    181.   id: 'zc',
    182.   width: 600,
    183.   height: 400,
    184.   output: 'svg',
    185.   data: cdata
    186. });