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