• 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></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          type: 'scatter',
          crosshairX: {
            plotLabel: {
              backgroundColor: 'white',
              borderWidth: 1,
              borderColor: 'gray',
              borderRadius: '3px',
              padding: '5%'
            },
            scaleLabel: {
              text: '%v',
              transform: {
                type: 'date',
                all: '%D,<br>%M %d'
              },
              fontColor: 'black',
              backgroundColor: 'white',
              borderWidth: 1,
              borderColor: 'gray',
              borderRadius: '3px',
              padding: '5%'
            }
          },
          plot: {
            marker: {
              type: 'cross',
              lineWidth: 2,
              size: 3
            },
            tooltip: {
              text: '%v particles',
              borderRadius: '3px'
            }
          },
          scaleX: {
            minValue: 1420232400000,
            step: 'day',
            transform: {
              type: 'date',
              all: '%D, %M %d, %Y'
            },
            item: {
              fontSize: 10
            },
            guide: {
              lineStyle: 'solid'
            }
          },
          scaleY: {
            values: '31:33:0.5',
            item: {
              fontSize: 10
            },
            guide: {
              lineStyle: 'solid'
            }
          },
          series: [{
              values: [
                [1420232400000, 32.34], //01/02/15
    
                [1420491600000, 31.80], //01/05/15
                [1420578000000, 32.05], //01/06/15
                [1420664400000, 32.21], //01/07/15
                [1420750800000, 32.32], //01/08/15
                [1420837200000, 32.92], //01/09/15
    
                [1421096400000, 32.07], //01/12/15
                [1421182800000, 32.26], //01/13/15
                [1421269200000, 31.65], //01/14/15
                [1421355600000, 31.86], //01/15/15
                [1421442000000, 31.51], //01/16/15
    
                [1421787600000, 31.84], //01/20/15
                [1421874000000, 31.83], //01/21/15
                [1421960400000, 32.30], //01/22/15
                [1422046800000, 32.43], //01/23/15
    
                [1422306000000, 32.91], //01/26/15
                [1422392400000, 32.39], //01/27/15
                [1422478800000, 32.77], //01/28/15
                [1422565200000, 31.84], //01/29/15
                [1422651600000, 31.88], //01/30/15
              ],
              text: 'Alpha'
            },
            {
              values: [
                [1420232400000, 31.46], //01/02/15
    
                [1420491600000, 32.25], //01/05/15
                [1420578000000, 32.57], //01/06/15
                [1420664400000, 32.39], //01/07/15
                [1420750800000, 31.38], //01/08/15
                [1420837200000, 32.53], //01/09/15
    
                [1421096400000, 32.14], //01/12/15
                [1421182800000, 31.33], //01/13/15
                [1421269200000, 31.85], //01/14/15
                [1421355600000, 31.97], //01/15/15
                [1421442000000, 31.65], //01/16/15
    
                [1421787600000, 32.27], //01/20/15
                [1421874000000, 32.08], //01/21/15
                [1421960400000, 32.36], //01/22/15
                [1422046800000, 31.88], //01/23/15
    
                [1422306000000, 32.74], //01/26/15
                [1422392400000, 32.46], //01/27/15
                [1422478800000, 32.49], //01/28/15
                [1422565200000, 32.20], //01/29/15
                [1422651600000, 32.11], //01/30/15
              ],
              text: 'Beta'
            },
            {
              values: [
                [1420232400000, 31.87], //01/02/15
    
                [1420491600000, 31.52], //01/05/15
                [1420578000000, 31.93], //01/06/15
                [1420664400000, 31.98], //01/07/15
                [1420750800000, 32.13], //01/08/15
                [1420837200000, 31.95], //01/09/15
    
                [1421096400000, 31.77], //01/12/15
                [1421182800000, 31.61], //01/13/15
                [1421269200000, 31.41], //01/14/15
                [1421355600000, 31.56], //01/15/15
                [1421442000000, 31.45], //01/16/15
    
                [1421787600000, 31.55], //01/20/15
                [1421874000000, 31.71], //01/21/15
                [1421960400000, 31.96], //01/22/15
                [1422046800000, 32.29], //01/23/15
    
                [1422306000000, 32.40], //01/26/15
                [1422392400000, 32.20], //01/27/15
                [1422478800000, 31.51], //01/28/15
                [1422565200000, 31.38], //01/29/15
                [1422651600000, 31.42], //01/30/15
              ],
              text: 'Gamma'
            }
          ]
        };
    
        zingchart.TOUCHZOOM = 'pinch';
    
        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: 'scatter',
      crosshairX: {
        plotLabel: {
          backgroundColor: 'white',
          borderWidth: 1,
          borderColor: 'gray',
          borderRadius: '3px',
          padding: '5%'
        },
        scaleLabel: {
          text: '%v',
          transform: {
            type: 'date',
            all: '%D,<br>%M %d'
          },
          fontColor: 'black',
          backgroundColor: 'white',
          borderWidth: 1,
          borderColor: 'gray',
          borderRadius: '3px',
          padding: '5%'
        }
      },
      plot: {
        marker: {
          type: 'cross',
          lineWidth: 2,
          size: 3
        },
        tooltip: {
          text: '%v particles',
          borderRadius: '3px'
        }
      },
      scaleX: {
        minValue: 1420232400000,
        step: 'day',
        transform: {
          type: 'date',
          all: '%D, %M %d, %Y'
        },
        item: {
          fontSize: 10
        },
        guide: {
          lineStyle: 'solid'
        }
      },
      scaleY: {
        values: '31:33:0.5',
        item: {
          fontSize: 10
        },
        guide: {
          lineStyle: 'solid'
        }
      },
      series: [{
          values: [
            [1420232400000, 32.34], //01/02/15
    
            [1420491600000, 31.80], //01/05/15
            [1420578000000, 32.05], //01/06/15
            [1420664400000, 32.21], //01/07/15
            [1420750800000, 32.32], //01/08/15
            [1420837200000, 32.92], //01/09/15
    
            [1421096400000, 32.07], //01/12/15
            [1421182800000, 32.26], //01/13/15
            [1421269200000, 31.65], //01/14/15
            [1421355600000, 31.86], //01/15/15
            [1421442000000, 31.51], //01/16/15
    
            [1421787600000, 31.84], //01/20/15
            [1421874000000, 31.83], //01/21/15
            [1421960400000, 32.30], //01/22/15
            [1422046800000, 32.43], //01/23/15
    
            [1422306000000, 32.91], //01/26/15
            [1422392400000, 32.39], //01/27/15
            [1422478800000, 32.77], //01/28/15
            [1422565200000, 31.84], //01/29/15
            [1422651600000, 31.88], //01/30/15
          ],
          text: 'Alpha'
        },
        {
          values: [
            [1420232400000, 31.46], //01/02/15
    
            [1420491600000, 32.25], //01/05/15
            [1420578000000, 32.57], //01/06/15
            [1420664400000, 32.39], //01/07/15
            [1420750800000, 31.38], //01/08/15
            [1420837200000, 32.53], //01/09/15
    
            [1421096400000, 32.14], //01/12/15
            [1421182800000, 31.33], //01/13/15
            [1421269200000, 31.85], //01/14/15
            [1421355600000, 31.97], //01/15/15
            [1421442000000, 31.65], //01/16/15
    
            [1421787600000, 32.27], //01/20/15
            [1421874000000, 32.08], //01/21/15
            [1421960400000, 32.36], //01/22/15
            [1422046800000, 31.88], //01/23/15
    
            [1422306000000, 32.74], //01/26/15
            [1422392400000, 32.46], //01/27/15
            [1422478800000, 32.49], //01/28/15
            [1422565200000, 32.20], //01/29/15
            [1422651600000, 32.11], //01/30/15
          ],
          text: 'Beta'
        },
        {
          values: [
            [1420232400000, 31.87], //01/02/15
    
            [1420491600000, 31.52], //01/05/15
            [1420578000000, 31.93], //01/06/15
            [1420664400000, 31.98], //01/07/15
            [1420750800000, 32.13], //01/08/15
            [1420837200000, 31.95], //01/09/15
    
            [1421096400000, 31.77], //01/12/15
            [1421182800000, 31.61], //01/13/15
            [1421269200000, 31.41], //01/14/15
            [1421355600000, 31.56], //01/15/15
            [1421442000000, 31.45], //01/16/15
    
            [1421787600000, 31.55], //01/20/15
            [1421874000000, 31.71], //01/21/15
            [1421960400000, 31.96], //01/22/15
            [1422046800000, 32.29], //01/23/15
    
            [1422306000000, 32.40], //01/26/15
            [1422392400000, 32.20], //01/27/15
            [1422478800000, 31.51], //01/28/15
            [1422565200000, 31.38], //01/29/15
            [1422651600000, 31.42], //01/30/15
          ],
          text: 'Gamma'
        }
      ]
    };
    
    zingchart.TOUCHZOOM = 'pinch';
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });