• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          type: 'bar',
          utc: true,
          timezone: -5, //EST time
          plot: {
            barWidth: '50%',
            stacked: true,
            tooltip: {
              text: 'Raise %plot-text by %scale-value-value',
              transform: {
                type: 'date',
                all: '%g:%i %A'
              }
            }
          },
          scaleX: {
            labels: ["A's Goal", "B's Goal", "C's Goal"],
            label: {
              text: '12-Hour Fundraiser'
            },
            item: {
              fontSize: 10
            },
          },
          scaleY: {
            minValue: 1457091000000, //6 AM
            maxValue: 1457132400000, //Midnight
            step: 3600000, //1 hour
            transform: {
              type: 'date',
              all: '%g:%i %a'
            },
            label: {
              text: 'Time'
            },
            item: {
              fontSize: 10
            },
            guide: {
              lineStyle: 'dotted'
            }
          },
          plotarea: {
            marginLeft: '15%'
          },
          series: [{
              values: [1457110800000, 1457107200000, 1457103600000],
              text: '300K',
              backgroundColor: '#1565C0'
            },
            {
              values: [7200000, 7200000, 12600000],
              text: '350K',
              backgroundColor: '#1E88E5'
            },
            {
              values: [7200000, 7200000, 5400000],
              text: '400K',
              backgroundColor: '#42A5F5'
            },
            {
              values: [3600000, 5400000, 3600000],
              text: '450K',
              backgroundColor: '#90CAF9'
            },
            {
              values: [3600000, 5400000, 7200000],
              text: '500K',
              backgroundColor: '#E3F2FD'
            }
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          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'></div>
    </body>
    
    </html>
    
          
    var myConfig = {
      type: 'bar',
      utc: true,
      timezone: -5, //EST time
      plot: {
        barWidth: '50%',
        stacked: true,
        tooltip: {
          text: 'Raise %plot-text by %scale-value-value',
          transform: {
            type: 'date',
            all: '%g:%i %A'
          }
        }
      },
      scaleX: {
        labels: ["A's Goal", "B's Goal", "C's Goal"],
        label: {
          text: '12-Hour Fundraiser'
        },
        item: {
          fontSize: 10
        },
      },
      scaleY: {
        minValue: 1457091000000, //6 AM
        maxValue: 1457132400000, //Midnight
        step: 3600000, //1 hour
        transform: {
          type: 'date',
          all: '%g:%i %a'
        },
        label: {
          text: 'Time'
        },
        item: {
          fontSize: 10
        },
        guide: {
          lineStyle: 'dotted'
        }
      },
      plotarea: {
        marginLeft: '15%'
      },
      series: [{
          values: [1457110800000, 1457107200000, 1457103600000],
          text: '300K',
          backgroundColor: '#1565C0'
        },
        {
          values: [7200000, 7200000, 12600000],
          text: '350K',
          backgroundColor: '#1E88E5'
        },
        {
          values: [7200000, 7200000, 5400000],
          text: '400K',
          backgroundColor: '#42A5F5'
        },
        {
          values: [3600000, 5400000, 3600000],
          text: '450K',
          backgroundColor: '#90CAF9'
        },
        {
          values: [3600000, 5400000, 7200000],
          text: '500K',
          backgroundColor: '#E3F2FD'
        }
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });