• 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.     .zc-ref {
    11.       display: none;
    12.     }
    13.   </style>
    14. </head>
    15.  
    16. <body>
    17.   <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
    18.   <script>
    19.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    20.     var myConfig = {
    21.       "graphset": [{
    22.         "type": "mixed",
    23.         "title": {
    24.           "text": "Chart Title",
    25.           "align": "left",
    26.           "font-size": 14,
    27.           "background-color": "#BDBDBD",
    28.           "height": "5%"
    29.         },
    30.         "subtitle": {
    31.           "text": "Subtitle",
    32.           "align": "left",
    33.           "background-color": "#E0E0E0",
    34.           "height": "4%",
    35.           "offset-y": -5
    36.         },
    37.         "source": {
    38.           "text": "Source: www.zingchart.com",
    39.           "font-color": "#B71C1C"
    40.         },
    41.         "legend": {
    42.           "layout": "x2",
    43.           "width": "180px",
    44.           "x": "74%",
    45.           "y": "9.5%",
    46.           "alpha": 1,
    47.           "shadow": 0,
    48.           "max-items": 2,
    49.           "overflow": "page",
    50.           "draggable": true,
    51.           "minimize": true,
    52.           "header": {
    53.             "text": "Legend Info"
    54.           },
    55.           "footer": {
    56.             "text": "- Click Box Icon in Header to Minimize<br>- Click and Drag Cross Icon to Drag",
    57.             "font-size": "8px"
    58.           },
    59.         },
    60.         "plotarea": {
    61.           "margin": "34% 30% 10% 10%"
    62.         },
    63.         "scale-x": {
    64.           "values": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    65.           "zooming": true,
    66.           "guide": {
    67.             "line-style": "solid",
    68.             "line-color": "#BDBDBD"
    69.           },
    70.           "label": {
    71.             "text": "X label"
    72.           },
    73.           "markers": [{
    74.               "type": "area",
    75.               "range": [6.5, 7.5],
    76.               "background-color": "#66BB6A",
    77.               "alpha": 0.5,
    78.               "label": {
    79.                 "text": "Active<br>Month",
    80.                 "offset-y": -245,
    81.                 "angle": 0,
    82.                 "font-size": 10,
    83.                 "bold": true
    84.               }
    85.             },
    86.             {
    87.               "type": "area",
    88.               "range": [7.5, 11.5],
    89.               "background-color": "#cccccc",
    90.               "alpha": 0.5
    91.             }
    92.           ]
    93.         },
    94.         "scale-x-2": {
    95.           "values": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    96.           "guide": {
    97.             "visible": false
    98.           },
    99.           "label": {
    100.             "text": "X-2 label"
    101.           },
    102.           "zooming": true
    103.         },
    104.         "scale-y": {
    105.           "zooming": true,
    106.           "guide": {
    107.             "line-style": "solid"
    108.           },
    109.           "label": {
    110.             "text": "Y label"
    111.           },
    112.           "minor-ticks": 3,
    113.           "minor-tick": {
    114.             "placement": "cross",
    115.             "size": 6
    116.           },
    117.           "minor-guide": {
    118.             "line-width": "1px",
    119.             "line-style": "dashed",
    120.             "line-segement-size": "1px",
    121.             "line-gap-size": "6px",
    122.             "alpha": 0.7
    123.           },
    124.           "markers": [{
    125.             "type": "line",
    126.             "range": [74],
    127.             "line-color": "#212121",
    128.             "alpha": 1,
    129.             "line-width": 2,
    130.             "label": {
    131.               "text": "Threshold",
    132.               "offset-x": -60,
    133.               "offset-y": 8,
    134.               "background-color": "#212121",
    135.               "font-color": "white",
    136.               "font-size": 10,
    137.               "callout": true,
    138.               "callout-position": "right"
    139.             }
    140.           }]
    141.         },
    142.         "scale-y-2": {
    143.           "values": "0:100:10",
    144.           "format": "%v%",
    145.           "zooming": true,
    146.           "guide": {
    147.             "visible": false
    148.           },
    149.           "label": {
    150.             "text": "Y-2 label"
    151.           }
    152.         },
    153.         "scale-y-3": {
    154.           "values": "0:50:10",
    155.           "decimals": 2,
    156.           "zooming": true,
    157.           "guide": {
    158.             "visible": false
    159.           },
    160.           "label": {
    161.             "text": "Y-3 label"
    162.           }
    163.         },
    164.         "scale-y-4": {
    165.           "values": "0:1000000:100000",
    166.           "format": "$%v",
    167.           "multiplier": true,
    168.           "zooming": true,
    169.           "guide": {
    170.             "visible": false
    171.           },
    172.           "label": {
    173.             "text": "Y-4 label"
    174.           }
    175.         },
    176.         "scroll-x": {
    177.           "bar": {
    178.             "height": "8px",
    179.             "background-color": "#757575"
    180.           },
    181.           "handle": {
    182.             "height": "4px",
    183.             "offset-y": -1,
    184.             "background-color": "#E0E0E0"
    185.           }
    186.         },
    187.         "scroll-y": {
    188.           "bar": {
    189.             "width": "8px",
    190.             "background-color": "#757575"
    191.           },
    192.           "handle": {
    193.             "width": "4px",
    194.             "offset-x": -1,
    195.             "background-color": "#E0E0E0"
    196.           }
    197.         },
    198.         "crosshair-x": {
    199.           "plot-label": {
    200.             "visible": false
    201.           }
    202.         },
    203.         "crosshair-y": {
    204.  
    205.         },
    206.         "zoom": {
    207.           "background-color": "#B71C1C",
    208.           "alpha": 0.2,
    209.           "label": {
    210.             "visible": true,
    211.             "border-color": "#B71C1C"
    212.           }
    213.         },
    214.         "preview": {
    215.           "height": 50,
    216.           "width": "69%",
    217.           "position": "14% 14%"
    218.         },
    219.         "labels": [{
    220.           "text": "View External<br>Report",
    221.           "url": "https://www.zingchart.com/buy",
    222.           "target": "_blank",
    223.           "offset-y": "-35px",
    224.           "hook": "node:plot=2,index=4",
    225.           "font-color": "#000",
    226.           "background-color": "#ccc",
    227.           "padding": 5,
    228.           "border-radius": "3px",
    229.           "callout": true,
    230.           "callout-height": "10px",
    231.           "callout-width": "15px",
    232.           "underline": true
    233.         }],
    234.         "series": [{
    235.             "type": "line",
    236.             "values": [69, 68, 54, 80, 70, 74, 90, 70, 72, 68, 49, 69],
    237.             "scales": "scale-x,scale-y",
    238.             "line-color": "#0D47A1",
    239.             "legend-marker": {
    240.               "type": "circle"
    241.             },
    242.             "marker": {
    243.               "background-color": "#0D47A1"
    244.             }
    245.           },
    246.           {
    247.             "type": "line",
    248.             "values": [51, 53, 47, 50, 57, 63, 75, 52, 59, 47, 60, 48],
    249.             "scales": "scale-x,scale-y-2",
    250.             "line-color": "#B71C1C",
    251.             "tooltip-text": "%v%",
    252.             "legend-marker": {
    253.               "type": "circle"
    254.             },
    255.             "marker": {
    256.               "background-color": "#B71C1C"
    257.             }
    258.           },
    259.           {
    260.             "type": "bar",
    261.             "values": [22, 25, 14, 22, 26, 29, 34, 22, 26, 18, 22, 21],
    262.             "scales": "scale-x,scale-y-3",
    263.             "background-color": "#1B5E20",
    264.             "tooltip": {
    265.               "text": "The number being shown is the percentage of the node when compared to its plot",
    266.               "width": "200px",
    267.               "wrap-text": 1
    268.             },
    269.             "value-box": {
    270.               "placement": "top-in",
    271.               "offset-y": 5,
    272.               "font-color": "#fff",
    273.               "text": "%pper%",
    274.               "decimals": 1,
    275.               "font-angle": 90
    276.             }
    277.           },
    278.           {
    279.             "type": "bar",
    280.             "values": [250000, 150000, 260000, 210000, 240000, 260000, 330000, 150000, 410000, 250000, 220000, 240000],
    281.             "scales": "scale-x,scale-y-4",
    282.             "background-color": "#E65100",
    283.             "text": "Dell",
    284.             "tooltip": {
    285.               "text": "The number being shown above the bar is the value of the node",
    286.               "width": "200px",
    287.               "wrap-text": 1
    288.             },
    289.             "value-box": {
    290.               "short": true,
    291.               "placement": "top-in",
    292.               "offset-y": 5,
    293.               "font-angle": 90,
    294.               "font-color": "#fff",
    295.               "bold": true
    296.             }
    297.           }
    298.         ]
    299.       }],
    300.       "background-color": "white"
    301.     };
    302.  
    303.     zingchart.render({
    304.       id: 'myChart',
    305.       data: myConfig
    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='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
    13. </body>
    14.  
    15. </html>
    1. .zc-ref {
    2.   display: none;
    3. }
    1. var myConfig = {
    2.   "graphset": [{
    3.     "type": "mixed",
    4.     "title": {
    5.       "text": "Chart Title",
    6.       "align": "left",
    7.       "font-size": 14,
    8.       "background-color": "#BDBDBD",
    9.       "height": "5%"
    10.     },
    11.     "subtitle": {
    12.       "text": "Subtitle",
    13.       "align": "left",
    14.       "background-color": "#E0E0E0",
    15.       "height": "4%",
    16.       "offset-y": -5
    17.     },
    18.     "source": {
    19.       "text": "Source: www.zingchart.com",
    20.       "font-color": "#B71C1C"
    21.     },
    22.     "legend": {
    23.       "layout": "x2",
    24.       "width": "180px",
    25.       "x": "74%",
    26.       "y": "9.5%",
    27.       "alpha": 1,
    28.       "shadow": 0,
    29.       "max-items": 2,
    30.       "overflow": "page",
    31.       "draggable": true,
    32.       "minimize": true,
    33.       "header": {
    34.         "text": "Legend Info"
    35.       },
    36.       "footer": {
    37.         "text": "- Click Box Icon in Header to Minimize<br>- Click and Drag Cross Icon to Drag",
    38.         "font-size": "8px"
    39.       },
    40.     },
    41.     "plotarea": {
    42.       "margin": "34% 30% 10% 10%"
    43.     },
    44.     "scale-x": {
    45.       "values": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    46.       "zooming": true,
    47.       "guide": {
    48.         "line-style": "solid",
    49.         "line-color": "#BDBDBD"
    50.       },
    51.       "label": {
    52.         "text": "X label"
    53.       },
    54.       "markers": [{
    55.           "type": "area",
    56.           "range": [6.5, 7.5],
    57.           "background-color": "#66BB6A",
    58.           "alpha": 0.5,
    59.           "label": {
    60.             "text": "Active<br>Month",
    61.             "offset-y": -245,
    62.             "angle": 0,
    63.             "font-size": 10,
    64.             "bold": true
    65.           }
    66.         },
    67.         {
    68.           "type": "area",
    69.           "range": [7.5, 11.5],
    70.           "background-color": "#cccccc",
    71.           "alpha": 0.5
    72.         }
    73.       ]
    74.     },
    75.     "scale-x-2": {
    76.       "values": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    77.       "guide": {
    78.         "visible": false
    79.       },
    80.       "label": {
    81.         "text": "X-2 label"
    82.       },
    83.       "zooming": true
    84.     },
    85.     "scale-y": {
    86.       "zooming": true,
    87.       "guide": {
    88.         "line-style": "solid"
    89.       },
    90.       "label": {
    91.         "text": "Y label"
    92.       },
    93.       "minor-ticks": 3,
    94.       "minor-tick": {
    95.         "placement": "cross",
    96.         "size": 6
    97.       },
    98.       "minor-guide": {
    99.         "line-width": "1px",
    100.         "line-style": "dashed",
    101.         "line-segement-size": "1px",
    102.         "line-gap-size": "6px",
    103.         "alpha": 0.7
    104.       },
    105.       "markers": [{
    106.         "type": "line",
    107.         "range": [74],
    108.         "line-color": "#212121",
    109.         "alpha": 1,
    110.         "line-width": 2,
    111.         "label": {
    112.           "text": "Threshold",
    113.           "offset-x": -60,
    114.           "offset-y": 8,
    115.           "background-color": "#212121",
    116.           "font-color": "white",
    117.           "font-size": 10,
    118.           "callout": true,
    119.           "callout-position": "right"
    120.         }
    121.       }]
    122.     },
    123.     "scale-y-2": {
    124.       "values": "0:100:10",
    125.       "format": "%v%",
    126.       "zooming": true,
    127.       "guide": {
    128.         "visible": false
    129.       },
    130.       "label": {
    131.         "text": "Y-2 label"
    132.       }
    133.     },
    134.     "scale-y-3": {
    135.       "values": "0:50:10",
    136.       "decimals": 2,
    137.       "zooming": true,
    138.       "guide": {
    139.         "visible": false
    140.       },
    141.       "label": {
    142.         "text": "Y-3 label"
    143.       }
    144.     },
    145.     "scale-y-4": {
    146.       "values": "0:1000000:100000",
    147.       "format": "$%v",
    148.       "multiplier": true,
    149.       "zooming": true,
    150.       "guide": {
    151.         "visible": false
    152.       },
    153.       "label": {
    154.         "text": "Y-4 label"
    155.       }
    156.     },
    157.     "scroll-x": {
    158.       "bar": {
    159.         "height": "8px",
    160.         "background-color": "#757575"
    161.       },
    162.       "handle": {
    163.         "height": "4px",
    164.         "offset-y": -1,
    165.         "background-color": "#E0E0E0"
    166.       }
    167.     },
    168.     "scroll-y": {
    169.       "bar": {
    170.         "width": "8px",
    171.         "background-color": "#757575"
    172.       },
    173.       "handle": {
    174.         "width": "4px",
    175.         "offset-x": -1,
    176.         "background-color": "#E0E0E0"
    177.       }
    178.     },
    179.     "crosshair-x": {
    180.       "plot-label": {
    181.         "visible": false
    182.       }
    183.     },
    184.     "crosshair-y": {
    185.  
    186.     },
    187.     "zoom": {
    188.       "background-color": "#B71C1C",
    189.       "alpha": 0.2,
    190.       "label": {
    191.         "visible": true,
    192.         "border-color": "#B71C1C"
    193.       }
    194.     },
    195.     "preview": {
    196.       "height": 50,
    197.       "width": "69%",
    198.       "position": "14% 14%"
    199.     },
    200.     "labels": [{
    201.       "text": "View External<br>Report",
    202.       "url": "https://www.zingchart.com/buy",
    203.       "target": "_blank",
    204.       "offset-y": "-35px",
    205.       "hook": "node:plot=2,index=4",
    206.       "font-color": "#000",
    207.       "background-color": "#ccc",
    208.       "padding": 5,
    209.       "border-radius": "3px",
    210.       "callout": true,
    211.       "callout-height": "10px",
    212.       "callout-width": "15px",
    213.       "underline": true
    214.     }],
    215.     "series": [{
    216.         "type": "line",
    217.         "values": [69, 68, 54, 80, 70, 74, 90, 70, 72, 68, 49, 69],
    218.         "scales": "scale-x,scale-y",
    219.         "line-color": "#0D47A1",
    220.         "legend-marker": {
    221.           "type": "circle"
    222.         },
    223.         "marker": {
    224.           "background-color": "#0D47A1"
    225.         }
    226.       },
    227.       {
    228.         "type": "line",
    229.         "values": [51, 53, 47, 50, 57, 63, 75, 52, 59, 47, 60, 48],
    230.         "scales": "scale-x,scale-y-2",
    231.         "line-color": "#B71C1C",
    232.         "tooltip-text": "%v%",
    233.         "legend-marker": {
    234.           "type": "circle"
    235.         },
    236.         "marker": {
    237.           "background-color": "#B71C1C"
    238.         }
    239.       },
    240.       {
    241.         "type": "bar",
    242.         "values": [22, 25, 14, 22, 26, 29, 34, 22, 26, 18, 22, 21],
    243.         "scales": "scale-x,scale-y-3",
    244.         "background-color": "#1B5E20",
    245.         "tooltip": {
    246.           "text": "The number being shown is the percentage of the node when compared to its plot",
    247.           "width": "200px",
    248.           "wrap-text": 1
    249.         },
    250.         "value-box": {
    251.           "placement": "top-in",
    252.           "offset-y": 5,
    253.           "font-color": "#fff",
    254.           "text": "%pper%",
    255.           "decimals": 1,
    256.           "font-angle": 90
    257.         }
    258.       },
    259.       {
    260.         "type": "bar",
    261.         "values": [250000, 150000, 260000, 210000, 240000, 260000, 330000, 150000, 410000, 250000, 220000, 240000],
    262.         "scales": "scale-x,scale-y-4",
    263.         "background-color": "#E65100",
    264.         "text": "Dell",
    265.         "tooltip": {
    266.           "text": "The number being shown above the bar is the value of the node",
    267.           "width": "200px",
    268.           "wrap-text": 1
    269.         },
    270.         "value-box": {
    271.           "short": true,
    272.           "placement": "top-in",
    273.           "offset-y": 5,
    274.           "font-angle": 90,
    275.           "font-color": "#fff",
    276.           "bold": true
    277.         }
    278.       }
    279.     ]
    280.   }],
    281.   "background-color": "white"
    282. };
    283.  
    284. zingchart.render({
    285.   id: 'myChart',
    286.   data: myConfig
    287. });