• Edit
  • Download
    • <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
  <script nonce="undefined" src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    body {
      font-family: Helvetica;
      padding: 20px;
    }

    h3 {
      text-align: center;
    }

    #myChart {
      width: 100%;
      height: 300px;
    }

    #docs {
      display: block;
      margin-top: 20px;
      background-color: #00BAF0;
      color: #FFF;
      padding: 10px 20px;
      text-decoration: none;
      text-align: center;
    }
  </style>
</head>

<body>
  <h3>Double click a plot to toggle plots' visibility</h3>
  <div id="myChart"></div>
  <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Data for the chart
    var myData = {
      type: "bar",
      series: [{
          values: [3, 7, 10, 2, 6, 5]
        },
        {
          values: [5, 6, 2, 10, 7, 3]
        },
        {
          values: [10, 3, 8, 4, 2, 7]
        },
        {
          values: [9, 8, 7, 6, 5, 4]
        },
        {
          values: [1, 2, 4, 6, 8, 10]
        }

      ]
    };

    // Make your chart
    $("#myChart").zingchart({
      data: myData
    });

    // Set a flag for toggling clicks
    var hidden = false;

    // Bind a double click event
    $("#myChart").plotDoubleClick(function() {
      // If plots are hidden, show all plots.
      if (hidden) {
        $(this).showAllPlots();
      }
      // Otherwise, hide all plots but the one clicked.
      else {
        $(this).hideAllPlotsBut({
          plotindex: this.event.plotindex
        });
      }
      // Invert the hidden flag.
      hidden = !hidden;
    });
  </script>
</body>

</html>
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
  <script src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <h3>Double click a plot to toggle plots' visibility</h3>
  <div id="myChart"></div>
  <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
</body>

</html>
    body {
  font-family: Helvetica;
  padding: 20px;
}

h3 {
  text-align: center;
}

#myChart {
  width: 100%;
  height: 300px;
}

#docs {
  display: block;
  margin-top: 20px;
  background-color: #00BAF0;
  color: #FFF;
  padding: 10px 20px;
  text-decoration: none;
  text-align: center;
}
    // Data for the chart
var myData = {
  type: "bar",
  series: [{
      values: [3, 7, 10, 2, 6, 5]
    },
    {
      values: [5, 6, 2, 10, 7, 3]
    },
    {
      values: [10, 3, 8, 4, 2, 7]
    },
    {
      values: [9, 8, 7, 6, 5, 4]
    },
    {
      values: [1, 2, 4, 6, 8, 10]
    }

  ]
};

// Make your chart
$("#myChart").zingchart({
  data: myData
});

// Set a flag for toggling clicks
var hidden = false;

// Bind a double click event
$("#myChart").plotDoubleClick(function() {
  // If plots are hidden, show all plots.
  if (hidden) {
    $(this).showAllPlots();
  }
  // Otherwise, hide all plots but the one clicked.
  else {
    $(this).hideAllPlotsBut({
      plotindex: this.event.plotindex
    });
  }
  // Invert the hidden flag.
  hidden = !hidden;
});