• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        .chart--container {
          min-height: 530px;
          max-width: 650px;
          width: 100%;
          height: 100%;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        let chartConfig = {
          type: 'hbar',
          backgroundColor: '#fff',
          title: {
            text: 'TOP 5 ACTIVE TWITTER MOMENTS',
            backgroundColor: '#fff',
            fontColor: '#000',
            fontSize: '20px',
            fontWeight: 'bold',
          },
          plot: {
            tooltip: {
              text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
              backgroundColor: 'white',
              bold: true,
              borderColor: '#000',
              borderRadius: '5px',
              borderWidth: '2px',
              fontColor: '#2f2f2f',
              fontSize: '12px',
              padding: '15px',
              shadow: true,
              shadowAlpha: 0.2,
              shadowBlur: 5,
              shadowColor: '#a1a1a1',
              shadowDistance: 4,
              textAlign: 'left',
              visible: true,
            },
            barWidth: '29px',
            hoverState: {
              visible: false,
            },
          },
          plotarea: {
            margin: '10% 25%',
          },
          scaleX: {
            values: [
              "Women's<br>WC Final",
              "New Year's Eve<br>2010 in Japan",
              'Japanese<br>Tsunami',
              "Osama Bin<br>Laden's Death",
              'Super Bowl<br>2011',
            ],
            guide: {
              visible: true,
            },
            item: {
              fontColor: '#000',
            },
            lineColor: '#000',
            tick: {
              lineColor: '#000',
            },
          },
          scaleY: {
            values: '0:8000:1000',
            guide: {
              visible: true,
            },
            item: {
              fontColor: '#000',
            },
            label: {
              text: 'TWEETS PER SECOND',
              fontColor: '#000',
              fontSize: '10px',
              fontWeight: 'bold',
              item: {
                offsetY: '10px',
              },
            },
            lineColor: '#000',
            tick: {
              lineColor: '#000',
            },
          },
          labels: [{
            text: ' = 1000 tweets<br> per second',
            backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
            backgroundPosition: '0 50%',
            backgroundRepeat: 'no-repeat',
            width: '170px',
            height: '10%',
            x: '78%',
            y: '14%',
          }, ],
          series: [{
            values: [7100, 6900, 5500, 5250, 4100],
            styles: [{
                backgroundColor: 'white',
                backgroundFit: 'y',
                backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
                backgroundRepeat: 'repeat-x',
                backgroundScale: 1.1,
              },
              {
                backgroundColor: 'white',
                backgroundFit: 'y',
                backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
                backgroundRepeat: 'repeat-x',
              },
              {
                backgroundColor: 'white',
                backgroundFit: 'y',
                backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
                backgroundRepeat: 'repeat-x',
              },
              {
                backgroundColor: 'white',
                backgroundFit: 'y',
                backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
                backgroundRepeat: 'repeat-x',
              },
              {
                backgroundColor: 'white',
                backgroundFit: 'y',
                backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
                backgroundRepeat: 'repeat-x',
              },
            ],
          }, ],
        };
    
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: '100%',
          width: '100%',
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
    </body>
    
    </html>
    .chart--container {
      min-height: 530px;
      max-width: 650px;
      width: 100%;
      height: 100%;
    }
    
    .zc-ref {
      display: none;
    }
    let chartConfig = {
      type: 'hbar',
      backgroundColor: '#fff',
      title: {
        text: 'TOP 5 ACTIVE TWITTER MOMENTS',
        backgroundColor: '#fff',
        fontColor: '#000',
        fontSize: '20px',
        fontWeight: 'bold',
      },
      plot: {
        tooltip: {
          text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
          backgroundColor: 'white',
          bold: true,
          borderColor: '#000',
          borderRadius: '5px',
          borderWidth: '2px',
          fontColor: '#2f2f2f',
          fontSize: '12px',
          padding: '15px',
          shadow: true,
          shadowAlpha: 0.2,
          shadowBlur: 5,
          shadowColor: '#a1a1a1',
          shadowDistance: 4,
          textAlign: 'left',
          visible: true,
        },
        barWidth: '29px',
        hoverState: {
          visible: false,
        },
      },
      plotarea: {
        margin: '10% 25%',
      },
      scaleX: {
        values: [
          "Women's<br>WC Final",
          "New Year's Eve<br>2010 in Japan",
          'Japanese<br>Tsunami',
          "Osama Bin<br>Laden's Death",
          'Super Bowl<br>2011',
        ],
        guide: {
          visible: true,
        },
        item: {
          fontColor: '#000',
        },
        lineColor: '#000',
        tick: {
          lineColor: '#000',
        },
      },
      scaleY: {
        values: '0:8000:1000',
        guide: {
          visible: true,
        },
        item: {
          fontColor: '#000',
        },
        label: {
          text: 'TWEETS PER SECOND',
          fontColor: '#000',
          fontSize: '10px',
          fontWeight: 'bold',
          item: {
            offsetY: '10px',
          },
        },
        lineColor: '#000',
        tick: {
          lineColor: '#000',
        },
      },
      labels: [{
        text: ' = 1000 tweets<br> per second',
        backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
        backgroundPosition: '0 50%',
        backgroundRepeat: 'no-repeat',
        width: '170px',
        height: '10%',
        x: '78%',
        y: '14%',
      }, ],
      series: [{
        values: [7100, 6900, 5500, 5250, 4100],
        styles: [{
            backgroundColor: 'white',
            backgroundFit: 'y',
            backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
            backgroundRepeat: 'repeat-x',
            backgroundScale: 1.1,
          },
          {
            backgroundColor: 'white',
            backgroundFit: 'y',
            backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
            backgroundRepeat: 'repeat-x',
          },
          {
            backgroundColor: 'white',
            backgroundFit: 'y',
            backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
            backgroundRepeat: 'repeat-x',
          },
          {
            backgroundColor: 'white',
            backgroundFit: 'y',
            backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
            backgroundRepeat: 'repeat-x',
          },
          {
            backgroundColor: 'white',
            backgroundFit: 'y',
            backgroundImage: '//www.zingchart.com/images/chartTwitter.png',
            backgroundRepeat: 'repeat-x',
          },
        ],
      }, ],
    };
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });