• 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 myConfig9 = {
          "type": "scatter",
          "utc": true,
          "timezone": -8,
          "scrollX": {},
          "scale-x": {
            "zooming": true,
            "label": {
              "text": "Scatter Chart with a Time-Series Scale"
            },
            "min-value": 1425196800000,
            "step": "2day",
            "transform": {
              "type": "date",
              "all": "%m/%d/%y"
            }
          },
          "series": [{
              "values": [
                [1425225600000, 9],
                [1425312000000, 15],
                [1425398400000, 21],
                [1425484800000, 30],
                [1425571200000, 40],
                [1425657600000, 59],
                [1425744000000, 60],
                [1425826800000, 75],
                [1425913200000, 81],
                [1425999600000, 99]
              ],
              "marker": {
                "type": "star4"
              }
            },
            {
              "values": [
                [1425243600000, 3],
                [1425322800000, 13],
                [1425391200000, 25],
                [1425470400000, 35],
                [1425574800000, 41],
                [1425697200000, 57],
                [1425772800000, 61],
                [1425866400000, 70],
                [1425938400000, 82],
                [1425985200000, 95]
              ],
              "marker": {
                "type": "triangle"
              }
            },
            {
              "values": [
                [1425279600000, 9],
                [1425301200000, 21],
                [1425430800000, 29],
                [1425488400000, 33],
                [1425614400000, 39],
                [1425708000000, 51],
                [1425718800000, 64],
                [1425859200000, 70],
                [1425931200000, 75],
                [1426042800000, 93]
              ],
              "marker": {
                "type": "rpoly4"
              }
            },
            {
              "values": [
                [1425200400000, 11],
                [1425358800000, 15],
                [1425441600000, 24],
                [1425535200000, 29],
                [1425574800000, 30],
                [1425646800000, 35],
                [1425754800000, 67],
                [1425852000000, 70],
                [1425888000000, 71],
                [1426014000000, 90]
              ],
              "marker": {
                "type": "gear8"
              }
            },
            {
              "values": [
                [1425236400000, 5],
                [1425337200000, 5],
                [1425384000000, 10],
                [1425488400000, 30],
                [1425610800000, 45],
                [1425686400000, 74],
                [1425783600000, 50],
                [1425816000000, 56],
                [1425898800000, 61],
                [1426028400000, 71]
              ],
              "marker": {
                "type": "cross"
              }
            },
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig9,
          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 myConfig9 = {
      "type": "scatter",
      "utc": true,
      "timezone": -8,
      "scrollX": {},
      "scale-x": {
        "zooming": true,
        "label": {
          "text": "Scatter Chart with a Time-Series Scale"
        },
        "min-value": 1425196800000,
        "step": "2day",
        "transform": {
          "type": "date",
          "all": "%m/%d/%y"
        }
      },
      "series": [{
          "values": [
            [1425225600000, 9],
            [1425312000000, 15],
            [1425398400000, 21],
            [1425484800000, 30],
            [1425571200000, 40],
            [1425657600000, 59],
            [1425744000000, 60],
            [1425826800000, 75],
            [1425913200000, 81],
            [1425999600000, 99]
          ],
          "marker": {
            "type": "star4"
          }
        },
        {
          "values": [
            [1425243600000, 3],
            [1425322800000, 13],
            [1425391200000, 25],
            [1425470400000, 35],
            [1425574800000, 41],
            [1425697200000, 57],
            [1425772800000, 61],
            [1425866400000, 70],
            [1425938400000, 82],
            [1425985200000, 95]
          ],
          "marker": {
            "type": "triangle"
          }
        },
        {
          "values": [
            [1425279600000, 9],
            [1425301200000, 21],
            [1425430800000, 29],
            [1425488400000, 33],
            [1425614400000, 39],
            [1425708000000, 51],
            [1425718800000, 64],
            [1425859200000, 70],
            [1425931200000, 75],
            [1426042800000, 93]
          ],
          "marker": {
            "type": "rpoly4"
          }
        },
        {
          "values": [
            [1425200400000, 11],
            [1425358800000, 15],
            [1425441600000, 24],
            [1425535200000, 29],
            [1425574800000, 30],
            [1425646800000, 35],
            [1425754800000, 67],
            [1425852000000, 70],
            [1425888000000, 71],
            [1426014000000, 90]
          ],
          "marker": {
            "type": "gear8"
          }
        },
        {
          "values": [
            [1425236400000, 5],
            [1425337200000, 5],
            [1425384000000, 10],
            [1425488400000, 30],
            [1425610800000, 45],
            [1425686400000, 74],
            [1425783600000, 50],
            [1425816000000, 56],
            [1425898800000, 61],
            [1426028400000, 71]
          ],
          "marker": {
            "type": "cross"
          }
        },
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig9,
      height: 400,
      width: "100%"
    });