• 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 cdata = {
    35.       "type": "vbar",
    36.       "backgroundColor": "#909090 #c9c9c9",
    37.       "title": {
    38.         "text": "Olympic Medals by Country",
    39.         "fontSize": 19,
    40.         "padding": 15,
    41.         "color": "#000000"
    42.       },
    43.       "plotarea": {
    44.         "margin": "80 40 110 40"
    45.       },
    46.       "scaleX": {
    47.         "values": ["China", "USA", "Russia", "Great Britain", "Germany", "Australia", "South Korea", "Japan", "Italy"],
    48.         "maxItems": 9999,
    49.         "itemsOverlap": true,
    50.         "lineWidth": 0,
    51.         "tick": {
    52.           "visible": false
    53.         },
    54.         "item": {
    55.           "color": "#333333",
    56.           "offsetY": 65,
    57.           "width": "80%",
    58.           "fontSize": 11,
    59.           "fontWeight": 900,
    60.           "backgroundColor": "rgba(0,0,0,0)",
    61.           "textAlpha": 1,
    62.           "topState": {
    63.             "x": "+0",
    64.             "y": "+0",
    65.             "height": 20,
    66.             "alpha": 1,
    67.             "backgroundColor": "none",
    68.             "offsetY": 35,
    69.             "callout": true,
    70.             "calloutWidth": 0,
    71.             "calloutHeight": 10,
    72.             "borderLeft": "1px solid #666666",
    73.             "borderRight": "1px solid #666666",
    74.             "borderBottom": "1px solid #666666"
    75.           },
    76.           "jsRule": "rule_scaleX_item()"
    77.         }
    78.       },
    79.       "scaleY": {
    80.         "maxItems": 9999,
    81.         "itemsOverlap": true,
    82.         "lineWidth": 0,
    83.         "backgroundColor": "none",
    84.         "minorTicks": 4,
    85.         "minorTick": {
    86.           "visible": true,
    87.           "lineWidth": 1,
    88.           "lineColor": "#333333"
    89.         },
    90.         "tick": {
    91.           "lineColor": "#333333"
    92.         },
    93.         "guide": {
    94.           "lineWidth": 0,
    95.           "items": [{
    96.               "backgroundColor": "#acb0b3"
    97.             },
    98.             {
    99.               "backgroundColor": "#b1b5b8"
    100.             }
    101.           ]
    102.         },
    103.         "item": {
    104.           "color": "#333333",
    105.           "fontSize": 9,
    106.           "fontWeight": 300
    107.         }
    108.       },
    109.       "plot": {
    110.         "barsOverlap": "100%",
    111.         "barsSpaceLeft": 0.1,
    112.         "barsSpaceRight": 0.1,
    113.         "borderWidth": 1,
    114.         "borderColor": "#ffffff",
    115.         "borderAlpha": 0.8
    116.       },
    117.       "tooltip": {
    118.         "shadow": true,
    119.         "shadowColor": "#424242",
    120.         "backgroundColor": "#212121 #424242",
    121.         "callout": true,
    122.         "calloutPosition": "bottom",
    123.         "offsetY": -20,
    124.         "placement": "node:top",
    125.         "padding": 10,
    126.         "fontSize": 15,
    127.         "color": "#ffffff",
    128.         "borderWidth": 1,
    129.         "borderColor": "#000000",
    130.         "text": "%scale-key-text won %node-value %plot-text medals"
    131.       },
    132.       "series": [{
    133.           "values": [100, 110, 72, 47, 41, 46, 31, 25, 28],
    134.           "alpha": 0.25,
    135.           "max-trackers": 0,
    136.           "jsRule": "rule_series_0()",
    137.           "valueBox": {
    138.             "fontSize": 11,
    139.             "fontWeight": 600,
    140.             "offsetY": -10,
    141.             "jsRule": "rule_series_0_valueBox()",
    142.           }
    143.         },
    144.         {
    145.           "values": [51, 36, 23, 19, 16, 14, 13, 9, 8],
    146.           "text": "Gold",
    147.           "column": "1/3",
    148.           "jsRule": "rule_series_123()",
    149.           "zStart": 15,
    150.           "zEnd": 35,
    151.           "valueBox": [{
    152.               "fontSize": 10,
    153.               "fontWeight": 600,
    154.               "offsetY": -10,
    155.               "jsRule": "rule_series_123_valueBox_0()"
    156.             },
    157.             {
    158.               "fontSize": 11,
    159.               "fontWeight": 400,
    160.               "text": "%plot-text",
    161.               "angle": 270,
    162.               "placement": "bottom",
    163.               "width": 50,
    164.               "textAlign": "right",
    165.               "offsetY": 25
    166.             }
    167.           ]
    168.         },
    169.         {
    170.           "values": [28, 36, 28, 15, 15, 17, 8, 6, 10],
    171.           "text": "Silver",
    172.           "column": "2/3",
    173.           "jsRule": "rule_series_123()",
    174.           "zStart": 15,
    175.           "zEnd": 35,
    176.           "valueBox": [{
    177.               "fontSize": 10,
    178.               "fontWeight": 600,
    179.               "offsetY": -10,
    180.               "jsRule": "rule_series_123_valueBox_0()"
    181.             },
    182.             {
    183.               "fontSize": 11,
    184.               "fontWeight": 400,
    185.               "text": "%plot-text",
    186.               "angle": 270,
    187.               "placement": "bottom",
    188.               "width": 50,
    189.               "textAlign": "right",
    190.               "offsetY": 25
    191.             }
    192.           ]
    193.         },
    194.         {
    195.           "values": [21, 38, 21, 13, 10, 15, 10, 10, 10],
    196.           "text": "Bronze",
    197.           "column": "3/3",
    198.           "jsRule": "rule_series_123()",
    199.           "zStart": 15,
    200.           "zEnd": 35,
    201.           "valueBox": [{
    202.               "fontSize": 10,
    203.               "fontWeight": 600,
    204.               "offsetY": -10,
    205.               "jsRule": "rule_series_123_valueBox_0()"
    206.             },
    207.             {
    208.               "fontSize": 11,
    209.               "fontWeight": 400,
    210.               "text": "%plot-text",
    211.               "angle": 270,
    212.               "placement": "bottom",
    213.               "width": 50,
    214.               "textAlign": "right",
    215.               "offsetY": 25
    216.             }
    217.           ]
    218.         }
    219.       ]
    220.     };
    221.  
    222.     var colorSet0 = ['#D03435', '#913891', '#5238BD'];
    223.     var colorSet123 = [
    224.       ['#D33535 #E53B3C', '#E65D35 #EB753E', '#FE8035 #F88746'],
    225.       ['#843584 #A540A6', '#A46590 #B579AA', '#B3818D #B584A3'],
    226.       ['#6038B2 #7643BD', '#6D68B5 #7B7FBF', '#7681B2 #7C86BD']
    227.     ];
    228.  
    229.     window.rule_series_0 = function(p) {
    230.       return {
    231.         backgroundColor: colorSet0[Math.floor(p.nodeindex / 3)]
    232.       };
    233.     };
    234.  
    235.     window.rule_series_0_valueBox = function(p) {
    236.       return {
    237.         color: colorSet0[Math.floor(p.nodeindex / 3)]
    238.       };
    239.     };
    240.  
    241.     window.rule_scaleX_item = function(p) {
    242.       return {
    243.         color: colorSet0[Math.floor(p.index / 3)]
    244.       };
    245.     };
    246.  
    247.     window.rule_series_123 = function(p) {
    248.       return {
    249.         backgroundColor: colorSet123[Math.floor(p.nodeindex / 3)][Math.floor(p.plotindex / 3)]
    250.       };
    251.     };
    252.  
    253.     window.rule_series_123_valueBox_0 = function(p) {
    254.       return {
    255.         color: colorSet0[Math.floor(p.nodeindex / 3)]
    256.       };
    257.     }
    258.  
    259.     zingchart.render({
    260.       id: 'zc',
    261.       width: 900,
    262.       height: 500,
    263.       output: 'svg',
    264.       data: cdata
    265.     });
    266.   </script>
    267. </body>
    268.  
    269. </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 cdata = {
    2.   "type": "vbar",
    3.   "backgroundColor": "#909090 #c9c9c9",
    4.   "title": {
    5.     "text": "Olympic Medals by Country",
    6.     "fontSize": 19,
    7.     "padding": 15,
    8.     "color": "#000000"
    9.   },
    10.   "plotarea": {
    11.     "margin": "80 40 110 40"
    12.   },
    13.   "scaleX": {
    14.     "values": ["China", "USA", "Russia", "Great Britain", "Germany", "Australia", "South Korea", "Japan", "Italy"],
    15.     "maxItems": 9999,
    16.     "itemsOverlap": true,
    17.     "lineWidth": 0,
    18.     "tick": {
    19.       "visible": false
    20.     },
    21.     "item": {
    22.       "color": "#333333",
    23.       "offsetY": 65,
    24.       "width": "80%",
    25.       "fontSize": 11,
    26.       "fontWeight": 900,
    27.       "backgroundColor": "rgba(0,0,0,0)",
    28.       "textAlpha": 1,
    29.       "topState": {
    30.         "x": "+0",
    31.         "y": "+0",
    32.         "height": 20,
    33.         "alpha": 1,
    34.         "backgroundColor": "none",
    35.         "offsetY": 35,
    36.         "callout": true,
    37.         "calloutWidth": 0,
    38.         "calloutHeight": 10,
    39.         "borderLeft": "1px solid #666666",
    40.         "borderRight": "1px solid #666666",
    41.         "borderBottom": "1px solid #666666"
    42.       },
    43.       "jsRule": "rule_scaleX_item()"
    44.     }
    45.   },
    46.   "scaleY": {
    47.     "maxItems": 9999,
    48.     "itemsOverlap": true,
    49.     "lineWidth": 0,
    50.     "backgroundColor": "none",
    51.     "minorTicks": 4,
    52.     "minorTick": {
    53.       "visible": true,
    54.       "lineWidth": 1,
    55.       "lineColor": "#333333"
    56.     },
    57.     "tick": {
    58.       "lineColor": "#333333"
    59.     },
    60.     "guide": {
    61.       "lineWidth": 0,
    62.       "items": [{
    63.           "backgroundColor": "#acb0b3"
    64.         },
    65.         {
    66.           "backgroundColor": "#b1b5b8"
    67.         }
    68.       ]
    69.     },
    70.     "item": {
    71.       "color": "#333333",
    72.       "fontSize": 9,
    73.       "fontWeight": 300
    74.     }
    75.   },
    76.   "plot": {
    77.     "barsOverlap": "100%",
    78.     "barsSpaceLeft": 0.1,
    79.     "barsSpaceRight": 0.1,
    80.     "borderWidth": 1,
    81.     "borderColor": "#ffffff",
    82.     "borderAlpha": 0.8
    83.   },
    84.   "tooltip": {
    85.     "shadow": true,
    86.     "shadowColor": "#424242",
    87.     "backgroundColor": "#212121 #424242",
    88.     "callout": true,
    89.     "calloutPosition": "bottom",
    90.     "offsetY": -20,
    91.     "placement": "node:top",
    92.     "padding": 10,
    93.     "fontSize": 15,
    94.     "color": "#ffffff",
    95.     "borderWidth": 1,
    96.     "borderColor": "#000000",
    97.     "text": "%scale-key-text won %node-value %plot-text medals"
    98.   },
    99.   "series": [{
    100.       "values": [100, 110, 72, 47, 41, 46, 31, 25, 28],
    101.       "alpha": 0.25,
    102.       "max-trackers": 0,
    103.       "jsRule": "rule_series_0()",
    104.       "valueBox": {
    105.         "fontSize": 11,
    106.         "fontWeight": 600,
    107.         "offsetY": -10,
    108.         "jsRule": "rule_series_0_valueBox()",
    109.       }
    110.     },
    111.     {
    112.       "values": [51, 36, 23, 19, 16, 14, 13, 9, 8],
    113.       "text": "Gold",
    114.       "column": "1/3",
    115.       "jsRule": "rule_series_123()",
    116.       "zStart": 15,
    117.       "zEnd": 35,
    118.       "valueBox": [{
    119.           "fontSize": 10,
    120.           "fontWeight": 600,
    121.           "offsetY": -10,
    122.           "jsRule": "rule_series_123_valueBox_0()"
    123.         },
    124.         {
    125.           "fontSize": 11,
    126.           "fontWeight": 400,
    127.           "text": "%plot-text",
    128.           "angle": 270,
    129.           "placement": "bottom",
    130.           "width": 50,
    131.           "textAlign": "right",
    132.           "offsetY": 25
    133.         }
    134.       ]
    135.     },
    136.     {
    137.       "values": [28, 36, 28, 15, 15, 17, 8, 6, 10],
    138.       "text": "Silver",
    139.       "column": "2/3",
    140.       "jsRule": "rule_series_123()",
    141.       "zStart": 15,
    142.       "zEnd": 35,
    143.       "valueBox": [{
    144.           "fontSize": 10,
    145.           "fontWeight": 600,
    146.           "offsetY": -10,
    147.           "jsRule": "rule_series_123_valueBox_0()"
    148.         },
    149.         {
    150.           "fontSize": 11,
    151.           "fontWeight": 400,
    152.           "text": "%plot-text",
    153.           "angle": 270,
    154.           "placement": "bottom",
    155.           "width": 50,
    156.           "textAlign": "right",
    157.           "offsetY": 25
    158.         }
    159.       ]
    160.     },
    161.     {
    162.       "values": [21, 38, 21, 13, 10, 15, 10, 10, 10],
    163.       "text": "Bronze",
    164.       "column": "3/3",
    165.       "jsRule": "rule_series_123()",
    166.       "zStart": 15,
    167.       "zEnd": 35,
    168.       "valueBox": [{
    169.           "fontSize": 10,
    170.           "fontWeight": 600,
    171.           "offsetY": -10,
    172.           "jsRule": "rule_series_123_valueBox_0()"
    173.         },
    174.         {
    175.           "fontSize": 11,
    176.           "fontWeight": 400,
    177.           "text": "%plot-text",
    178.           "angle": 270,
    179.           "placement": "bottom",
    180.           "width": 50,
    181.           "textAlign": "right",
    182.           "offsetY": 25
    183.         }
    184.       ]
    185.     }
    186.   ]
    187. };
    188.  
    189. var colorSet0 = ['#D03435', '#913891', '#5238BD'];
    190. var colorSet123 = [
    191.   ['#D33535 #E53B3C', '#E65D35 #EB753E', '#FE8035 #F88746'],
    192.   ['#843584 #A540A6', '#A46590 #B579AA', '#B3818D #B584A3'],
    193.   ['#6038B2 #7643BD', '#6D68B5 #7B7FBF', '#7681B2 #7C86BD']
    194. ];
    195.  
    196. window.rule_series_0 = function(p) {
    197.   return {
    198.     backgroundColor: colorSet0[Math.floor(p.nodeindex / 3)]
    199.   };
    200. };
    201.  
    202. window.rule_series_0_valueBox = function(p) {
    203.   return {
    204.     color: colorSet0[Math.floor(p.nodeindex / 3)]
    205.   };
    206. };
    207.  
    208. window.rule_scaleX_item = function(p) {
    209.   return {
    210.     color: colorSet0[Math.floor(p.index / 3)]
    211.   };
    212. };
    213.  
    214. window.rule_series_123 = function(p) {
    215.   return {
    216.     backgroundColor: colorSet123[Math.floor(p.nodeindex / 3)][Math.floor(p.plotindex / 3)]
    217.   };
    218. };
    219.  
    220. window.rule_series_123_valueBox_0 = function(p) {
    221.   return {
    222.     color: colorSet0[Math.floor(p.nodeindex / 3)]
    223.   };
    224. }
    225.  
    226. zingchart.render({
    227.   id: 'zc',
    228.   width: 900,
    229.   height: 500,
    230.   output: 'svg',
    231.   data: cdata
    232. });