• 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>
        .container {
          width: 400px;
          height: 200px;
          resize: both;
          overflow: scroll;
          min-width: 400px;
        }
    
        #myChart {
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
    
    <body>
      <div class='container'>
        <div id='myChart'></div>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          type: 'bar',
          scaleX: {
            minValue: 1435741200000,
            step: 'day',
            transform: {
              type: 'date',
              all: '%m/%d/%y'
            },
            item: {
              fontSize: 10
            },
            zooming: true,
            zoomToValues: [1441098000000, 1446195600000],
            mediaRules: [{
                maxWidth: 600,
                maxItems: 5
              },
              {
                maxWidth: 400,
                maxItems: 3,
                item: {
                  fontSize: 9
                }
              }
            ]
          },
          zoom: {
            shared: true,
            backgroundColor: '#29A2CC'
          },
          scrollX: {
            bar: {
              backgroundColor: '#7ecde7 #d4eef7',
              alpha: 0.5,
              height: '5%'
            },
            handle: {
              backgroundColor: '#29A2CC',
              height: '1%'
            }
          },
          preview: {
            adjustLayout: true,
            height: '15%',
            borderWidth: 1,
            mask: {
              backgroundColor: '#7ecde7'
            },
            handle: {
              backgroundColor: '#1c7897',
              borderWidth: 1,
              borderColor: '#08222b',
              height: '20px',
              width: '5px'
            }
          },
          scaleY: {
            values: '0:15:5',
            format: '%vM',
            item: {
              fontSize: 10
            },
            guide: {
              lineStyle: 'dotted'
            },
            mediaRules: [{
                maxWidth: 600,
                values: '0:15:7.5'
              },
              {
                maxWidth: 400,
                decimals: 0,
                item: {
                  fontSize: 9
                }
              }
            ]
          },
          plot: {
            backgroundColor: '#7CA82B',
            barWidth: '70%',
            tooltip: {
              visible: false
            },
            mediaRules: [{
                maxWidth: 600,
                barWidth: '80%'
              },
              {
                maxWidth: 400,
                barWidth: '90%'
              }
            ]
          },
          plotarea: {
            adjustLayout: true
          },
          crosshairX: {
            plotLabel: {
              text: 'Volume: %vM',
              decimals: 2,
              multiple: true,
              placement: 'node-top',
              backgroundColor: 'white',
              alpha: 0.8,
              padding: '5%',
              borderColor: '#7CA82B',
              borderRadius: '3px'
            },
            scaleLabel: {
              fontColor: 'gray',
              backgroundColor: 'white',
              borderWidth: 1,
              borderColor: '#29A2CC',
              borderRadius: '3px'
            },
            mediaRules: [{
                maxWidth: 600,
                plotLabel: {
                  text: 'Volume:<br>%vM'
                }
              },
              {
                maxWidth: 400,
                plotLabel: {
                  text: '%vM',
                  fontSize: 9
                },
                scaleLabel: {
                  fontSize: 9
                }
              }
            ]
          },
          series: [{
            values: [
              [1435741200000, 1.99], //07/01/15
              [1435827600000, 1.34], //07/02/15
    
              [1436173200000, 1.90], //07/06/15
              [1436259600000, 3.45], //07/07/15
              [1436346000000, 2.38], //07/08/15
              [1436432400000, 2.27], //07/09/15
              [1436518800000, 2.40], //07/10/15
    
              [1436778000000, 3.96], //07/13/15
              [1436864400000, 4.74], //07/14/15
              [1436950800000, 2.99], //07/15/15
              [1437037200000, 4.10], //07/16/15
              [1437123600000, 4.93], //07/17/15
    
              [1437382800000, 4.75], //07/20/15
              [1437469200000, 3.18], //07/21/15
              [1437555600000, 3.11], //07/22/15
              [1437642000000, 9.37], //07/23/15
              [1437728400000, 9.91], //07/24/15
    
              [1437987600000, 7.49], //07/27/15
              [1438074000000, 5.27], //07/28/15
              [1438160400000, 3.75], //07/29/15
              [1438246800000, 3.74], //07/30/15
              [1438333200000, 3.03], //07/31/15
    
              [1438592400000, 3.01], //08/03/15
              [1438678800000, 2.93], //08/04/15
              [1438765200000, 2.89], //08/05/15
              [1438851600000, 3.82], //08/06/15
              [1438938000000, 3.97], //08/07/15
    
              [1439197200000, 2.62], //08/10/15
              [1439283600000, 2.68], //08/11/15
              [1439370000000, 4.01], //08/12/15
              [1439456400000, 2.90], //08/13/15
              [1439542800000, 1.99], //08/14/15
    
              [1439802000000, 2.58], //08/17/15
              [1439888400000, 2.07], //08/18/15
              [1439974800000, 2.32], //08/19/15
              [1440061200000, 4.41], //08/20/15
              [1440147600000, 6.71], //08/21/15
    
              [1440406800000, 10.10], //08/24/15
              [1440493200000, 5.68], //08/25/15
              [1440579600000, 6.36], //08/26/15
              [1440666000000, 6.11], //08/27/15
              [1440752400000, 2.75], //08/28/15
    
              [1441011600000, 3.00], //08/31/15
              [1441098000000, 3.86], //09/01/15
              [1441184400000, 3.71], //09/02/15
              [1441270800000, 3.15], //09/03/15
              [1441357200000, 2.69], //09/04/15
    
              [1441702800000, 3.81], //09/08/15
              [1441789200000, 4.37], //09/09/15
              [1441875600000, 2.58], //09/10/15
              [1441962000000, 3.23], //09/11/15
    
              [1442221200000, 3.13], //09/14/15
              [1442307600000, 2.87], //09/15/15
              [1442394000000, 2.25], //09/16/15
              [1442480400000, 4.17], //09/17/15
              [1442566800000, 6.16], //09/18/15
    
              [1442826000000, 3.28], //09/21/15
              [1442912400000, 3.84], //09/22/15
              [1442998800000, 2.24], //09/23/15
              [1443085200000, 3.50], //09/24/15
              [1443171600000, 4.03], //09/25/15
    
              [1443430800000, 5.43], //09/28/15
              [1443517200000, 4.46], //09/29/15
              [1443603600000, 4.00], //09/30/15
              [1443690000000, 3.77], //10/01/15
              [1443776400000, 4.60], //10/02/15
    
              [1444035600000, 3.39], //10/05/15
              [1444122000000, 4.55], //10/06/15
              [1444208400000, 3.81], //10/07/15
              [1444294800000, 4.68], //10/08/15
              [1444381200000, 3.54], //10/09/15
    
              [1444640400000, 2.78], //10/12/15
              [1444726800000, 2.94], //10/13/15
              [1444813200000, 3.58], //10/14/15
              [1444899600000, 4.94], //10/15/15
              [1444986000000, 4.32], //10/16/15
    
              [1445245200000, 4.38], //10/19/15
              [1445331600000, 4.35], //10/20/15
              [1445418000000, 3.36], //10/21/15
              [1445504400000, 7.78], //10/22/15
              [1445590800000, 10.69], //10/23/15
    
              [1445850000000, 4.27], //10/26/15
              [1445936400000, 3.79], //10/27/15
              [1446022800000, 3.93], //10/28/15
              [1446109200000, 3.90], //10/29/15
              [1446195600000, 3.87], //10/30/15
    
              [1446454800000, 2.82], //11/02/15
              [1446541200000, 3.25], //11/03/15
              [1446627600000, 4.84], //11/04/15
              [1446714000000, 4.72], //11/05/15
              [1446800400000, 4.09], //11/06/15
    
              [1447059600000, 4.05], //11/09/15
              [1447146000000, 3.49], //11/10/15
              [1447232400000, 5.39], //11/11/15
              [1447318800000, 4.28], //11/12/15
              [1447405200000, 6.26], //11/13/15
    
              [1447664400000, 7.44], //11/16/15
              [1447750800000, 4.32], //11/17/15
              [1447837200000, 4.47], //11/18/15
              [1447923600000, 4.71], //11/19/15
              [1448010000000, 3.90], //11/20/15
    
              [1448269200000, 4.39], //11/23/15
              [1448355600000, 4.54], //11/24/15
              [1448442000000, 2.70], //11/25/15
    
              [1448614800000, 1.97], //11/27/15
    
              [1448874000000, 5.69], //11/30/15
              [1448960400000, 4.75], //12/01/15
              [1449046800000, 4.27], //12/02/15
              [1449133200000, 5.06], //12/03/15
              [1449219600000, 4.53], //12/04/15
    
              [1449478800000, 3.73], //12/07/15
              [1449565200000, 3.65], //12/08/15
              [1449651600000, 5.16], //12/09/15
              [1449738000000, 3.46], //12/10/15
              [1449824400000, 5.47], //12/11/15
    
              [1450083600000, 4.36], //12/14/15
              [1450170000000, 4.75], //12/15/15
              [1450256400000, 3.96], //12/16/15
              [1450342800000, 3.68], //12/17/15
              [1450429200000, 6.84], //12/18/15
    
              [1450688400000, 3.25], //12/21/15
              [1450774800000, 2.67], //12/22/15
              [1450861200000, 2.72], //12/23/15
              [1450947600000, 1.09], //12/24/15
    
              [1451293200000, 3.78], //12/28/15
              [1451379600000, 5.73], //12/29/15
              [1451466000000, 3.52], //12/30/15
              [1451552400000, 3.75], //12/31/15
            ]
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          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 class='container'>
        <div id='myChart'></div>
      </div>
    </body>
    
    </html>
    .container {
      width: 400px;
      height: 200px;
      resize: both;
      overflow: scroll;
      min-width: 400px;
    }
    
    #myChart {
      width: 100%;
      height: 100%;
    }
    var myConfig = {
      type: 'bar',
      scaleX: {
        minValue: 1435741200000,
        step: 'day',
        transform: {
          type: 'date',
          all: '%m/%d/%y'
        },
        item: {
          fontSize: 10
        },
        zooming: true,
        zoomToValues: [1441098000000, 1446195600000],
        mediaRules: [{
            maxWidth: 600,
            maxItems: 5
          },
          {
            maxWidth: 400,
            maxItems: 3,
            item: {
              fontSize: 9
            }
          }
        ]
      },
      zoom: {
        shared: true,
        backgroundColor: '#29A2CC'
      },
      scrollX: {
        bar: {
          backgroundColor: '#7ecde7 #d4eef7',
          alpha: 0.5,
          height: '5%'
        },
        handle: {
          backgroundColor: '#29A2CC',
          height: '1%'
        }
      },
      preview: {
        adjustLayout: true,
        height: '15%',
        borderWidth: 1,
        mask: {
          backgroundColor: '#7ecde7'
        },
        handle: {
          backgroundColor: '#1c7897',
          borderWidth: 1,
          borderColor: '#08222b',
          height: '20px',
          width: '5px'
        }
      },
      scaleY: {
        values: '0:15:5',
        format: '%vM',
        item: {
          fontSize: 10
        },
        guide: {
          lineStyle: 'dotted'
        },
        mediaRules: [{
            maxWidth: 600,
            values: '0:15:7.5'
          },
          {
            maxWidth: 400,
            decimals: 0,
            item: {
              fontSize: 9
            }
          }
        ]
      },
      plot: {
        backgroundColor: '#7CA82B',
        barWidth: '70%',
        tooltip: {
          visible: false
        },
        mediaRules: [{
            maxWidth: 600,
            barWidth: '80%'
          },
          {
            maxWidth: 400,
            barWidth: '90%'
          }
        ]
      },
      plotarea: {
        adjustLayout: true
      },
      crosshairX: {
        plotLabel: {
          text: 'Volume: %vM',
          decimals: 2,
          multiple: true,
          placement: 'node-top',
          backgroundColor: 'white',
          alpha: 0.8,
          padding: '5%',
          borderColor: '#7CA82B',
          borderRadius: '3px'
        },
        scaleLabel: {
          fontColor: 'gray',
          backgroundColor: 'white',
          borderWidth: 1,
          borderColor: '#29A2CC',
          borderRadius: '3px'
        },
        mediaRules: [{
            maxWidth: 600,
            plotLabel: {
              text: 'Volume:<br>%vM'
            }
          },
          {
            maxWidth: 400,
            plotLabel: {
              text: '%vM',
              fontSize: 9
            },
            scaleLabel: {
              fontSize: 9
            }
          }
        ]
      },
      series: [{
        values: [
          [1435741200000, 1.99], //07/01/15
          [1435827600000, 1.34], //07/02/15
    
          [1436173200000, 1.90], //07/06/15
          [1436259600000, 3.45], //07/07/15
          [1436346000000, 2.38], //07/08/15
          [1436432400000, 2.27], //07/09/15
          [1436518800000, 2.40], //07/10/15
    
          [1436778000000, 3.96], //07/13/15
          [1436864400000, 4.74], //07/14/15
          [1436950800000, 2.99], //07/15/15
          [1437037200000, 4.10], //07/16/15
          [1437123600000, 4.93], //07/17/15
    
          [1437382800000, 4.75], //07/20/15
          [1437469200000, 3.18], //07/21/15
          [1437555600000, 3.11], //07/22/15
          [1437642000000, 9.37], //07/23/15
          [1437728400000, 9.91], //07/24/15
    
          [1437987600000, 7.49], //07/27/15
          [1438074000000, 5.27], //07/28/15
          [1438160400000, 3.75], //07/29/15
          [1438246800000, 3.74], //07/30/15
          [1438333200000, 3.03], //07/31/15
    
          [1438592400000, 3.01], //08/03/15
          [1438678800000, 2.93], //08/04/15
          [1438765200000, 2.89], //08/05/15
          [1438851600000, 3.82], //08/06/15
          [1438938000000, 3.97], //08/07/15
    
          [1439197200000, 2.62], //08/10/15
          [1439283600000, 2.68], //08/11/15
          [1439370000000, 4.01], //08/12/15
          [1439456400000, 2.90], //08/13/15
          [1439542800000, 1.99], //08/14/15
    
          [1439802000000, 2.58], //08/17/15
          [1439888400000, 2.07], //08/18/15
          [1439974800000, 2.32], //08/19/15
          [1440061200000, 4.41], //08/20/15
          [1440147600000, 6.71], //08/21/15
    
          [1440406800000, 10.10], //08/24/15
          [1440493200000, 5.68], //08/25/15
          [1440579600000, 6.36], //08/26/15
          [1440666000000, 6.11], //08/27/15
          [1440752400000, 2.75], //08/28/15
    
          [1441011600000, 3.00], //08/31/15
          [1441098000000, 3.86], //09/01/15
          [1441184400000, 3.71], //09/02/15
          [1441270800000, 3.15], //09/03/15
          [1441357200000, 2.69], //09/04/15
    
          [1441702800000, 3.81], //09/08/15
          [1441789200000, 4.37], //09/09/15
          [1441875600000, 2.58], //09/10/15
          [1441962000000, 3.23], //09/11/15
    
          [1442221200000, 3.13], //09/14/15
          [1442307600000, 2.87], //09/15/15
          [1442394000000, 2.25], //09/16/15
          [1442480400000, 4.17], //09/17/15
          [1442566800000, 6.16], //09/18/15
    
          [1442826000000, 3.28], //09/21/15
          [1442912400000, 3.84], //09/22/15
          [1442998800000, 2.24], //09/23/15
          [1443085200000, 3.50], //09/24/15
          [1443171600000, 4.03], //09/25/15
    
          [1443430800000, 5.43], //09/28/15
          [1443517200000, 4.46], //09/29/15
          [1443603600000, 4.00], //09/30/15
          [1443690000000, 3.77], //10/01/15
          [1443776400000, 4.60], //10/02/15
    
          [1444035600000, 3.39], //10/05/15
          [1444122000000, 4.55], //10/06/15
          [1444208400000, 3.81], //10/07/15
          [1444294800000, 4.68], //10/08/15
          [1444381200000, 3.54], //10/09/15
    
          [1444640400000, 2.78], //10/12/15
          [1444726800000, 2.94], //10/13/15
          [1444813200000, 3.58], //10/14/15
          [1444899600000, 4.94], //10/15/15
          [1444986000000, 4.32], //10/16/15
    
          [1445245200000, 4.38], //10/19/15
          [1445331600000, 4.35], //10/20/15
          [1445418000000, 3.36], //10/21/15
          [1445504400000, 7.78], //10/22/15
          [1445590800000, 10.69], //10/23/15
    
          [1445850000000, 4.27], //10/26/15
          [1445936400000, 3.79], //10/27/15
          [1446022800000, 3.93], //10/28/15
          [1446109200000, 3.90], //10/29/15
          [1446195600000, 3.87], //10/30/15
    
          [1446454800000, 2.82], //11/02/15
          [1446541200000, 3.25], //11/03/15
          [1446627600000, 4.84], //11/04/15
          [1446714000000, 4.72], //11/05/15
          [1446800400000, 4.09], //11/06/15
    
          [1447059600000, 4.05], //11/09/15
          [1447146000000, 3.49], //11/10/15
          [1447232400000, 5.39], //11/11/15
          [1447318800000, 4.28], //11/12/15
          [1447405200000, 6.26], //11/13/15
    
          [1447664400000, 7.44], //11/16/15
          [1447750800000, 4.32], //11/17/15
          [1447837200000, 4.47], //11/18/15
          [1447923600000, 4.71], //11/19/15
          [1448010000000, 3.90], //11/20/15
    
          [1448269200000, 4.39], //11/23/15
          [1448355600000, 4.54], //11/24/15
          [1448442000000, 2.70], //11/25/15
    
          [1448614800000, 1.97], //11/27/15
    
          [1448874000000, 5.69], //11/30/15
          [1448960400000, 4.75], //12/01/15
          [1449046800000, 4.27], //12/02/15
          [1449133200000, 5.06], //12/03/15
          [1449219600000, 4.53], //12/04/15
    
          [1449478800000, 3.73], //12/07/15
          [1449565200000, 3.65], //12/08/15
          [1449651600000, 5.16], //12/09/15
          [1449738000000, 3.46], //12/10/15
          [1449824400000, 5.47], //12/11/15
    
          [1450083600000, 4.36], //12/14/15
          [1450170000000, 4.75], //12/15/15
          [1450256400000, 3.96], //12/16/15
          [1450342800000, 3.68], //12/17/15
          [1450429200000, 6.84], //12/18/15
    
          [1450688400000, 3.25], //12/21/15
          [1450774800000, 2.67], //12/22/15
          [1450861200000, 2.72], //12/23/15
          [1450947600000, 1.09], //12/24/15
    
          [1451293200000, 3.78], //12/28/15
          [1451379600000, 5.73], //12/29/15
          [1451466000000, 3.52], //12/30/15
          [1451552400000, 3.75], //12/31/15
        ]
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });