• 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 = {
      graphset: [{
          type: "line",
          backgroundColor: "#fff #faf7f7",
          title: {
            text: "Shared Zooming and Preview"
          },
          height: "45%",
          width: "100%",
          x: 0,
          y: 0,
          plotarea: {
            margin: "45px 20px 10px 50px"
          },
          scaleX: {
            visible: false,
            zooming: true
          },
          scaleY: {
            values: "0:100:20"
          },
          zoom: {
            shared: true
          },
          crosshairX: {
            shared: true,
            scaleLabel: {
              visible: false
            }
          },
          tooltip: {
            visible: false
          },
          series: [{
            values: [4, 6, 56, 29, 36, 11, 15, 70, 10, 43, 70, 68, 51, 28, 47, 3, 50, 20, 64, 68, 69, 70, 36, 24, 49, 45, 30, 59, 3, 9, 34, 30, 10, 69, 24, 54, 36, 63, 70, 14, 52, 22, 1, 2, 18, 57, 12, 9, 40, 23, 7, 43, 74, 21, 6, 4],

          }]
        },
        {
          type: "line",
          backgroundColor: "#fff #faf7f7",
          height: "55%",
          width: "100%",
          x: 0,
          y: "45%",
          plotarea: {
            margin: "10px 20px 115px 50px"
          },
          scaleX: {
            zooming: true,
            maxItems: 10
          },
          scaleY: {
            values: "0:100:20"
          },
          zoom: {
            shared: true
          },
          crosshairX: {
            shared: true
          },
          tooltip: {
            visible: false
          },
          preview: {
            margin: "258px 20px 20px 48px"
          },
          scrollX: {},
          series: [{
            values: [35, 42, 67, 89, 25, 34, 67, 85, 35, 42, 67, 89, 25, 34, 67, 85, 35, 42, 67, 89, 25, 34, 67, 85, 35, 42, 67, 89, 25, 34, 67, 85, 35, 42, 67, 89, 25, 34, 67, 85, 35, 42, 67, 89, 25, 34, 67, 85, 35, 42, 67, 89, 25, 34, 67, 85]
          }]
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 600,
      width: 600
    });
  </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 = {
  graphset: [{
      type: "line",
      backgroundColor: "#fff #faf7f7",
      title: {
        text: "Shared Zooming and Preview"
      },
      height: "45%",
      width: "100%",
      x: 0,
      y: 0,
      plotarea: {
        margin: "45px 20px 10px 50px"
      },
      scaleX: {
        visible: false,
        zooming: true
      },
      scaleY: {
        values: "0:100:20"
      },
      zoom: {
        shared: true
      },
      crosshairX: {
        shared: true,
        scaleLabel: {
          visible: false
        }
      },
      tooltip: {
        visible: false
      },
      series: [{
        values: [4, 6, 56, 29, 36, 11, 15, 70, 10, 43, 70, 68, 51, 28, 47, 3, 50, 20, 64, 68, 69, 70, 36, 24, 49, 45, 30, 59, 3, 9, 34, 30, 10, 69, 24, 54, 36, 63, 70, 14, 52, 22, 1, 2, 18, 57, 12, 9, 40, 23, 7, 43, 74, 21, 6, 4],

      }]
    },
    {
      type: "line",
      backgroundColor: "#fff #faf7f7",
      height: "55%",
      width: "100%",
      x: 0,
      y: "45%",
      plotarea: {
        margin: "10px 20px 115px 50px"
      },
      scaleX: {
        zooming: true,
        maxItems: 10
      },
      scaleY: {
        values: "0:100:20"
      },
      zoom: {
        shared: true
      },
      crosshairX: {
        shared: true
      },
      tooltip: {
        visible: false
      },
      preview: {
        margin: "258px 20px 20px 48px"
      },
      scrollX: {},
      series: [{
        values: [35, 42, 67, 89, 25, 34, 67, 85, 35, 42, 67, 89, 25, 34, 67, 85, 35, 42, 67, 89, 25, 34, 67, 85, 35, 42, 67, 89, 25, 34, 67, 85, 35, 42, 67, 89, 25, 34, 67, 85, 35, 42, 67, 89, 25, 34, 67, 85, 35, 42, 67, 89, 25, 34, 67, 85]
      }]
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 600,
  width: 600
});