• 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.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     var myConfig = {
    24.       "graphset": [{
    25.           "background-color": "#fff",
    26.           "type": "bar",
    27.           "height": "50%",
    28.           "width": "100%",
    29.           "x": 0,
    30.           "y": 0,
    31.           "shapes": [{
    32.               "type": "circle",
    33.               "id": "stack",
    34.               "name": "stack",
    35.               "size": 5,
    36.               "border-width": 2,
    37.               "background-color": "black",
    38.               "x": 100,
    39.               "y": 25,
    40.               "cursor": "pointer",
    41.               "label": {
    42.                 "text": "Stacked",
    43.                 "offset-x": 30
    44.               },
    45.             },
    46.             {
    47.               "type": "circle",
    48.               "id": "group",
    49.               "name": "group",
    50.               "size": 5,
    51.               "border-width": 2,
    52.               "background-color": "white",
    53.               "cursor": "pointer",
    54.               "x": 200,
    55.               "y": 25,
    56.               "label": {
    57.                 "text": "Grouped",
    58.                 "offset-x": 30
    59.               }
    60.             }
    61.           ],
    62.           "legend": {
    63.             "shared": true,
    64.             "toggle-action": "remove",
    65.             "layout": "x3",
    66.             "x": "55%",
    67.             "background-color": "none",
    68.             "border-width": 0,
    69.             "marker": {
    70.               "type": "circle",
    71.               "border-width": 0
    72.             }
    73.           },
    74.           "plotarea": {
    75.             "margin": "50px 60px 30px 60px"
    76.           },
    77.           "plot": {
    78.             "stacked": true,
    79.             "mask-tolerance": [0, 0] // helps hide bar when zooming and have value below scale
    80.           },
    81.           "scale-x": {
    82.             "line-color": "#555",
    83.             "line-width": 1,
    84.             "max-labels": 6,
    85.             "zooming": true,
    86.             "tick": {
    87.               "line-color": "none"
    88.             },
    89.             "guide": {
    90.               "line-style": "solid"
    91.             }
    92.           },
    93.           "zoom": {
    94.             "shared": true
    95.           },
    96.           "scale-y": {
    97.             "line-width": 1,
    98.             "zooming": true,
    99.             "line-color": "#555",
    100.             "step": 0.5,
    101.             "tick": {
    102.               "line-color": "none"
    103.             },
    104.             "guide": {
    105.               "line-style": "solid"
    106.             }
    107.           },
    108.           "tooltip": {
    109.             "text": "%v on %i"
    110.           },
    111.           "series": [{
    112.               "background-color": "#5698c6",
    113.               "hover-state": {
    114.                 "background-color": "#000"
    115.               },
    116.               "values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
    117.               "legend-text": "Stream 1",
    118.               "visible": true
    119.             },
    120.             {
    121.               "values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
    122.               "text": "Stream 2",
    123.               "background-color": "#FE9E49",
    124.               "hover-state": {
    125.                 "background-color": "#000"
    126.               },
    127.               "visible": true
    128.             },
    129.             {
    130.               "values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
    131.               "text": "Stream 3",
    132.               "background-color": "#C1D4ED",
    133.               "hover-state": {
    134.                 "background-color": "#000"
    135.               }
    136.             }
    137.           ]
    138.         },
    139.         {
    140.           "type": "area",
    141.           "height": "25%",
    142.           "y": "50%",
    143.           "width": "100%",
    144.           "x": 0,
    145.           "background-color": "#fff",
    146.           "legend": {
    147.             "shared": true,
    148.             "visible": false,
    149.             "toggle-action": "remove"
    150.           },
    151.           "plotarea": {
    152.             "margin": "20px 60px"
    153.           },
    154.           "plot": {
    155.             "stacked": true,
    156.             "alpha-area": 1,
    157.             "line-width": 0,
    158.             "marker": {
    159.               "visible": false
    160.             },
    161.             "active-area": true,
    162.             "hover-state": {
    163.               "background-color": "black"
    164.             }
    165.           },
    166.           "scale-x": {
    167.             "line-color": "#555",
    168.             "line-width": 1,
    169.             "values": "1:60",
    170.             "max-labels": 6,
    171.             "zooming": true,
    172.             "tick": {
    173.               "line-color": "none"
    174.             },
    175.             "guide": {
    176.               "line-style": "solid"
    177.             }
    178.           },
    179.           "zoom": {
    180.             "shared": true
    181.           },
    182.           "scale-y": {
    183.             "zooming": true,
    184.             "line-color": "#555",
    185.             "line-width": 1,
    186.             "tick": {
    187.               "line-color": "none"
    188.             },
    189.             "guide": {
    190.               "line-style": "solid"
    191.             }
    192.           },
    193.           "series": [{
    194.               "values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
    195.               "background-color": "#5698c6",
    196.               "line-color": "#5698c6"
    197.             },
    198.             {
    199.               "values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
    200.               "background-color": "#FE9E49",
    201.               "line-color": "#FE9E49"
    202.             },
    203.             {
    204.               "values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
    205.               "background-color": "#C1D4ED",
    206.               "line-color": "#C1D4ED"
    207.             }
    208.           ]
    209.         },
    210.         {
    211.           "type": "line",
    212.           "height": "25%",
    213.           "y": "75%",
    214.           "width": "100%",
    215.           "x": 0,
    216.           "background-color": "#fff",
    217.           "legend": {
    218.             "shared": true,
    219.             "visible": false,
    220.             "toggle-action": "remove"
    221.           },
    222.           "plotarea": {
    223.             "margin": "20px 60px 30px 60px"
    224.           },
    225.           "plot": {
    226.             "line-width": 2,
    227.             "marker": {
    228.               "size": 0,
    229.               "border-width": 0
    230.             },
    231.             "hover-marker": {
    232.               "size": 5,
    233.               "background-color": "black"
    234.             }
    235.           },
    236.           "scale-x": {
    237.             "line-color": "#555",
    238.             "line-width": 1,
    239.             "values": "1:60",
    240.             "max-labels": 6,
    241.             "zooming": true,
    242.             "tick": {
    243.               "line-color": "none"
    244.             },
    245.             "guide": {
    246.               "line-style": "solid"
    247.             }
    248.           },
    249.           "scale-y": {
    250.             "zooming": true,
    251.             "line-color": "#555",
    252.             "line-width": 1,
    253.             "tick": {
    254.               "line-color": "none"
    255.             },
    256.             "guide": {
    257.               "line-style": "solid"
    258.             }
    259.           },
    260.           "zoom": {
    261.             "shared": true
    262.           },
    263.           "series": [{
    264.               "values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
    265.               "line-color": "#5698c6",
    266.               "marker": {
    267.                 "background-color": "#5698c6",
    268.               }
    269.             },
    270.             {
    271.               "values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
    272.               "line-color": "#FE9E49",
    273.               "marker": {
    274.                 "background-color": "#FE9E49",
    275.               }
    276.             },
    277.             {
    278.               "values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
    279.               "line-color": "#C1D4ED",
    280.               "marker": {
    281.                 "background-color": "#C1D4ED",
    282.               }
    283.             }
    284.           ]
    285.         }
    286.       ]
    287.     };
    288.  
    289.     function toggleCharts(e) {
    290.       // just referencing original config. You can get chart info as well
    291.  
    292.       if (e.shapeid === 'stack') {
    293.         myConfig.graphset[0].plot.stacked = true;
    294.         myConfig.graphset[1].plot.stacked = true;
    295.         myConfig.graphset[0].shapes[0]['background-color'] = 'black';
    296.         myConfig.graphset[0].shapes[1]['background-color'] = 'white';
    297.       } else if (e.shapeid === 'group') {
    298.         myConfig.graphset[0].plot.stacked = false;
    299.         myConfig.graphset[1].plot.stacked = false;
    300.         myConfig.graphset[0].shapes[0]['background-color'] = 'white';
    301.         myConfig.graphset[0].shapes[1]['background-color'] = 'black';
    302.       }
    303.  
    304.       zingchart.exec('myChart', 'setdata', {
    305.         data: myConfig
    306.       });
    307.     }
    308.  
    309.     zingchart.bind('myChart', 'shape_click', toggleCharts);
    310.  
    311.     zingchart.render({
    312.       id: 'myChart',
    313.       data: myConfig,
    314.       height: "100%",
    315.       width: "100%"
    316.     });
    317.   </script>
    318. </body>
    319.  
    320. </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'></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. var myConfig = {
    2.   "graphset": [{
    3.       "background-color": "#fff",
    4.       "type": "bar",
    5.       "height": "50%",
    6.       "width": "100%",
    7.       "x": 0,
    8.       "y": 0,
    9.       "shapes": [{
    10.           "type": "circle",
    11.           "id": "stack",
    12.           "name": "stack",
    13.           "size": 5,
    14.           "border-width": 2,
    15.           "background-color": "black",
    16.           "x": 100,
    17.           "y": 25,
    18.           "cursor": "pointer",
    19.           "label": {
    20.             "text": "Stacked",
    21.             "offset-x": 30
    22.           },
    23.         },
    24.         {
    25.           "type": "circle",
    26.           "id": "group",
    27.           "name": "group",
    28.           "size": 5,
    29.           "border-width": 2,
    30.           "background-color": "white",
    31.           "cursor": "pointer",
    32.           "x": 200,
    33.           "y": 25,
    34.           "label": {
    35.             "text": "Grouped",
    36.             "offset-x": 30
    37.           }
    38.         }
    39.       ],
    40.       "legend": {
    41.         "shared": true,
    42.         "toggle-action": "remove",
    43.         "layout": "x3",
    44.         "x": "55%",
    45.         "background-color": "none",
    46.         "border-width": 0,
    47.         "marker": {
    48.           "type": "circle",
    49.           "border-width": 0
    50.         }
    51.       },
    52.       "plotarea": {
    53.         "margin": "50px 60px 30px 60px"
    54.       },
    55.       "plot": {
    56.         "stacked": true,
    57.         "mask-tolerance": [0, 0] // helps hide bar when zooming and have value below scale
    58.       },
    59.       "scale-x": {
    60.         "line-color": "#555",
    61.         "line-width": 1,
    62.         "max-labels": 6,
    63.         "zooming": true,
    64.         "tick": {
    65.           "line-color": "none"
    66.         },
    67.         "guide": {
    68.           "line-style": "solid"
    69.         }
    70.       },
    71.       "zoom": {
    72.         "shared": true
    73.       },
    74.       "scale-y": {
    75.         "line-width": 1,
    76.         "zooming": true,
    77.         "line-color": "#555",
    78.         "step": 0.5,
    79.         "tick": {
    80.           "line-color": "none"
    81.         },
    82.         "guide": {
    83.           "line-style": "solid"
    84.         }
    85.       },
    86.       "tooltip": {
    87.         "text": "%v on %i"
    88.       },
    89.       "series": [{
    90.           "background-color": "#5698c6",
    91.           "hover-state": {
    92.             "background-color": "#000"
    93.           },
    94.           "values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
    95.           "legend-text": "Stream 1",
    96.           "visible": true
    97.         },
    98.         {
    99.           "values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
    100.           "text": "Stream 2",
    101.           "background-color": "#FE9E49",
    102.           "hover-state": {
    103.             "background-color": "#000"
    104.           },
    105.           "visible": true
    106.         },
    107.         {
    108.           "values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
    109.           "text": "Stream 3",
    110.           "background-color": "#C1D4ED",
    111.           "hover-state": {
    112.             "background-color": "#000"
    113.           }
    114.         }
    115.       ]
    116.     },
    117.     {
    118.       "type": "area",
    119.       "height": "25%",
    120.       "y": "50%",
    121.       "width": "100%",
    122.       "x": 0,
    123.       "background-color": "#fff",
    124.       "legend": {
    125.         "shared": true,
    126.         "visible": false,
    127.         "toggle-action": "remove"
    128.       },
    129.       "plotarea": {
    130.         "margin": "20px 60px"
    131.       },
    132.       "plot": {
    133.         "stacked": true,
    134.         "alpha-area": 1,
    135.         "line-width": 0,
    136.         "marker": {
    137.           "visible": false
    138.         },
    139.         "active-area": true,
    140.         "hover-state": {
    141.           "background-color": "black"
    142.         }
    143.       },
    144.       "scale-x": {
    145.         "line-color": "#555",
    146.         "line-width": 1,
    147.         "values": "1:60",
    148.         "max-labels": 6,
    149.         "zooming": true,
    150.         "tick": {
    151.           "line-color": "none"
    152.         },
    153.         "guide": {
    154.           "line-style": "solid"
    155.         }
    156.       },
    157.       "zoom": {
    158.         "shared": true
    159.       },
    160.       "scale-y": {
    161.         "zooming": true,
    162.         "line-color": "#555",
    163.         "line-width": 1,
    164.         "tick": {
    165.           "line-color": "none"
    166.         },
    167.         "guide": {
    168.           "line-style": "solid"
    169.         }
    170.       },
    171.       "series": [{
    172.           "values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
    173.           "background-color": "#5698c6",
    174.           "line-color": "#5698c6"
    175.         },
    176.         {
    177.           "values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
    178.           "background-color": "#FE9E49",
    179.           "line-color": "#FE9E49"
    180.         },
    181.         {
    182.           "values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
    183.           "background-color": "#C1D4ED",
    184.           "line-color": "#C1D4ED"
    185.         }
    186.       ]
    187.     },
    188.     {
    189.       "type": "line",
    190.       "height": "25%",
    191.       "y": "75%",
    192.       "width": "100%",
    193.       "x": 0,
    194.       "background-color": "#fff",
    195.       "legend": {
    196.         "shared": true,
    197.         "visible": false,
    198.         "toggle-action": "remove"
    199.       },
    200.       "plotarea": {
    201.         "margin": "20px 60px 30px 60px"
    202.       },
    203.       "plot": {
    204.         "line-width": 2,
    205.         "marker": {
    206.           "size": 0,
    207.           "border-width": 0
    208.         },
    209.         "hover-marker": {
    210.           "size": 5,
    211.           "background-color": "black"
    212.         }
    213.       },
    214.       "scale-x": {
    215.         "line-color": "#555",
    216.         "line-width": 1,
    217.         "values": "1:60",
    218.         "max-labels": 6,
    219.         "zooming": true,
    220.         "tick": {
    221.           "line-color": "none"
    222.         },
    223.         "guide": {
    224.           "line-style": "solid"
    225.         }
    226.       },
    227.       "scale-y": {
    228.         "zooming": true,
    229.         "line-color": "#555",
    230.         "line-width": 1,
    231.         "tick": {
    232.           "line-color": "none"
    233.         },
    234.         "guide": {
    235.           "line-style": "solid"
    236.         }
    237.       },
    238.       "zoom": {
    239.         "shared": true
    240.       },
    241.       "series": [{
    242.           "values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
    243.           "line-color": "#5698c6",
    244.           "marker": {
    245.             "background-color": "#5698c6",
    246.           }
    247.         },
    248.         {
    249.           "values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
    250.           "line-color": "#FE9E49",
    251.           "marker": {
    252.             "background-color": "#FE9E49",
    253.           }
    254.         },
    255.         {
    256.           "values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
    257.           "line-color": "#C1D4ED",
    258.           "marker": {
    259.             "background-color": "#C1D4ED",
    260.           }
    261.         }
    262.       ]
    263.     }
    264.   ]
    265. };
    266.  
    267. function toggleCharts(e) {
    268.   // just referencing original config. You can get chart info as well
    269.  
    270.   if (e.shapeid === 'stack') {
    271.     myConfig.graphset[0].plot.stacked = true;
    272.     myConfig.graphset[1].plot.stacked = true;
    273.     myConfig.graphset[0].shapes[0]['background-color'] = 'black';
    274.     myConfig.graphset[0].shapes[1]['background-color'] = 'white';
    275.   } else if (e.shapeid === 'group') {
    276.     myConfig.graphset[0].plot.stacked = false;
    277.     myConfig.graphset[1].plot.stacked = false;
    278.     myConfig.graphset[0].shapes[0]['background-color'] = 'white';
    279.     myConfig.graphset[0].shapes[1]['background-color'] = 'black';
    280.   }
    281.  
    282.   zingchart.exec('myChart', 'setdata', {
    283.     data: myConfig
    284.   });
    285. }
    286.  
    287. zingchart.bind('myChart', 'shape_click', toggleCharts);
    288.  
    289. zingchart.render({
    290.   id: 'myChart',
    291.   data: myConfig,
    292.   height: "100%",
    293.   width: "100%"
    294. });