• 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: "scatter",
          utc: true,
          labels: [{ //ok. Defaults to nearest tick. Not actual timestamp value
              text: 'timestamp hook',
              hook: 'scale:value=1420501300000;',
              backgroundColor: '#e91e63'
            },
            {
              text: 'scale/index hook',
              hook: 'scale:name=scale-y,index=3',
              backgroundColor: '#2196f3'
            },
            {
              text: 'scale/value hook',
              hook: 'scale:name=scale-y,value=150',
              backgroundColor: '#2196f3'
            },
            {
              text: 'scale/index hook',
              hook: 'scale:index=3',
              backgroundColor: '#4caf50'
            }
          ],
          plotarea: {
            margin: 'dynamic'
          },
          scaleY: {
            label: {
              text: "Sales"
            },
            format: '$%v',
          },
          scaleX: {
            label: {
              text: "time"
            },
            minValue: 1420070400000,
            step: 86400000,
            transform: {
              type: "date",
              all: "%h:%i:%s<br>%d %M, %Y",
              guide: {
                "visible": false
              },
              item: {
                "visible": false
              }
            }
          },
          tooltip: {
            text: '%t <br> Sales: $%v'
          },
          series: [{
              values: [
                [1420070400000, 35],
                [1420156800000, 42],
                [1420243200000, 67],
                [1420329600000, 89],
                [1420416000000, 25],
                [1420502400000, 50],
                [1420588800000, 75]
              ],
              text: 'Department 1'
            },
            {
              values: [
                [1420070400000, 135],
                [1420156800000, 142],
                [1420243200000, 167],
                [1420329600000, 189],
                [1420416000000, 125],
                [1420502400000, 150],
                [1420588800000, 175]
              ],
              text: 'Department 2'
            }
          ]
        };
    
    
    
        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",
      utc: true,
      labels: [{ //ok. Defaults to nearest tick. Not actual timestamp value
          text: 'timestamp hook',
          hook: 'scale:value=1420501300000;',
          backgroundColor: '#e91e63'
        },
        {
          text: 'scale/index hook',
          hook: 'scale:name=scale-y,index=3',
          backgroundColor: '#2196f3'
        },
        {
          text: 'scale/value hook',
          hook: 'scale:name=scale-y,value=150',
          backgroundColor: '#2196f3'
        },
        {
          text: 'scale/index hook',
          hook: 'scale:index=3',
          backgroundColor: '#4caf50'
        }
      ],
      plotarea: {
        margin: 'dynamic'
      },
      scaleY: {
        label: {
          text: "Sales"
        },
        format: '$%v',
      },
      scaleX: {
        label: {
          text: "time"
        },
        minValue: 1420070400000,
        step: 86400000,
        transform: {
          type: "date",
          all: "%h:%i:%s<br>%d %M, %Y",
          guide: {
            "visible": false
          },
          item: {
            "visible": false
          }
        }
      },
      tooltip: {
        text: '%t <br> Sales: $%v'
      },
      series: [{
          values: [
            [1420070400000, 35],
            [1420156800000, 42],
            [1420243200000, 67],
            [1420329600000, 89],
            [1420416000000, 25],
            [1420502400000, 50],
            [1420588800000, 75]
          ],
          text: 'Department 1'
        },
        {
          values: [
            [1420070400000, 135],
            [1420156800000, 142],
            [1420243200000, 167],
            [1420329600000, 189],
            [1420416000000, 125],
            [1420502400000, 150],
            [1420588800000, 175]
          ],
          text: 'Department 2'
        }
      ]
    };
    
    
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });