• 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.       "backgroundColor": "none",
    36.       "alpha": 1,
    37.       "gui": {
    38.         "contextMenu": {
    39.           "button": {
    40.             "visible": 0
    41.           },
    42.           "visible": false
    43.         },
    44.         "behaviors": [{
    45.             "id": "GuideShow",
    46.             "enabled": "none"
    47.           },
    48.           {
    49.             "id": "GuideHide",
    50.             "enabled": "none"
    51.           },
    52.           {
    53.             "id": "About",
    54.             "enabled": "none"
    55.           },
    56.           {
    57.             "id": "ViewSource",
    58.             "enabled": "none"
    59.           },
    60.           {
    61.             "id": "Reload",
    62.             "enabled": "none"
    63.           }
    64.         ]
    65.       },
    66.       "globals": {
    67.         "fontFamily": "Muli",
    68.         "fontSize": 10,
    69.         "fontColor": ""
    70.       },
    71.       "plotarea": {
    72.         "backgroundColor": "transparent",
    73.         "alpha": 1,
    74.         "marginTop": "dynamic",
    75.         "marginBottom": "dynamic"
    76.       },
    77.       "tooltip": {
    78.         "visible": true,
    79.         "text": "%t, %v, %kt"
    80.       },
    81.       "title": {
    82.         "visible": false,
    83.         "shadow": false,
    84.         "adjustLayout": true,
    85.         "alpha": 1,
    86.         "textAlign": "center",
    87.         "backgroundColor": "",
    88.         "text": "Chart Title",
    89.         "textDecoration": "none",
    90.         "fontStyle": "none",
    91.         "fontSize": 12,
    92.         "fontWeight": "none",
    93.         "label": {
    94.           "flat": false,
    95.           "cursor": "pointer"
    96.         },
    97.         "flat": false
    98.       },
    99.       "plot": {
    100.         "lineWidth": "2px",
    101.         "aspect": "",
    102.         "stacked": false,
    103.         "stackType": "normal",
    104.         "marker": {
    105.           "visible": true
    106.         },
    107.         "size": "100%",
    108.         "valueBox": {
    109.           "text": "%v",
    110.           "overlap": false,
    111.           "fontColor": "#000000",
    112.           "fontSize": 10,
    113.           "placement": "auto"
    114.         },
    115.         "selectionMode": "plot",
    116.         "selectedState": {},
    117.         "animation": {
    118.           "delay": 0,
    119.           "effect": "ANIMATION_EXPAND_BOTTOM",
    120.           "speed": 20,
    121.           "method": "ANIMATION_LINEAR",
    122.           "sequence": "ANIMATION_BACK_EASE_OUT"
    123.         },
    124.         "selectedMarker": {
    125.           "borderColor": "black",
    126.           "alpha": 10,
    127.           "borderWidth": 2
    128.         }
    129.       },
    130.       "series": [{
    131.         "text": "001",
    132.         "values": [
    133.           [
    134.             2.06,
    135.             8.91,
    136.             3.54
    137.           ],
    138.           [
    139.             3.29,
    140.             7.92,
    141.             4.3
    142.           ],
    143.           [
    144.             13.99,
    145.             15.84,
    146.             11.65
    147.           ],
    148.           [
    149.             6.58,
    150.             9.9,
    151.             11.14
    152.           ],
    153.           [
    154.             8.64,
    155.             4.95,
    156.             10.13
    157.           ],
    158.           [
    159.             13.17,
    160.             0,
    161.             14.18
    162.           ],
    163.           [
    164.             12.35,
    165.             0,
    166.             10.63
    167.           ],
    168.           [
    169.             9.05,
    170.             0,
    171.             7.09
    172.           ]
    173.         ],
    174.         "minSize": null,
    175.         "alpha": 1,
    176.         "legendItem": {
    177.           "cursor": "pointer"
    178.         },
    179.         "backgroundColor": "#42b3d5",
    180.         "lineColor": "#42b3d5",
    181.         "marker": {
    182.           "backgroundColor": "#42b3d5",
    183.           "type": "pie",
    184.           "size": 4
    185.         },
    186.         "lineWidth": 2,
    187.         "barWidth": -1,
    188.         "sizeFactor": null,
    189.         "maxSize": null,
    190.         "reference": "chart-max",
    191.         "minRatio": "0.2",
    192.         "maxRatio": "1",
    193.         "lineStyle": "solid",
    194.         "borderRadius": 0,
    195.         "borderColor": "#000000",
    196.         "borderWidth": 0,
    197.         "valueBox": {
    198.           "jsRule": "window.rc-chart-3384.getLabelRules()"
    199.         },
    200.         "jsRule": "window.rc-chart-3384.getSeriesColor()",
    201.         "scales": "scale-x,scale-y"
    202.       }],
    203.       "legend": {
    204.         "alpha": 1,
    205.         "item": {
    206.           "fontWeight": "normal",
    207.           "fontStyle": "none",
    208.           "fontSize": 10,
    209.           "fontColor": "#000000"
    210.         },
    211.         "backgroundColor": "",
    212.         "borderColor": "#000000",
    213.         "borderWidth": 0,
    214.         "visible": true,
    215.         "toggleAction": "remove",
    216.         "maxItems": null,
    217.         "highlightPlot": true,
    218.         "overflow": "none",
    219.         "adjustLayout": true,
    220.         "align": "center",
    221.         "verticalAlign": "bottom",
    222.         "padding": "1%",
    223.         "layout": "float"
    224.       },
    225.       "scaleX": {
    226.         "visible": true,
    227.         "minorGuide": {
    228.           "alpha": 0.2,
    229.           "lineColor": "#000000",
    230.           "lineStyle": "solid"
    231.         },
    232.         "label": {
    233.           "text": "Axis Title",
    234.           "cursor": "pointer",
    235.           "flat": false,
    236.           "visible": false,
    237.           "fontSize": 10,
    238.           "textDecoration": "none",
    239.           "fontWeight": "normal",
    240.           "fontStyle": "none",
    241.           "fontColor": "#000000"
    242.         },
    243.         "minValue": null,
    244.         "maxValue": null,
    245.         "step": null,
    246.         "maxTicks": 0,
    247.         "minorTicks": 0,
    248.         "minorTick": {},
    249.         "zooming": false,
    250.         "values": [],
    251.         "lineColor": "#000000",
    252.         "lineWidth": 1,
    253.         "tick": {
    254.           "lineColor": "#000000",
    255.           "lineWidth": 1,
    256.           "visible": true
    257.         },
    258.         "item": {
    259.           "fontWeight": "normal",
    260.           "angle": "0",
    261.           "textDecoration": "none",
    262.           "fontSize": 10,
    263.           "italic": false,
    264.           "flat": false,
    265.           "cursor": "pointer",
    266.           "visible": true,
    267.           "textAlign": "right",
    268.           "fontColor": "#000000"
    269.         },
    270.         "itemsoverlap": false,
    271.         "guide": {
    272.           "visible": true,
    273.           "alpha": 0.2,
    274.           "lineColor": "#000000",
    275.           "lineStyle": "dashed"
    276.         },
    277.         "flat": false,
    278.         "format": "%v"
    279.       },
    280.       "scaleY": {
    281.         "visible": true,
    282.         "minorGuide": {
    283.           "alpha": 0.2,
    284.           "lineColor": "#000000",
    285.           "lineStyle": "solid"
    286.         },
    287.         "label": {
    288.           "text": "Axis Title",
    289.           "cursor": "pointer",
    290.           "flat": false,
    291.           "visible": false,
    292.           "fontSize": 10,
    293.           "textDecoration": "none",
    294.           "fontWeight": "normal",
    295.           "fontStyle": "none",
    296.           "fontColor": "#000000"
    297.         },
    298.         "maxTicks": 5,
    299.         "minorTicks": 0,
    300.         "minorTick": {},
    301.         "zooming": false,
    302.         "lineColor": "#000000",
    303.         "lineWidth": 1,
    304.         "tick": {
    305.           "lineColor": "#000000",
    306.           "lineWidth": 1,
    307.           "visible": true
    308.         },
    309.         "item": {
    310.           "fontWeight": "normal",
    311.           "angle": "0",
    312.           "textDecoration": "none",
    313.           "fontSize": 10,
    314.           "italic": false,
    315.           "flat": false,
    316.           "cursor": "pointer",
    317.           "visible": true,
    318.           "fontColor": "#000000"
    319.         },
    320.         "itemsoverlap": false,
    321.         "guide": {
    322.           "visible": true,
    323.           "alpha": 0.5,
    324.           "lineColor": "#000000",
    325.           "lineStyle": "dashed"
    326.         },
    327.         "flat": false,
    328.         "format": "%v"
    329.       },
    330.       "scaleY2": {
    331.         "visible": true,
    332.         "minorGuide": {
    333.           "alpha": 0.2,
    334.           "lineColor": "#000000",
    335.           "lineStyle": "solid"
    336.         },
    337.         "label": {
    338.           "text": "Axis Title",
    339.           "cursor": "pointer",
    340.           "flat": false,
    341.           "visible": false,
    342.           "fontSize": 10,
    343.           "textDecoration": "none",
    344.           "fontWeight": "normal",
    345.           "fontStyle": "none"
    346.         },
    347.         "maxTicks": 0,
    348.         "minorTicks": 0,
    349.         "minorTick": {},
    350.         "zooming": false,
    351.         "lineColor": "",
    352.         "lineWidth": 1,
    353.         "tick": {
    354.           "lineColor": "",
    355.           "lineWidth": 1,
    356.           "visible": true
    357.         },
    358.         "item": {
    359.           "fontWeight": "normal",
    360.           "angle": "0",
    361.           "textDecoration": "none",
    362.           "fontSize": 10,
    363.           "italic": false,
    364.           "flat": false,
    365.           "cursor": "pointer",
    366.           "visible": false
    367.         },
    368.         "itemsoverlap": false,
    369.         "guide": {
    370.           "visible": false,
    371.           "alpha": 0.2,
    372.           "lineColor": "",
    373.           "lineStyle": "dashed"
    374.         },
    375.         "flat": false,
    376.         "format": "%v"
    377.       },
    378.       "crosshairX": {
    379.         "visible": true,
    380.         "plotLabel": {
    381.           "visible": false
    382.         },
    383.         "scaleLabel": {
    384.           "backgroundColor": "#000",
    385.           "fontColor": "#fff"
    386.         }
    387.       },
    388.       "crosshairY": {
    389.         "visible": true,
    390.         "plotLabel": {
    391.           "visible": false
    392.         },
    393.         "scaleLabel": {
    394.           "backgroundColor": "#000",
    395.           "fontColor": "#fff"
    396.         }
    397.       },
    398.       "type": "scatter"
    399.     };
    400.  
    401.     zingchart.render({
    402.       id: 'myChart',
    403.       data: myConfig,
    404.       height: "100%",
    405.       width: "100%"
    406.     });
    407.   </script>
    408. </body>
    409.  
    410. </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.   "backgroundColor": "none",
    3.   "alpha": 1,
    4.   "gui": {
    5.     "contextMenu": {
    6.       "button": {
    7.         "visible": 0
    8.       },
    9.       "visible": false
    10.     },
    11.     "behaviors": [{
    12.         "id": "GuideShow",
    13.         "enabled": "none"
    14.       },
    15.       {
    16.         "id": "GuideHide",
    17.         "enabled": "none"
    18.       },
    19.       {
    20.         "id": "About",
    21.         "enabled": "none"
    22.       },
    23.       {
    24.         "id": "ViewSource",
    25.         "enabled": "none"
    26.       },
    27.       {
    28.         "id": "Reload",
    29.         "enabled": "none"
    30.       }
    31.     ]
    32.   },
    33.   "globals": {
    34.     "fontFamily": "Muli",
    35.     "fontSize": 10,
    36.     "fontColor": ""
    37.   },
    38.   "plotarea": {
    39.     "backgroundColor": "transparent",
    40.     "alpha": 1,
    41.     "marginTop": "dynamic",
    42.     "marginBottom": "dynamic"
    43.   },
    44.   "tooltip": {
    45.     "visible": true,
    46.     "text": "%t, %v, %kt"
    47.   },
    48.   "title": {
    49.     "visible": false,
    50.     "shadow": false,
    51.     "adjustLayout": true,
    52.     "alpha": 1,
    53.     "textAlign": "center",
    54.     "backgroundColor": "",
    55.     "text": "Chart Title",
    56.     "textDecoration": "none",
    57.     "fontStyle": "none",
    58.     "fontSize": 12,
    59.     "fontWeight": "none",
    60.     "label": {
    61.       "flat": false,
    62.       "cursor": "pointer"
    63.     },
    64.     "flat": false
    65.   },
    66.   "plot": {
    67.     "lineWidth": "2px",
    68.     "aspect": "",
    69.     "stacked": false,
    70.     "stackType": "normal",
    71.     "marker": {
    72.       "visible": true
    73.     },
    74.     "size": "100%",
    75.     "valueBox": {
    76.       "text": "%v",
    77.       "overlap": false,
    78.       "fontColor": "#000000",
    79.       "fontSize": 10,
    80.       "placement": "auto"
    81.     },
    82.     "selectionMode": "plot",
    83.     "selectedState": {},
    84.     "animation": {
    85.       "delay": 0,
    86.       "effect": "ANIMATION_EXPAND_BOTTOM",
    87.       "speed": 20,
    88.       "method": "ANIMATION_LINEAR",
    89.       "sequence": "ANIMATION_BACK_EASE_OUT"
    90.     },
    91.     "selectedMarker": {
    92.       "borderColor": "black",
    93.       "alpha": 10,
    94.       "borderWidth": 2
    95.     }
    96.   },
    97.   "series": [{
    98.     "text": "001",
    99.     "values": [
    100.       [
    101.         2.06,
    102.         8.91,
    103.         3.54
    104.       ],
    105.       [
    106.         3.29,
    107.         7.92,
    108.         4.3
    109.       ],
    110.       [
    111.         13.99,
    112.         15.84,
    113.         11.65
    114.       ],
    115.       [
    116.         6.58,
    117.         9.9,
    118.         11.14
    119.       ],
    120.       [
    121.         8.64,
    122.         4.95,
    123.         10.13
    124.       ],
    125.       [
    126.         13.17,
    127.         0,
    128.         14.18
    129.       ],
    130.       [
    131.         12.35,
    132.         0,
    133.         10.63
    134.       ],
    135.       [
    136.         9.05,
    137.         0,
    138.         7.09
    139.       ]
    140.     ],
    141.     "minSize": null,
    142.     "alpha": 1,
    143.     "legendItem": {
    144.       "cursor": "pointer"
    145.     },
    146.     "backgroundColor": "#42b3d5",
    147.     "lineColor": "#42b3d5",
    148.     "marker": {
    149.       "backgroundColor": "#42b3d5",
    150.       "type": "pie",
    151.       "size": 4
    152.     },
    153.     "lineWidth": 2,
    154.     "barWidth": -1,
    155.     "sizeFactor": null,
    156.     "maxSize": null,
    157.     "reference": "chart-max",
    158.     "minRatio": "0.2",
    159.     "maxRatio": "1",
    160.     "lineStyle": "solid",
    161.     "borderRadius": 0,
    162.     "borderColor": "#000000",
    163.     "borderWidth": 0,
    164.     "valueBox": {
    165.       "jsRule": "window.rc-chart-3384.getLabelRules()"
    166.     },
    167.     "jsRule": "window.rc-chart-3384.getSeriesColor()",
    168.     "scales": "scale-x,scale-y"
    169.   }],
    170.   "legend": {
    171.     "alpha": 1,
    172.     "item": {
    173.       "fontWeight": "normal",
    174.       "fontStyle": "none",
    175.       "fontSize": 10,
    176.       "fontColor": "#000000"
    177.     },
    178.     "backgroundColor": "",
    179.     "borderColor": "#000000",
    180.     "borderWidth": 0,
    181.     "visible": true,
    182.     "toggleAction": "remove",
    183.     "maxItems": null,
    184.     "highlightPlot": true,
    185.     "overflow": "none",
    186.     "adjustLayout": true,
    187.     "align": "center",
    188.     "verticalAlign": "bottom",
    189.     "padding": "1%",
    190.     "layout": "float"
    191.   },
    192.   "scaleX": {
    193.     "visible": true,
    194.     "minorGuide": {
    195.       "alpha": 0.2,
    196.       "lineColor": "#000000",
    197.       "lineStyle": "solid"
    198.     },
    199.     "label": {
    200.       "text": "Axis Title",
    201.       "cursor": "pointer",
    202.       "flat": false,
    203.       "visible": false,
    204.       "fontSize": 10,
    205.       "textDecoration": "none",
    206.       "fontWeight": "normal",
    207.       "fontStyle": "none",
    208.       "fontColor": "#000000"
    209.     },
    210.     "minValue": null,
    211.     "maxValue": null,
    212.     "step": null,
    213.     "maxTicks": 0,
    214.     "minorTicks": 0,
    215.     "minorTick": {},
    216.     "zooming": false,
    217.     "values": [],
    218.     "lineColor": "#000000",
    219.     "lineWidth": 1,
    220.     "tick": {
    221.       "lineColor": "#000000",
    222.       "lineWidth": 1,
    223.       "visible": true
    224.     },
    225.     "item": {
    226.       "fontWeight": "normal",
    227.       "angle": "0",
    228.       "textDecoration": "none",
    229.       "fontSize": 10,
    230.       "italic": false,
    231.       "flat": false,
    232.       "cursor": "pointer",
    233.       "visible": true,
    234.       "textAlign": "right",
    235.       "fontColor": "#000000"
    236.     },
    237.     "itemsoverlap": false,
    238.     "guide": {
    239.       "visible": true,
    240.       "alpha": 0.2,
    241.       "lineColor": "#000000",
    242.       "lineStyle": "dashed"
    243.     },
    244.     "flat": false,
    245.     "format": "%v"
    246.   },
    247.   "scaleY": {
    248.     "visible": true,
    249.     "minorGuide": {
    250.       "alpha": 0.2,
    251.       "lineColor": "#000000",
    252.       "lineStyle": "solid"
    253.     },
    254.     "label": {
    255.       "text": "Axis Title",
    256.       "cursor": "pointer",
    257.       "flat": false,
    258.       "visible": false,
    259.       "fontSize": 10,
    260.       "textDecoration": "none",
    261.       "fontWeight": "normal",
    262.       "fontStyle": "none",
    263.       "fontColor": "#000000"
    264.     },
    265.     "maxTicks": 5,
    266.     "minorTicks": 0,
    267.     "minorTick": {},
    268.     "zooming": false,
    269.     "lineColor": "#000000",
    270.     "lineWidth": 1,
    271.     "tick": {
    272.       "lineColor": "#000000",
    273.       "lineWidth": 1,
    274.       "visible": true
    275.     },
    276.     "item": {
    277.       "fontWeight": "normal",
    278.       "angle": "0",
    279.       "textDecoration": "none",
    280.       "fontSize": 10,
    281.       "italic": false,
    282.       "flat": false,
    283.       "cursor": "pointer",
    284.       "visible": true,
    285.       "fontColor": "#000000"
    286.     },
    287.     "itemsoverlap": false,
    288.     "guide": {
    289.       "visible": true,
    290.       "alpha": 0.5,
    291.       "lineColor": "#000000",
    292.       "lineStyle": "dashed"
    293.     },
    294.     "flat": false,
    295.     "format": "%v"
    296.   },
    297.   "scaleY2": {
    298.     "visible": true,
    299.     "minorGuide": {
    300.       "alpha": 0.2,
    301.       "lineColor": "#000000",
    302.       "lineStyle": "solid"
    303.     },
    304.     "label": {
    305.       "text": "Axis Title",
    306.       "cursor": "pointer",
    307.       "flat": false,
    308.       "visible": false,
    309.       "fontSize": 10,
    310.       "textDecoration": "none",
    311.       "fontWeight": "normal",
    312.       "fontStyle": "none"
    313.     },
    314.     "maxTicks": 0,
    315.     "minorTicks": 0,
    316.     "minorTick": {},
    317.     "zooming": false,
    318.     "lineColor": "",
    319.     "lineWidth": 1,
    320.     "tick": {
    321.       "lineColor": "",
    322.       "lineWidth": 1,
    323.       "visible": true
    324.     },
    325.     "item": {
    326.       "fontWeight": "normal",
    327.       "angle": "0",
    328.       "textDecoration": "none",
    329.       "fontSize": 10,
    330.       "italic": false,
    331.       "flat": false,
    332.       "cursor": "pointer",
    333.       "visible": false
    334.     },
    335.     "itemsoverlap": false,
    336.     "guide": {
    337.       "visible": false,
    338.       "alpha": 0.2,
    339.       "lineColor": "",
    340.       "lineStyle": "dashed"
    341.     },
    342.     "flat": false,
    343.     "format": "%v"
    344.   },
    345.   "crosshairX": {
    346.     "visible": true,
    347.     "plotLabel": {
    348.       "visible": false
    349.     },
    350.     "scaleLabel": {
    351.       "backgroundColor": "#000",
    352.       "fontColor": "#fff"
    353.     }
    354.   },
    355.   "crosshairY": {
    356.     "visible": true,
    357.     "plotLabel": {
    358.       "visible": false
    359.     },
    360.     "scaleLabel": {
    361.       "backgroundColor": "#000",
    362.       "fontColor": "#fff"
    363.     }
    364.   },
    365.   "type": "scatter"
    366. };
    367.  
    368. zingchart.render({
    369.   id: 'myChart',
    370.   data: myConfig,
    371.   height: "100%",
    372.   width: "100%"
    373. });