• Edit
  • Download
  • <!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>
        <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;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </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;
    });