• 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: 400px;
    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.         hoverState: {
    57.           visible: false,
    58.         },
    59.         offsetX: '-1px',
    60.       },
    61.       plotarea: {
    62.         margin: '10% 10%',
    63.       },
    64.       scaleX: {
    65.         values: [
    66.           "Women's<br>WC Final",
    67.           "New Year's Eve<br>2010 in Japan",
    68.           'Japanese<br>Tsunami',
    69.           "Osama Bin<br>Laden's Death",
    70.           'Super Bowl<br>2011',
    71.         ],
    72.         guide: {
    73.           visible: true,
    74.         },
    75.         item: {
    76.           fontColor: '#000',
    77.         },
    78.         lineColor: '#000',
    79.         tick: {
    80.           lineColor: '#000',
    81.         },
    82.       },
    83.       scaleY: {
    84.         values: '0:8000:1000',
    85.         guide: {
    86.           visible: true,
    87.         },
    88.         item: {
    89.           fontColor: '#000',
    90.         },
    91.         label: {
    92.           text: 'TWEETS PER SECOND',
    93.           fontColor: '#000',
    94.           fontSize: '10px',
    95.           fontWeight: 'bold',
    96.           item: {
    97.             offsetY: '10px',
    98.           },
    99.         },
    100.         lineColor: '#000',
    101.         tick: {
    102.           lineColor: '#000',
    103.         },
    104.       },
    105.       series: [{
    106.         values: [7100, 6900, 5500, 5250, 4100],
    107.         styles: [{
    108.             backgroundClip: true,
    109.             backgroundFit: 'xy',
    110.             backgroundRepeat: 'no-repeat',
    111.             backgroundColor: 'transparent',
    112.             backgroundImage: 'https://app.zingsoft.com/api/file/ILR5R87P/neaV71UQxuvi2ypjSGAN_twitter.png',
    113.           },
    114.           {
    115.             backgroundFit: 'xy',
    116.             backgroundRepeat: 'no-repeat',
    117.             backgroundColor: 'transparent',
    118.             backgroundImage: 'https://app.zingsoft.com/api/file/ILR5R87P/neaV71UQxuvi2ypjSGAN_twitter.png',
    119.           },
    120.           {
    121.             backgroundFit: 'xy',
    122.             backgroundRepeat: 'no-repeat',
    123.             backgroundColor: 'transparent',
    124.             backgroundImage: 'https://app.zingsoft.com/api/file/ILR5R87P/neaV71UQxuvi2ypjSGAN_twitter.png',
    125.           },
    126.           {
    127.             backgroundFit: 'xy',
    128.             backgroundRepeat: 'no-repeat',
    129.             backgroundColor: 'transparent',
    130.             backgroundImage: 'https://app.zingsoft.com/api/file/ILR5R87P/neaV71UQxuvi2ypjSGAN_twitter.png',
    131.           },
    132.           {
    133.             backgroundFit: 'xy',
    134.             backgroundRepeat: 'no-repeat',
    135.             backgroundColor: 'transparent',
    136.             backgroundImage: 'https://app.zingsoft.com/api/file/ILR5R87P/neaV71UQxuvi2ypjSGAN_twitter.png',
    137.           },
    138.         ],
    139.       }, ],
    140.     };
    141.  
    142.     zingchart.render({
    143.       id: 'myChart',
    144.       data: chartConfig,
    145.       height: '100%',
    146.       width: '100%',
    147.     });
    148.   </script>
    149. </body>
    150.  
    151. </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: 400px;
    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.     hoverState: {
    31.       visible: false,
    32.     },
    33.     offsetX: '-1px',
    34.   },
    35.   plotarea: {
    36.     margin: '10% 10%',
    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.   series: [{
    80.     values: [7100, 6900, 5500, 5250, 4100],
    81.     styles: [{
    82.         backgroundClip: true,
    83.         backgroundFit: 'xy',
    84.         backgroundRepeat: 'no-repeat',
    85.         backgroundColor: 'transparent',
    86.         backgroundImage: 'https://app.zingsoft.com/api/file/ILR5R87P/neaV71UQxuvi2ypjSGAN_twitter.png',
    87.       },
    88.       {
    89.         backgroundFit: 'xy',
    90.         backgroundRepeat: 'no-repeat',
    91.         backgroundColor: 'transparent',
    92.         backgroundImage: 'https://app.zingsoft.com/api/file/ILR5R87P/neaV71UQxuvi2ypjSGAN_twitter.png',
    93.       },
    94.       {
    95.         backgroundFit: 'xy',
    96.         backgroundRepeat: 'no-repeat',
    97.         backgroundColor: 'transparent',
    98.         backgroundImage: 'https://app.zingsoft.com/api/file/ILR5R87P/neaV71UQxuvi2ypjSGAN_twitter.png',
    99.       },
    100.       {
    101.         backgroundFit: 'xy',
    102.         backgroundRepeat: 'no-repeat',
    103.         backgroundColor: 'transparent',
    104.         backgroundImage: 'https://app.zingsoft.com/api/file/ILR5R87P/neaV71UQxuvi2ypjSGAN_twitter.png',
    105.       },
    106.       {
    107.         backgroundFit: 'xy',
    108.         backgroundRepeat: 'no-repeat',
    109.         backgroundColor: 'transparent',
    110.         backgroundImage: 'https://app.zingsoft.com/api/file/ILR5R87P/neaV71UQxuvi2ypjSGAN_twitter.png',
    111.       },
    112.     ],
    113.   }, ],
    114. };
    115.  
    116. zingchart.render({
    117.   id: 'myChart',
    118.   data: chartConfig,
    119.   height: '100%',
    120.   width: '100%',
    121. });