• 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></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id="myChart"></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     let chartConfig = {
    17.       "type": "bar",
    18.       "title": {
    19.         "text": "Y-Axis Scale"
    20.       },
    21.       "plot": {
    22.         "bar-width": "50%",
    23.         "stacked": true,
    24.         "tooltip": {
    25.           "text": "Raise %plot-text by %scale-value-value",
    26.           "transform": {
    27.             "type": "date",
    28.             "all": "%g:%i %A"
    29.           }
    30.         },
    31.       },
    32.       "scale-x": {
    33.         "labels": ["A's Goal", "B's Goal", "C's Goal"],
    34.         "label": {
    35.           "text": "12-Hour Fundraiser"
    36.         },
    37.         "item": {
    38.           "font-size": 10
    39.         },
    40.       },
    41.       "scale-y": {
    42.         "min-value": "1457091000000", //6 AM
    43.         "max-value": "1457132400000", //Midnight
    44.         "step": "3600000", //1 hour
    45.         "transform": {
    46.           "type": "date",
    47.           "all": "%g:%i %a"
    48.         },
    49.         "label": {
    50.           "text": "Time"
    51.         },
    52.         "item": {
    53.           "font-size": 10
    54.         },
    55.       },
    56.       "utc": true,
    57.       "timezone": -5, //EST time
    58.       "plotarea": {
    59.         "margin-left": "dynamic"
    60.       },
    61.       "series": [{
    62.           "values": [1457110800000, 1457107200000, 1457103600000],
    63.           "text": "300K"
    64.         },
    65.         {
    66.           "values": [7200000, 7200000, 12600000],
    67.           "text": "350K"
    68.         },
    69.         {
    70.           "values": [7200000, 7200000, 5400000],
    71.           "text": "400K"
    72.         },
    73.         {
    74.           "values": [3600000, 5400000, 3600000],
    75.           "text": "450K"
    76.         },
    77.         {
    78.           "values": [3600000, 5400000, 7200000],
    79.           "text": "500K"
    80.         }
    81.       ]
    82.     };
    83.  
    84.     zingchart.render({
    85.       id: 'myChart',
    86.       data: chartConfig,
    87.       height: 400,
    88.       width: '100%'
    89.     });
    90.   </script>
    91. </body>
    92.  
    93. </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.  
    1. let chartConfig = {
    2.   "type": "bar",
    3.   "title": {
    4.     "text": "Y-Axis Scale"
    5.   },
    6.   "plot": {
    7.     "bar-width": "50%",
    8.     "stacked": true,
    9.     "tooltip": {
    10.       "text": "Raise %plot-text by %scale-value-value",
    11.       "transform": {
    12.         "type": "date",
    13.         "all": "%g:%i %A"
    14.       }
    15.     },
    16.   },
    17.   "scale-x": {
    18.     "labels": ["A's Goal", "B's Goal", "C's Goal"],
    19.     "label": {
    20.       "text": "12-Hour Fundraiser"
    21.     },
    22.     "item": {
    23.       "font-size": 10
    24.     },
    25.   },
    26.   "scale-y": {
    27.     "min-value": "1457091000000", //6 AM
    28.     "max-value": "1457132400000", //Midnight
    29.     "step": "3600000", //1 hour
    30.     "transform": {
    31.       "type": "date",
    32.       "all": "%g:%i %a"
    33.     },
    34.     "label": {
    35.       "text": "Time"
    36.     },
    37.     "item": {
    38.       "font-size": 10
    39.     },
    40.   },
    41.   "utc": true,
    42.   "timezone": -5, //EST time
    43.   "plotarea": {
    44.     "margin-left": "dynamic"
    45.   },
    46.   "series": [{
    47.       "values": [1457110800000, 1457107200000, 1457103600000],
    48.       "text": "300K"
    49.     },
    50.     {
    51.       "values": [7200000, 7200000, 12600000],
    52.       "text": "350K"
    53.     },
    54.     {
    55.       "values": [7200000, 7200000, 5400000],
    56.       "text": "400K"
    57.     },
    58.     {
    59.       "values": [3600000, 5400000, 3600000],
    60.       "text": "450K"
    61.     },
    62.     {
    63.       "values": [3600000, 5400000, 7200000],
    64.       "text": "500K"
    65.     }
    66.   ]
    67. };
    68.  
    69. zingchart.render({
    70.   id: 'myChart',
    71.   data: chartConfig,
    72.   height: 400,
    73.   width: '100%'
    74. });