• 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"></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var myChart = {
    35.       "type": "mixed",
    36.       "legend": {
    37.         "alpha": 0,
    38.         "width": 168,
    39.         "margin-right": "0",
    40.         "margin-top": "45",
    41.         "max-items": 8,
    42.         "overflow": "page",
    43.         "layout": "x1",
    44.         "toggle-action": "remove"
    45.       },
    46.       "plot": {
    47.         "bar-width": "75%",
    48.         "joined": true
    49.       },
    50.       "plotarea": {
    51.         "margin-right": "216",
    52.         "margin-top": "50"
    53.       },
    54.       "scale-x": {
    55.         "visible": true,
    56.         "item": {
    57.           "visible": true,
    58.           "font-angle": 0
    59.         },
    60.         "progression": "linear"
    61.       },
    62.       "scale-y": {
    63.         "visible": true,
    64.         "decimals": 0,
    65.         "decimals-separator": ".",
    66.         "thousands-separator": ",",
    67.         "format": "$%v",
    68.         "label": {
    69.           "text": "Cost",
    70.           "text-decoration": "none",
    71.           "text-align": "center"
    72.         },
    73.         "progression": "linear"
    74.       },
    75.       "scale-y-2": {
    76.         "visible": true,
    77.         "decimals": 2,
    78.         "decimals-separator": ".",
    79.         "thousands-separator": ",",
    80.         "format": "%v%",
    81.         "max-value": 85.71295951029543,
    82.         "min-value": 85.0838100215073,
    83.         "progression": "linear"
    84.       },
    85.       "series": [{
    86.           "values": [
    87.             ["Jan-2017", 7374886680.469998]
    88.           ],
    89.           "text": "ROP Value (A)",
    90.           "joined": true,
    91.           "tooltip": {
    92.             "text": "%t\n$%v\n%kl",
    93.             "text-decoration": "none",
    94.             "decimals": "0",
    95.             "thousands-separator": ",",
    96.             "decimals-separator": ".",
    97.             "visible": true
    98.           },
    99.           "type": "bar",
    100.           "legend-item": {
    101.             "width": 143,
    102.             "text": "ROP Value (A)",
    103.             "text-decoration": "none",
    104.             "wrap-text": true
    105.           }
    106.         },
    107.         {
    108.           "values": [
    109.             ["Jan-2017", 85.71295951029543]
    110.           ],
    111.           "text": "Customer Fill Rate (A)",
    112.           "joined": true,
    113.           "tooltip": {
    114.             "text": "%v% @ %kl\n%t",
    115.             "text-decoration": "none",
    116.             "decimals": "2",
    117.             "thousands-separator": ",",
    118.             "decimals-separator": ".",
    119.             "visible": true
    120.           },
    121.           "type": "line",
    122.           "scales": "scale-x,scale-y-2",
    123.           "legend-item": {
    124.             "width": 143,
    125.             "text": "Customer Fill Rate (A)",
    126.             "text-decoration": "none",
    127.             "wrap-text": true
    128.           },
    129.           "visible": false
    130.         },
    131.         {
    132.           "values": [
    133.             ["Jan-2017", 85.0838100215073]
    134.           ],
    135.           "text": "Total Fill Rate (A)",
    136.           "joined": true,
    137.           "tooltip": {
    138.             "text": "%v% @ %kl\n%t",
    139.             "text-decoration": "none",
    140.             "decimals": "2",
    141.             "thousands-separator": ",",
    142.             "decimals-separator": ".",
    143.             "visible": true
    144.           },
    145.           "type": "line",
    146.           "scales": "scale-x,scale-y-2",
    147.           "legend-item": {
    148.             "width": 143,
    149.             "text": "Total Fill Rate (A)",
    150.             "text-decoration": "none",
    151.             "wrap-text": true
    152.           }
    153.         }
    154.       ],
    155.       "title": {
    156.         "text": "ROP Vs Fill Rate",
    157.         "text-decoration": "none",
    158.         "text-align": "center"
    159.       },
    160.       "stacked": false,
    161.       "gui": {
    162.         "behaviors": [{
    163.           "id": "FullScreen",
    164.           "enabled": "all"
    165.         }],
    166.         "inherit": "all"
    167.       }
    168.     };
    169.     zingchart.render({
    170.       id: "myChart",
    171.       data: myChart,
    172.     });
    173.   </script>
    174. </body>
    175.  
    176. </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.   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 myChart = {
    2.   "type": "mixed",
    3.   "legend": {
    4.     "alpha": 0,
    5.     "width": 168,
    6.     "margin-right": "0",
    7.     "margin-top": "45",
    8.     "max-items": 8,
    9.     "overflow": "page",
    10.     "layout": "x1",
    11.     "toggle-action": "remove"
    12.   },
    13.   "plot": {
    14.     "bar-width": "75%",
    15.     "joined": true
    16.   },
    17.   "plotarea": {
    18.     "margin-right": "216",
    19.     "margin-top": "50"
    20.   },
    21.   "scale-x": {
    22.     "visible": true,
    23.     "item": {
    24.       "visible": true,
    25.       "font-angle": 0
    26.     },
    27.     "progression": "linear"
    28.   },
    29.   "scale-y": {
    30.     "visible": true,
    31.     "decimals": 0,
    32.     "decimals-separator": ".",
    33.     "thousands-separator": ",",
    34.     "format": "$%v",
    35.     "label": {
    36.       "text": "Cost",
    37.       "text-decoration": "none",
    38.       "text-align": "center"
    39.     },
    40.     "progression": "linear"
    41.   },
    42.   "scale-y-2": {
    43.     "visible": true,
    44.     "decimals": 2,
    45.     "decimals-separator": ".",
    46.     "thousands-separator": ",",
    47.     "format": "%v%",
    48.     "max-value": 85.71295951029543,
    49.     "min-value": 85.0838100215073,
    50.     "progression": "linear"
    51.   },
    52.   "series": [{
    53.       "values": [
    54.         ["Jan-2017", 7374886680.469998]
    55.       ],
    56.       "text": "ROP Value (A)",
    57.       "joined": true,
    58.       "tooltip": {
    59.         "text": "%t\n$%v\n%kl",
    60.         "text-decoration": "none",
    61.         "decimals": "0",
    62.         "thousands-separator": ",",
    63.         "decimals-separator": ".",
    64.         "visible": true
    65.       },
    66.       "type": "bar",
    67.       "legend-item": {
    68.         "width": 143,
    69.         "text": "ROP Value (A)",
    70.         "text-decoration": "none",
    71.         "wrap-text": true
    72.       }
    73.     },
    74.     {
    75.       "values": [
    76.         ["Jan-2017", 85.71295951029543]
    77.       ],
    78.       "text": "Customer Fill Rate (A)",
    79.       "joined": true,
    80.       "tooltip": {
    81.         "text": "%v% @ %kl\n%t",
    82.         "text-decoration": "none",
    83.         "decimals": "2",
    84.         "thousands-separator": ",",
    85.         "decimals-separator": ".",
    86.         "visible": true
    87.       },
    88.       "type": "line",
    89.       "scales": "scale-x,scale-y-2",
    90.       "legend-item": {
    91.         "width": 143,
    92.         "text": "Customer Fill Rate (A)",
    93.         "text-decoration": "none",
    94.         "wrap-text": true
    95.       },
    96.       "visible": false
    97.     },
    98.     {
    99.       "values": [
    100.         ["Jan-2017", 85.0838100215073]
    101.       ],
    102.       "text": "Total Fill Rate (A)",
    103.       "joined": true,
    104.       "tooltip": {
    105.         "text": "%v% @ %kl\n%t",
    106.         "text-decoration": "none",
    107.         "decimals": "2",
    108.         "thousands-separator": ",",
    109.         "decimals-separator": ".",
    110.         "visible": true
    111.       },
    112.       "type": "line",
    113.       "scales": "scale-x,scale-y-2",
    114.       "legend-item": {
    115.         "width": 143,
    116.         "text": "Total Fill Rate (A)",
    117.         "text-decoration": "none",
    118.         "wrap-text": true
    119.       }
    120.     }
    121.   ],
    122.   "title": {
    123.     "text": "ROP Vs Fill Rate",
    124.     "text-decoration": "none",
    125.     "text-align": "center"
    126.   },
    127.   "stacked": false,
    128.   "gui": {
    129.     "behaviors": [{
    130.       "id": "FullScreen",
    131.       "enabled": "all"
    132.     }],
    133.     "inherit": "all"
    134.   }
    135. };
    136. zingchart.render({
    137.   id: "myChart",
    138.   data: myChart,
    139. });