• 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="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var myConfig = {
    35.       "gui": {
    36.         "contextMenu": {
    37.           "button": {
    38.             "visible": 0
    39.           },
    40.           "visible": false
    41.         },
    42.         "behaviors": [{
    43.             "id": "GuideShow",
    44.             "enabled": "none"
    45.           },
    46.           {
    47.             "id": "GuideHide",
    48.             "enabled": "none"
    49.           },
    50.           {
    51.             "id": "About",
    52.             "enabled": "none"
    53.           },
    54.           {
    55.             "id": "ViewSource",
    56.             "enabled": "none"
    57.           },
    58.           {
    59.             "id": "Reload",
    60.             "enabled": "none"
    61.           }
    62.         ]
    63.       },
    64.       "scaleX": {
    65.         "visible": true,
    66.         "label": {
    67.           "text": "",
    68.           "visible": true
    69.         },
    70.         "zooming": false,
    71.         "values": [
    72.           "JAS 2014",
    73.           "OND 2014",
    74.           "JFM 2014",
    75.           "AMJ 2015",
    76.           "JAS 2015",
    77.           "OND 2015",
    78.           "JAS 2016",
    79.           "JFM 2017"
    80.         ],
    81.         "lineColor": "black",
    82.         "lineWidth": "1px",
    83.         "tick": {
    84.           "lineColor": "black",
    85.           "lineWidth": "1px"
    86.         },
    87.         "item": {
    88.           "fontColor": "black",
    89.           "angle": 0,
    90.           "flat": false,
    91.           "visible": true,
    92.           "fontSize": 10
    93.         },
    94.         "itemsoverlap": false,
    95.         "guide": {
    96.           "visible": false,
    97.           "alpha": 0.7
    98.         }
    99.       },
    100.       "scaleY": {
    101.         "lineColor": "black",
    102.         "lineWidth": "1px",
    103.         "tick": {
    104.           "lineColor": "black",
    105.           "lineWidth": "1px"
    106.         },
    107.         "guide": {
    108.           "lineColor": "#626262",
    109.           "alpha": 0.5,
    110.           "lineStyle": "dashed",
    111.           "visible": false
    112.         },
    113.         "item": {
    114.           "fontColor": "black"
    115.         },
    116.         "itemsoverlap": false,
    117.         "label": {
    118.           "visible": true
    119.         },
    120.         "visible": false
    121.       },
    122.       "scaleY2": {
    123.         "lineColor": "black",
    124.         "lineWidth": "1px",
    125.         "tick": {
    126.           "lineColor": "black",
    127.           "lineWidth": "1px"
    128.         },
    129.         "guide": {
    130.           "lineColor": "#626262",
    131.           "alpha": 0.7,
    132.           "lineStyle": "dashed",
    133.           "visible": false
    134.         },
    135.         "item": {
    136.           "fontColor": "black"
    137.         },
    138.         "itemsoverlap": false,
    139.         "label": {
    140.           "visible": false
    141.         },
    142.         "visible": false
    143.       },
    144.       "tooltip": {
    145.         "visible": true,
    146.         "text": "%t, %v, %kt"
    147.       },
    148.       "plot": {
    149.         "lineWidth": "2px",
    150.         "aspect": "segmented",
    151.         "marker": {
    152.           "visible": true
    153.         },
    154.         "size": "90%",
    155.         "selectedState": {
    156.           "alpha": 10,
    157.           "lineWidth": 10
    158.         },
    159.         valueBox: {
    160.           overlap: false
    161.         }
    162.       },
    163.       "series": [{
    164.           "text": "A Series",
    165.           "values": [
    166.             0,
    167.             0,
    168.             0,
    169.             0,
    170.             0,
    171.             0,
    172.             27,
    173.             29
    174.           ],
    175.           "type": "line",
    176.           "legendItem": {
    177.             "cursor": "pointer"
    178.           },
    179.           "lineStyle": "dashed",
    180.           "alpha": 0.8,
    181.           "valueBox": {
    182.             "text": "%v",
    183.             "_overlap": false,
    184.             "placement": "top",
    185.             "fontColor": "none",
    186.             "fontSize": 10
    187.           },
    188.           "jsRule": "getSeriesColor()",
    189.           "backgroundColor": "#80B1D3",
    190.           "lineColor": "#80B1D3",
    191.           "marker": {
    192.             "backgroundColor": "#80B1D3"
    193.           }
    194.         },
    195.         {
    196.           "text": "B Series",
    197.           "values": [
    198.             6,
    199.             7,
    200.             7,
    201.             8,
    202.             10,
    203.             9,
    204.             7,
    205.             7
    206.           ],
    207.           "type": "line",
    208.           "legendItem": {
    209.             "cursor": "pointer"
    210.           },
    211.           "lineStyle": "dashed",
    212.           "alpha": 0.8,
    213.           "valueBox": {
    214.             "text": "%v",
    215.             "_overlap": false,
    216.             "placement": "top",
    217.             "fontColor": "none",
    218.             "fontSize": 10
    219.           },
    220.           "jsRule": "getSeriesColor()",
    221.           "backgroundColor": "#FDB462",
    222.           "lineColor": "#FDB462",
    223.           "marker": {
    224.             "backgroundColor": "#FDB462"
    225.           }
    226.         },
    227.         {
    228.           "text": "C Series",
    229.           "values": [
    230.             87,
    231.             86,
    232.             85,
    233.             84,
    234.             80,
    235.             82,
    236.             83,
    237.             85
    238.           ],
    239.           "type": "line",
    240.           "legendItem": {
    241.             "cursor": "pointer"
    242.           },
    243.           "lineStyle": "dashed",
    244.           "alpha": 0.8,
    245.           "valueBox": {
    246.             "text": "%v",
    247.             "_overlap": false,
    248.             "placement": "top",
    249.             "fontColor": "none",
    250.             "fontSize": 10
    251.           },
    252.           "jsRule": "getSeriesColor()",
    253.           "marker": {
    254.             "backgroundColor": "#006600"
    255.           },
    256.           "backgroundColor": "#B3DE69",
    257.           "lineColor": "#006600"
    258.         },
    259.         {
    260.           "text": "D Series",
    261.           "values": [
    262.             98,
    263.             95,
    264.             95,
    265.             95,
    266.             89,
    267.             93,
    268.             92,
    269.             91
    270.           ],
    271.           "type": "line",
    272.           "legendItem": {
    273.             "cursor": "pointer"
    274.           },
    275.           "lineStyle": "solid",
    276.           "alpha": 0.8,
    277.           "valueBox": {
    278.             "text": "%v",
    279.             "_overlap": false,
    280.             "placement": "top",
    281.             "fontColor": "none",
    282.             "fontSize": 10
    283.           },
    284.           "jsRule": "getSeriesColor()",
    285.           "marker": {
    286.             "backgroundColor": "#f50808"
    287.           },
    288.           "backgroundColor": "#FFED6F",
    289.           "lineColor": "#f50808"
    290.         }
    291.       ],
    292.       "legend": {
    293.         "padding": "1%",
    294.         "align": "right",
    295.         "verticalAlign": "middle",
    296.         "toggleAction": "remove",
    297.         "maxItems": 5,
    298.         "overflow": "scroll",
    299.         "adjustLayout": true,
    300.         "visible": true,
    301.         "layout": "v"
    302.       },
    303.       "crosshairX": {
    304.         "visible": false
    305.       },
    306.       "crosshairY": {
    307.         "visible": false
    308.       },
    309.       "plotarea": {
    310.         "adjustLayout": true,
    311.         "marginLeft": "5%",
    312.         "marginBottom": "dynamic",
    313.         "marginRight": "dynamic",
    314.         "marginTop": "dynamic"
    315.       },
    316.       "type": "line"
    317.     };
    318.  
    319.     zingchart.render({
    320.       id: 'myChart',
    321.       data: myConfig,
    322.       height: '100%',
    323.       width: '100%'
    324.     });
    325.   </script>
    326. </body>
    327.  
    328. </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. 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 myConfig = {
    2.   "gui": {
    3.     "contextMenu": {
    4.       "button": {
    5.         "visible": 0
    6.       },
    7.       "visible": false
    8.     },
    9.     "behaviors": [{
    10.         "id": "GuideShow",
    11.         "enabled": "none"
    12.       },
    13.       {
    14.         "id": "GuideHide",
    15.         "enabled": "none"
    16.       },
    17.       {
    18.         "id": "About",
    19.         "enabled": "none"
    20.       },
    21.       {
    22.         "id": "ViewSource",
    23.         "enabled": "none"
    24.       },
    25.       {
    26.         "id": "Reload",
    27.         "enabled": "none"
    28.       }
    29.     ]
    30.   },
    31.   "scaleX": {
    32.     "visible": true,
    33.     "label": {
    34.       "text": "",
    35.       "visible": true
    36.     },
    37.     "zooming": false,
    38.     "values": [
    39.       "JAS 2014",
    40.       "OND 2014",
    41.       "JFM 2014",
    42.       "AMJ 2015",
    43.       "JAS 2015",
    44.       "OND 2015",
    45.       "JAS 2016",
    46.       "JFM 2017"
    47.     ],
    48.     "lineColor": "black",
    49.     "lineWidth": "1px",
    50.     "tick": {
    51.       "lineColor": "black",
    52.       "lineWidth": "1px"
    53.     },
    54.     "item": {
    55.       "fontColor": "black",
    56.       "angle": 0,
    57.       "flat": false,
    58.       "visible": true,
    59.       "fontSize": 10
    60.     },
    61.     "itemsoverlap": false,
    62.     "guide": {
    63.       "visible": false,
    64.       "alpha": 0.7
    65.     }
    66.   },
    67.   "scaleY": {
    68.     "lineColor": "black",
    69.     "lineWidth": "1px",
    70.     "tick": {
    71.       "lineColor": "black",
    72.       "lineWidth": "1px"
    73.     },
    74.     "guide": {
    75.       "lineColor": "#626262",
    76.       "alpha": 0.5,
    77.       "lineStyle": "dashed",
    78.       "visible": false
    79.     },
    80.     "item": {
    81.       "fontColor": "black"
    82.     },
    83.     "itemsoverlap": false,
    84.     "label": {
    85.       "visible": true
    86.     },
    87.     "visible": false
    88.   },
    89.   "scaleY2": {
    90.     "lineColor": "black",
    91.     "lineWidth": "1px",
    92.     "tick": {
    93.       "lineColor": "black",
    94.       "lineWidth": "1px"
    95.     },
    96.     "guide": {
    97.       "lineColor": "#626262",
    98.       "alpha": 0.7,
    99.       "lineStyle": "dashed",
    100.       "visible": false
    101.     },
    102.     "item": {
    103.       "fontColor": "black"
    104.     },
    105.     "itemsoverlap": false,
    106.     "label": {
    107.       "visible": false
    108.     },
    109.     "visible": false
    110.   },
    111.   "tooltip": {
    112.     "visible": true,
    113.     "text": "%t, %v, %kt"
    114.   },
    115.   "plot": {
    116.     "lineWidth": "2px",
    117.     "aspect": "segmented",
    118.     "marker": {
    119.       "visible": true
    120.     },
    121.     "size": "90%",
    122.     "selectedState": {
    123.       "alpha": 10,
    124.       "lineWidth": 10
    125.     },
    126.     valueBox: {
    127.       overlap: false
    128.     }
    129.   },
    130.   "series": [{
    131.       "text": "A Series",
    132.       "values": [
    133.         0,
    134.         0,
    135.         0,
    136.         0,
    137.         0,
    138.         0,
    139.         27,
    140.         29
    141.       ],
    142.       "type": "line",
    143.       "legendItem": {
    144.         "cursor": "pointer"
    145.       },
    146.       "lineStyle": "dashed",
    147.       "alpha": 0.8,
    148.       "valueBox": {
    149.         "text": "%v",
    150.         "_overlap": false,
    151.         "placement": "top",
    152.         "fontColor": "none",
    153.         "fontSize": 10
    154.       },
    155.       "jsRule": "getSeriesColor()",
    156.       "backgroundColor": "#80B1D3",
    157.       "lineColor": "#80B1D3",
    158.       "marker": {
    159.         "backgroundColor": "#80B1D3"
    160.       }
    161.     },
    162.     {
    163.       "text": "B Series",
    164.       "values": [
    165.         6,
    166.         7,
    167.         7,
    168.         8,
    169.         10,
    170.         9,
    171.         7,
    172.         7
    173.       ],
    174.       "type": "line",
    175.       "legendItem": {
    176.         "cursor": "pointer"
    177.       },
    178.       "lineStyle": "dashed",
    179.       "alpha": 0.8,
    180.       "valueBox": {
    181.         "text": "%v",
    182.         "_overlap": false,
    183.         "placement": "top",
    184.         "fontColor": "none",
    185.         "fontSize": 10
    186.       },
    187.       "jsRule": "getSeriesColor()",
    188.       "backgroundColor": "#FDB462",
    189.       "lineColor": "#FDB462",
    190.       "marker": {
    191.         "backgroundColor": "#FDB462"
    192.       }
    193.     },
    194.     {
    195.       "text": "C Series",
    196.       "values": [
    197.         87,
    198.         86,
    199.         85,
    200.         84,
    201.         80,
    202.         82,
    203.         83,
    204.         85
    205.       ],
    206.       "type": "line",
    207.       "legendItem": {
    208.         "cursor": "pointer"
    209.       },
    210.       "lineStyle": "dashed",
    211.       "alpha": 0.8,
    212.       "valueBox": {
    213.         "text": "%v",
    214.         "_overlap": false,
    215.         "placement": "top",
    216.         "fontColor": "none",
    217.         "fontSize": 10
    218.       },
    219.       "jsRule": "getSeriesColor()",
    220.       "marker": {
    221.         "backgroundColor": "#006600"
    222.       },
    223.       "backgroundColor": "#B3DE69",
    224.       "lineColor": "#006600"
    225.     },
    226.     {
    227.       "text": "D Series",
    228.       "values": [
    229.         98,
    230.         95,
    231.         95,
    232.         95,
    233.         89,
    234.         93,
    235.         92,
    236.         91
    237.       ],
    238.       "type": "line",
    239.       "legendItem": {
    240.         "cursor": "pointer"
    241.       },
    242.       "lineStyle": "solid",
    243.       "alpha": 0.8,
    244.       "valueBox": {
    245.         "text": "%v",
    246.         "_overlap": false,
    247.         "placement": "top",
    248.         "fontColor": "none",
    249.         "fontSize": 10
    250.       },
    251.       "jsRule": "getSeriesColor()",
    252.       "marker": {
    253.         "backgroundColor": "#f50808"
    254.       },
    255.       "backgroundColor": "#FFED6F",
    256.       "lineColor": "#f50808"
    257.     }
    258.   ],
    259.   "legend": {
    260.     "padding": "1%",
    261.     "align": "right",
    262.     "verticalAlign": "middle",
    263.     "toggleAction": "remove",
    264.     "maxItems": 5,
    265.     "overflow": "scroll",
    266.     "adjustLayout": true,
    267.     "visible": true,
    268.     "layout": "v"
    269.   },
    270.   "crosshairX": {
    271.     "visible": false
    272.   },
    273.   "crosshairY": {
    274.     "visible": false
    275.   },
    276.   "plotarea": {
    277.     "adjustLayout": true,
    278.     "marginLeft": "5%",
    279.     "marginBottom": "dynamic",
    280.     "marginRight": "dynamic",
    281.     "marginTop": "dynamic"
    282.   },
    283.   "type": "line"
    284. };
    285.  
    286. zingchart.render({
    287.   id: 'myChart',
    288.   data: myConfig,
    289.   height: '100%',
    290.   width: '100%'
    291. });