• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .chart--container {
    10.       min-height: 350px;
    11.       width: 100%;
    12.       height: 100%;
    13.     }
    14.  
    15.     .zc-ref {
    16.       display: none;
    17.     }
    18.   </style>
    19. </head>
    20.  
    21. <body>
    22.   <div id="myChart" class="chart--container">
    23.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    24.   </div>
    25.   <script>
    26.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    27.     let chartConfig = {
    28.       type: 'bar',
    29.       backgroundColor: '#fff',
    30.       title: {
    31.         text: 'TOP 5 ACTIVE TWITTER MOMENTS',
    32.         backgroundColor: '#fff',
    33.         fontColor: '#000',
    34.         fontSize: '20px',
    35.         fontWeight: 'bold',
    36.       },
    37.       plot: {
    38.         tooltip: {
    39.           text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
    40.           backgroundColor: 'white',
    41.           bold: true,
    42.           borderColor: '#000',
    43.           borderRadius: '5px',
    44.           borderWidth: '2px',
    45.           fontColor: '#2f2f2f',
    46.           fontSize: '12px',
    47.           padding: '15px',
    48.           shadow: true,
    49.           shadowAlpha: 0.2,
    50.           shadowBlur: 5,
    51.           shadowColor: '#a1a1a1',
    52.           shadowDistance: 4,
    53.           textAlign: 'left',
    54.           visible: true,
    55.         },
    56.         barWidth: '40px',
    57.         hoverState: {
    58.           visible: false,
    59.         },
    60.         offsetX: '-1px',
    61.       },
    62.       plotarea: {
    63.         margin: '10% 10%',
    64.       },
    65.       scaleX: {
    66.         values: [
    67.           "Women's<br>WC Final",
    68.           "New Year's Eve<br>2010 in Japan",
    69.           'Japanese<br>Tsunami',
    70.           "Osama Bin<br>Laden's Death",
    71.           'Super Bowl<br>2011',
    72.         ],
    73.         guide: {
    74.           visible: true,
    75.         },
    76.         item: {
    77.           fontColor: '#000',
    78.         },
    79.         lineColor: '#000',
    80.         tick: {
    81.           lineColor: '#000',
    82.         },
    83.       },
    84.       scaleY: {
    85.         values: '0:8000:1000',
    86.         guide: {
    87.           visible: true,
    88.         },
    89.         item: {
    90.           fontColor: '#000',
    91.         },
    92.         label: {
    93.           text: 'TWEETS PER SECOND',
    94.           fontColor: '#000',
    95.           fontSize: '10px',
    96.           fontWeight: 'bold',
    97.           item: {
    98.             offsetY: '10px',
    99.           },
    100.         },
    101.         lineColor: '#000',
    102.         tick: {
    103.           lineColor: '#000',
    104.         },
    105.       },
    106.       labels: [{
    107.         text: ' = 1000 tweets<br> per second',
    108.         backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
    109.         backgroundPosition: '0 50%',
    110.         backgroundRepeat: 'no-repeat',
    111.         width: '170px',
    112.         height: '10%',
    113.         x: '70%',
    114.         y: '14%',
    115.       }, ],
    116.       series: [{
    117.         values: [7100, 6900, 5500, 5250, 4100],
    118.         styles: [{
    119.             backgroundColor: 'white',
    120.             backgroundFit: 'x',
    121.             backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
    122.             backgroundRepeat: 'repeat-y',
    123.             backgroundScale: 1.17
    124.           },
    125.           {
    126.             backgroundColor: 'white',
    127.             backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
    128.           },
    129.           {
    130.             backgroundColor: 'white',
    131.             backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
    132.           },
    133.           {
    134.             backgroundColor: 'white',
    135.             backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
    136.           },
    137.           {
    138.             backgroundColor: 'white',
    139.             backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
    140.           },
    141.         ],
    142.       }, ],
    143.     };
    144.  
    145.     zingchart.render({
    146.       id: 'myChart',
    147.       data: chartConfig,
    148.       height: '100%',
    149.       width: '100%',
    150.     });
    151.   </script>
    152. </body>
    153.  
    154. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <div id="myChart" class="chart--container">
    12.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    13.   </div>
    14. </body>
    15.  
    16. </html>
    1. .chart--container {
    2.   min-height: 350px;
    3.   width: 100%;
    4.   height: 100%;
    5. }
    6.  
    7. .zc-ref {
    8.   display: none;
    9. }
    1. let chartConfig = {
    2.   type: 'bar',
    3.   backgroundColor: '#fff',
    4.   title: {
    5.     text: 'TOP 5 ACTIVE TWITTER MOMENTS',
    6.     backgroundColor: '#fff',
    7.     fontColor: '#000',
    8.     fontSize: '20px',
    9.     fontWeight: 'bold',
    10.   },
    11.   plot: {
    12.     tooltip: {
    13.       text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
    14.       backgroundColor: 'white',
    15.       bold: true,
    16.       borderColor: '#000',
    17.       borderRadius: '5px',
    18.       borderWidth: '2px',
    19.       fontColor: '#2f2f2f',
    20.       fontSize: '12px',
    21.       padding: '15px',
    22.       shadow: true,
    23.       shadowAlpha: 0.2,
    24.       shadowBlur: 5,
    25.       shadowColor: '#a1a1a1',
    26.       shadowDistance: 4,
    27.       textAlign: 'left',
    28.       visible: true,
    29.     },
    30.     barWidth: '40px',
    31.     hoverState: {
    32.       visible: false,
    33.     },
    34.     offsetX: '-1px',
    35.   },
    36.   plotarea: {
    37.     margin: '10% 10%',
    38.   },
    39.   scaleX: {
    40.     values: [
    41.       "Women's<br>WC Final",
    42.       "New Year's Eve<br>2010 in Japan",
    43.       'Japanese<br>Tsunami',
    44.       "Osama Bin<br>Laden's Death",
    45.       'Super Bowl<br>2011',
    46.     ],
    47.     guide: {
    48.       visible: true,
    49.     },
    50.     item: {
    51.       fontColor: '#000',
    52.     },
    53.     lineColor: '#000',
    54.     tick: {
    55.       lineColor: '#000',
    56.     },
    57.   },
    58.   scaleY: {
    59.     values: '0:8000:1000',
    60.     guide: {
    61.       visible: true,
    62.     },
    63.     item: {
    64.       fontColor: '#000',
    65.     },
    66.     label: {
    67.       text: 'TWEETS PER SECOND',
    68.       fontColor: '#000',
    69.       fontSize: '10px',
    70.       fontWeight: 'bold',
    71.       item: {
    72.         offsetY: '10px',
    73.       },
    74.     },
    75.     lineColor: '#000',
    76.     tick: {
    77.       lineColor: '#000',
    78.     },
    79.   },
    80.   labels: [{
    81.     text: ' = 1000 tweets<br> per second',
    82.     backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
    83.     backgroundPosition: '0 50%',
    84.     backgroundRepeat: 'no-repeat',
    85.     width: '170px',
    86.     height: '10%',
    87.     x: '70%',
    88.     y: '14%',
    89.   }, ],
    90.   series: [{
    91.     values: [7100, 6900, 5500, 5250, 4100],
    92.     styles: [{
    93.         backgroundColor: 'white',
    94.         backgroundFit: 'x',
    95.         backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
    96.         backgroundRepeat: 'repeat-y',
    97.         backgroundScale: 1.17
    98.       },
    99.       {
    100.         backgroundColor: 'white',
    101.         backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
    102.       },
    103.       {
    104.         backgroundColor: 'white',
    105.         backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
    106.       },
    107.       {
    108.         backgroundColor: 'white',
    109.         backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
    110.       },
    111.       {
    112.         backgroundColor: 'white',
    113.         backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
    114.       },
    115.     ],
    116.   }, ],
    117. };
    118.  
    119. zingchart.render({
    120.   id: 'myChart',
    121.   data: chartConfig,
    122.   height: '100%',
    123.   width: '100%',
    124. });