• 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>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #c1,
    #c2,
    #c3 {
      height: 100%;
      width: 300px;
      min-height: 150px;
      float: left;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div id="c1"></div>
  <div id="c2"></div>
  <div id="c3"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var json1 = {
      type: "line",
      plotarea: {
        margin: "dynamic"
      },
      scaleX: {
        zooming: true
      },
      crosshairX: {},
      series: [{
          values: [4, 7, 9, 3, 1, 6]
        },
        {
          values: [3, 1, 6, 4, 7, 9]
        }
      ]
    };
    zingchart.render({
      id: 'c1',
      width: 300,
      height: 300,
      data: json1
    });

    var json2 = {
      type: "area",
      plotarea: {
        margin: "dynamic"
      },
      scaleX: {
        zooming: true
      },
      crosshairX: {},
      series: [{
          values: [14, 17, 19, 13, 11, 16]
        },
        {
          values: [13, 11, 16, 14, 17, 19]
        }
      ]
    };
    zingchart.render({
      id: 'c2',
      width: 300,
      height: 300,
      data: json2
    });

    var json3 = {
      type: "vbar",
      plotarea: {
        margin: "dynamic"
      },
      scaleX: {
        zooming: true
      },
      crosshairX: {},
      series: [{
          values: [24, 27, 29, 23, 21, 26]
        },
        {
          values: [23, 21, 26, 24, 27, 29]
        }
      ]
    };
    zingchart.render({
      id: 'c3',
      width: 300,
      height: 300,
      data: json3
    });

    zingchart.bind(null, 'guide_mouseout', function(p) {
      var id1, id2;
      switch (p.id) {
        case 'c1':
          id1 = 'c2';
          id2 = 'c3';
          break;
        case 'c2':
          id1 = 'c1';
          id2 = 'c3';
          break;
        case 'c3':
          id1 = 'c1';
          id2 = 'c2';
          break;
      }
      zingchart.exec(id1, 'resetguide', {});
      zingchart.exec(id2, 'resetguide', {});
    });

    zingchart.bind(null, 'guide_mousemove', function(p) {
      //p.ev.fromAPI very important
      if (p.ev.fromAPI) {
        return;
      }
      var id1, id2;
      switch (p.id) {
        case 'c1':
          id1 = 'c2';
          id2 = 'c3';
          break;
        case 'c2':
          id1 = 'c1';
          id2 = 'c3';
          break;
        case 'c3':
          id1 = 'c1';
          id2 = 'c2';
          break;
      }
      var kv = p.items[0].keyvalue;
      zingchart.exec(id1, 'setguide', {
        keyvalue: kv
      });
      zingchart.exec(id2, 'setguide', {
        keyvalue: kv
      });
    });
  </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="c1"></div>
  <div id="c2"></div>
  <div id="c3"></div>
</body>

</html>
    html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#c1,
#c2,
#c3 {
  height: 100%;
  width: 300px;
  min-height: 150px;
  float: left;
  display: inline-block;
}
    var json1 = {
  type: "line",
  plotarea: {
    margin: "dynamic"
  },
  scaleX: {
    zooming: true
  },
  crosshairX: {},
  series: [{
      values: [4, 7, 9, 3, 1, 6]
    },
    {
      values: [3, 1, 6, 4, 7, 9]
    }
  ]
};
zingchart.render({
  id: 'c1',
  width: 300,
  height: 300,
  data: json1
});

var json2 = {
  type: "area",
  plotarea: {
    margin: "dynamic"
  },
  scaleX: {
    zooming: true
  },
  crosshairX: {},
  series: [{
      values: [14, 17, 19, 13, 11, 16]
    },
    {
      values: [13, 11, 16, 14, 17, 19]
    }
  ]
};
zingchart.render({
  id: 'c2',
  width: 300,
  height: 300,
  data: json2
});

var json3 = {
  type: "vbar",
  plotarea: {
    margin: "dynamic"
  },
  scaleX: {
    zooming: true
  },
  crosshairX: {},
  series: [{
      values: [24, 27, 29, 23, 21, 26]
    },
    {
      values: [23, 21, 26, 24, 27, 29]
    }
  ]
};
zingchart.render({
  id: 'c3',
  width: 300,
  height: 300,
  data: json3
});

zingchart.bind(null, 'guide_mouseout', function(p) {
  var id1, id2;
  switch (p.id) {
    case 'c1':
      id1 = 'c2';
      id2 = 'c3';
      break;
    case 'c2':
      id1 = 'c1';
      id2 = 'c3';
      break;
    case 'c3':
      id1 = 'c1';
      id2 = 'c2';
      break;
  }
  zingchart.exec(id1, 'resetguide', {});
  zingchart.exec(id2, 'resetguide', {});
});

zingchart.bind(null, 'guide_mousemove', function(p) {
  //p.ev.fromAPI very important
  if (p.ev.fromAPI) {
    return;
  }
  var id1, id2;
  switch (p.id) {
    case 'c1':
      id1 = 'c2';
      id2 = 'c3';
      break;
    case 'c2':
      id1 = 'c1';
      id2 = 'c3';
      break;
    case 'c3':
      id1 = 'c1';
      id2 = 'c2';
      break;
  }
  var kv = p.items[0].keyvalue;
  zingchart.exec(id1, 'setguide', {
    keyvalue: kv
  });
  zingchart.exec(id2, 'setguide', {
    keyvalue: kv
  });
});