• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.  
    9.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10.   <style>
    11.     html,
    12.     body,
    13.     #myChart {
    14.       height: 100%;
    15.       width: 100%;
    16.       margin: 0;
    17.       padding: 0;
    18.     }
    19.   </style>
    20. </head>
    21.  
    22. <body>
    23.   <div id='myChart'></div>
    24.   <script>
    25.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    26.     zingchart.THEME = "classic";
    27.     var myConfig = {
    28.       "type": "bar",
    29.       "stacked": true,
    30.       "stack-type": "normal",
    31.       "background-color": "#FFFFFF",
    32.       "title": {
    33.         "text": "Mobile OS Sales  - ",
    34.         "font-family": "arial",
    35.         "x": "40px",
    36.         "y": "5px",
    37.         "align": "left",
    38.         "bold": false,
    39.         "font-size": "16px",
    40.         "font-color": "#000000",
    41.         "background-color": "none"
    42.       },
    43.       "subtitle": {
    44.         "text": "<i>Since January 14, 2013</i>",
    45.         "font-family": "arial",
    46.         "x": "175px",
    47.         "y": "5px",
    48.         "align": "left",
    49.         "bold": false,
    50.         "font-size": "16px",
    51.         "font-color": "#7E7E7E",
    52.         "background-color": "none"
    53.       },
    54.       "plot": {
    55.         "bar-width": "25px",
    56.         "hover-state": {
    57.           "visible": false
    58.         },
    59.         "animation": {
    60.           "delay": 300,
    61.           "sequence": 1
    62.         }
    63.       },
    64.       "labels": [{
    65.           "text": "11,245 Android",
    66.           "background-color": "#90A23B",
    67.           "font-size": "14px",
    68.           "font-family": "arial",
    69.           "font-weight": "normal",
    70.           "font-color": "#FFFFFF",
    71.           "padding": "10%",
    72.           "border-radius": "3px",
    73.           "offset-y": -30,
    74.           "shadow": false,
    75.           "callout": true,
    76.           "callout-height": "10px",
    77.           "callout-width": "15px",
    78.           "hook": "node:plot=2;index=4"
    79.         },
    80.         {
    81.           "text": "9,750 iOS",
    82.           "background-color": "#787878",
    83.           "font-size": "14px",
    84.           "font-family": "arial",
    85.           "font-weight": "normal",
    86.           "font-color": "#FFFFFF",
    87.           "padding": "10%",
    88.           "border-radius": "3px",
    89.           "shadow": false,
    90.           "callout": true,
    91.           "callout-height": "10px",
    92.           "callout-width": "15px",
    93.           "hook": "node:plot=2;index=5",
    94.           "offset-y": -30
    95.         },
    96.         {
    97.           "text": "15,279 Windows",
    98.           "thousands-separator": ",",
    99.           "background-color": "#FFC700",
    100.           "font-size": "14px",
    101.           "font-family": "arial",
    102.           "font-weight": "normal",
    103.           "font-color": "#FFFFFF",
    104.           "padding": "10%",
    105.           "border-radius": "3px",
    106.           "shadow": false,
    107.           "callout": true,
    108.           "callout-height": "10px",
    109.           "callout-width": "15px",
    110.           "offset-y": -30,
    111.           "hook": "node:plot=2;index=9"
    112.         }
    113.       ],
    114.       "scale-x": {
    115.         "values": [
    116.           "JAN",
    117.           "FEB",
    118.           "MAR",
    119.           "APR",
    120.           "MAY",
    121.           "JUN",
    122.           "JUL",
    123.           "AUG",
    124.           "SEP",
    125.           "OCT",
    126.           "NOV",
    127.           "DEC"
    128.         ],
    129.         "line-color": "#7E7E7E",
    130.         "tick": {
    131.           "visible": false
    132.         },
    133.         "guide": {
    134.           "visible": false
    135.         },
    136.         "item": {
    137.           "font-family": "arial",
    138.           "font-color": "#8B8B8B"
    139.         }
    140.       },
    141.       "scale-y": {
    142.         "values": "0:70000:10000",
    143.         "short": true,
    144.         "line-color": "#7E7E7E",
    145.         "tick": {
    146.           "visible": false
    147.         },
    148.         "guide": {
    149.           "line-style": "solid"
    150.         },
    151.         "item": {
    152.           "font-family": "arial",
    153.           "font-color": "#8B8B8B"
    154.         }
    155.       },
    156.       "series": [{
    157.           "values": [
    158.             15000,
    159.             12000,
    160.             42000,
    161.             13000,
    162.             19500,
    163.             9750,
    164.             11500,
    165.             36500,
    166.             11750,
    167.             16000,
    168.             9800,
    169.             43279
    170.           ],
    171.           "background-color": "#787878"
    172.         },
    173.         {
    174.           "values": [
    175.             13000,
    176.             8000,
    177.             5000,
    178.             20000,
    179.             17000,
    180.             10000,
    181.             34000,
    182.             6000,
    183.             5500,
    184.             15279,
    185.             1500,
    186.             2250
    187.           ],
    188.           "background-color": "#FFC700"
    189.         },
    190.         {
    191.           "values": [
    192.             17000,
    193.             9000,
    194.             2000,
    195.             12500,
    196.             11245,
    197.             1750,
    198.             5500,
    199.             3000,
    200.             10000,
    201.             9750,
    202.             1500,
    203.             17750
    204.           ],
    205.           "background-color": "#90A23B"
    206.         }
    207.       ],
    208.       "tooltip": {
    209.         "visible": false
    210.       }
    211.     };
    212.  
    213.     zingchart.render({
    214.       id: 'myChart',
    215.       data: myConfig,
    216.       height: '100%',
    217.       width: '100%'
    218.     });
    219.   </script>
    220. </body>
    221.  
    222. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.  
    9.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14. </body>
    15.  
    16. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6.   margin: 0;
    7.   padding: 0;
    8. }
    1. zingchart.THEME = "classic";
    2. var myConfig = {
    3.   "type": "bar",
    4.   "stacked": true,
    5.   "stack-type": "normal",
    6.   "background-color": "#FFFFFF",
    7.   "title": {
    8.     "text": "Mobile OS Sales  - ",
    9.     "font-family": "arial",
    10.     "x": "40px",
    11.     "y": "5px",
    12.     "align": "left",
    13.     "bold": false,
    14.     "font-size": "16px",
    15.     "font-color": "#000000",
    16.     "background-color": "none"
    17.   },
    18.   "subtitle": {
    19.     "text": "<i>Since January 14, 2013</i>",
    20.     "font-family": "arial",
    21.     "x": "175px",
    22.     "y": "5px",
    23.     "align": "left",
    24.     "bold": false,
    25.     "font-size": "16px",
    26.     "font-color": "#7E7E7E",
    27.     "background-color": "none"
    28.   },
    29.   "plot": {
    30.     "bar-width": "25px",
    31.     "hover-state": {
    32.       "visible": false
    33.     },
    34.     "animation": {
    35.       "delay": 300,
    36.       "sequence": 1
    37.     }
    38.   },
    39.   "labels": [{
    40.       "text": "11,245 Android",
    41.       "background-color": "#90A23B",
    42.       "font-size": "14px",
    43.       "font-family": "arial",
    44.       "font-weight": "normal",
    45.       "font-color": "#FFFFFF",
    46.       "padding": "10%",
    47.       "border-radius": "3px",
    48.       "offset-y": -30,
    49.       "shadow": false,
    50.       "callout": true,
    51.       "callout-height": "10px",
    52.       "callout-width": "15px",
    53.       "hook": "node:plot=2;index=4"
    54.     },
    55.     {
    56.       "text": "9,750 iOS",
    57.       "background-color": "#787878",
    58.       "font-size": "14px",
    59.       "font-family": "arial",
    60.       "font-weight": "normal",
    61.       "font-color": "#FFFFFF",
    62.       "padding": "10%",
    63.       "border-radius": "3px",
    64.       "shadow": false,
    65.       "callout": true,
    66.       "callout-height": "10px",
    67.       "callout-width": "15px",
    68.       "hook": "node:plot=2;index=5",
    69.       "offset-y": -30
    70.     },
    71.     {
    72.       "text": "15,279 Windows",
    73.       "thousands-separator": ",",
    74.       "background-color": "#FFC700",
    75.       "font-size": "14px",
    76.       "font-family": "arial",
    77.       "font-weight": "normal",
    78.       "font-color": "#FFFFFF",
    79.       "padding": "10%",
    80.       "border-radius": "3px",
    81.       "shadow": false,
    82.       "callout": true,
    83.       "callout-height": "10px",
    84.       "callout-width": "15px",
    85.       "offset-y": -30,
    86.       "hook": "node:plot=2;index=9"
    87.     }
    88.   ],
    89.   "scale-x": {
    90.     "values": [
    91.       "JAN",
    92.       "FEB",
    93.       "MAR",
    94.       "APR",
    95.       "MAY",
    96.       "JUN",
    97.       "JUL",
    98.       "AUG",
    99.       "SEP",
    100.       "OCT",
    101.       "NOV",
    102.       "DEC"
    103.     ],
    104.     "line-color": "#7E7E7E",
    105.     "tick": {
    106.       "visible": false
    107.     },
    108.     "guide": {
    109.       "visible": false
    110.     },
    111.     "item": {
    112.       "font-family": "arial",
    113.       "font-color": "#8B8B8B"
    114.     }
    115.   },
    116.   "scale-y": {
    117.     "values": "0:70000:10000",
    118.     "short": true,
    119.     "line-color": "#7E7E7E",
    120.     "tick": {
    121.       "visible": false
    122.     },
    123.     "guide": {
    124.       "line-style": "solid"
    125.     },
    126.     "item": {
    127.       "font-family": "arial",
    128.       "font-color": "#8B8B8B"
    129.     }
    130.   },
    131.   "series": [{
    132.       "values": [
    133.         15000,
    134.         12000,
    135.         42000,
    136.         13000,
    137.         19500,
    138.         9750,
    139.         11500,
    140.         36500,
    141.         11750,
    142.         16000,
    143.         9800,
    144.         43279
    145.       ],
    146.       "background-color": "#787878"
    147.     },
    148.     {
    149.       "values": [
    150.         13000,
    151.         8000,
    152.         5000,
    153.         20000,
    154.         17000,
    155.         10000,
    156.         34000,
    157.         6000,
    158.         5500,
    159.         15279,
    160.         1500,
    161.         2250
    162.       ],
    163.       "background-color": "#FFC700"
    164.     },
    165.     {
    166.       "values": [
    167.         17000,
    168.         9000,
    169.         2000,
    170.         12500,
    171.         11245,
    172.         1750,
    173.         5500,
    174.         3000,
    175.         10000,
    176.         9750,
    177.         1500,
    178.         17750
    179.       ],
    180.       "background-color": "#90A23B"
    181.     }
    182.   ],
    183.   "tooltip": {
    184.     "visible": false
    185.   }
    186. };
    187.  
    188. zingchart.render({
    189.   id: 'myChart',
    190.   data: myConfig,
    191.   height: '100%',
    192.   width: '100%'
    193. });