• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <style>
            #table {
                margin-top: 20px;
                padding: 10px;
                background-color: #F7F7F7;
                visibility: hidden;
            }
    
            #table h3 {
                margin: 0px 10px;
                border-bottom: 1px solid black;
            }
    
            .row {
                margin: 5px 0px;
            }
    
            .column {
                background-color: #2196F3;
                border-radius: 4px;
                display: inline-block;
                font-size: 16px;
                color: #FFF;
                padding: 2px 8px;
                margin: 0px 5px;
                width: 28%;
                text-align: center;
            }
        </style>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            zing-grid[loading] {
                height: 400px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <div id="table"></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                type: "bubble",
                backgroundColor: '#F7F7F7',
                title: {
                    text: 'Points Along A Sin Wave'
                },
                plot: {
                    selectionMode: "none", // turn off normal selection
                    marker: {
                        size: 5,
                        borderWidth: 0,
                        alpha: .85,
                    },
                    selectedMarker: {
                        size: 8,
                        borderWidth: 1,
                        borderColor: '#000',
                    },
                    hoverMarker: {
                        size: 7
                    },
                    tooltip: {
                        backgroundColor: '#FFF',
                        fontColor: '#000',
                        fontSize: 14,
                        borderRadius: 4,
                        borderWidth: 1,
                        borderColor: '#000',
                        text: '%t: %v',
                        selectedState: {
                            borderWidth: 2,
                            fontSize: 16
                        }
                    }
                },
                plotarea: {
                    margin: 'dynamic'
                },
                scaleX: {
                    visible: false,
                },
                scaleY: {
                    minValue: -2,
                    maxValue: 2,
                    step: 1,
                    guide: {
                        visible: false
                    },
                    lineColor: '#90CAF9',
                    lineWidth: 2,
                    refLine: {
                        lineColor: '#90CAF9',
                        lineWidth: 2
                    },
                    item: {
                        fontColor: '#90CAF9',
                        fontSize: 14
                    },
                    tick: {
                        lineColor: '#90CAF9'
                    }
                },
                // This styling will be pushed during the next build.
                // You can style the mask background, border and line color
                selectionTool: {
                    mask: {
                        borderWidth: 2,
                        borderColor: 'red',
                        backgroundColor: 'yellow',
                        alpha: .5
                    }
                },
                series: [{
                        // Lets create some random values that look cool
                        values: (function() {
                            var aV = [];
                            var len = 500;
                            var x = 0;
                            while (len--) {
                                x = (Math.random() * 10).toFixed(3) - 0;
                                aV.push([
                                    x,
                                    (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                                ]);
                            }
                            return aV.sort();
                        })(),
                        backgroundColor: '#F48FB1',
                        text: 'Sin Wave One',
                        marker: {
                            backgroundColor: '#F48FB1'
                        }
                    },
                    {
                        // Lets create some random values that look cool
                        values: (function() {
                            var aV = [];
                            var len = 600;
                            var x = 0;
                            while (len--) {
                                x = (Math.random() * 10).toFixed(3) - 0;
                                aV.push([
                                    x,
                                    (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                                ]);
                            }
                            return aV.sort();
                        })(),
                        backgroundColor: '#F48FB1',
                        text: 'Sin Wave Two',
                        marker: {
                            backgroundColor: '#CE93D8'
                        }
                    }
                ]
            };
    
            /* Special callback function for this dragging module.
             * You can use this information to display selected data.
             * You can use this information to update the chart etc...
             */
            zingchart.bind(null, 'zingchart.plugins.selection-tool.selection', function(e) {
                var table = document.getElementById('table');
                var header = document.createElement('h3');
                var Column = function() {
                    var column = document.createElement('div');
                    column.classList.add('column');
                    return column;
                }
    
                var Row = function() {
                    var row = document.createElement('div');
                    row.classList.add('row');
                    return row;
                }
    
                // clear table and set header
                table.innerHTML = '';
                header.innerHTML = 'Selected State Logistics';
                table.appendChild(header);
    
                // define variables for creating grid
                var totalMinValue = 10000;
                var totalMaxValue = 0;
                var sumValues = 0;
                var row;
                var column1;
                var column2;
                var column3;
    
                // loop through plots and grab information
                for (var key in e.nodes) {
    
                    // Get global min and max values from plots
                    if (e.nodes[key].value < totalMinValue)
                        totalMinValue = e.nodes[key].value;
    
                    if (e.nodes[key].value > totalMaxValue)
                        totalMaxValue = e.nodes[key].value;
    
                    sumValues += e.nodes[key].value;
                }
    
                // append a new total value row
                row = Row();
                column1 = Column();
                column2 = Column();
                column3 = Column();
                column1.innerHTML = 'SumValues: ' + sumValues.toFixed(3);
                column2.innerHTML = 'MinValue: ' + totalMinValue.toFixed(3);
                column3.innerHTML = 'MaxValue: ' + totalMaxValue.toFixed(3);
                row.appendChild(column1);
                row.appendChild(column2);
                row.appendChild(column3);
                table.appendChild(row);
    
                // render the table visible
                table.style.visibility = 'visible';
            });
    
    
            /* Lets create a place to store our function. Typically it is not recomended
             * to modify the zingchart object. This is for advanced users. It is good
             * practice to keep all your charting stuff together, in this case your 
             * custom functions within the zingchart object! This will also help with
             * name collisions within the window object.
             *
             * BE WARNED: you can overwrite stuff in the zingchart object if you are
             * not careful. This will mess stuff up.
             */
            zingchart.insert_company_name_customFncs = {};
            zingchart.insert_company_name_customFncs.clearSelection = function(e) {
                zingchart.exec(e.id, 'clearselection');
            }
    
            // Load the selection-tool and render the chart once the module is loaded
            zingchart.loadModules('selection-tool', function() {
                zingchart.render({
                    id: 'myChart',
                    // defined data this way since context menu needs to be defined in root (above graphset)
                    data: {
                        gui: {
                            contextMenu: {
                                customItems: [{
                                    text: 'Clear Selection',
                                    function: 'zingchart.insert_company_name_customFncs.clearSelection()',
                                    id: 'clearSelection'
                                }]
                            }
                        },
                        graphset: [myConfig]
                    },
                    height: 400,
                    width: '100%',
                    modules: 'selection-tool'
                });
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	    <style>
            #table {
                margin-top:20px;
                padding:10px;
                background-color:#F7F7F7;
                visibility:hidden;
            }
            #table h3 {
                margin:0px 10px;
                border-bottom:1px solid black;
            }
            .row{
                margin:5px 0px;
            }
            .column {
                background-color:#2196F3;
                border-radius:4px;
                display:inline-block;
                font-size:16px;
                color:#FFF;
                padding:2px 8px;
                margin:0px 5px;
                width:28%;
                text-align:center;
            }
        </style>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
        <div id='myChart'></div>
        <div id="table"></div>
    	</body>
    </html>
    
          
    var myConfig = {
        type: "bubble",
        backgroundColor:'#F7F7F7',
        title:{
            text:'Points Along A Sin Wave'
        },
        plot:{
            selectionMode:"none", // turn off normal selection
            marker:{
                size:5,
                borderWidth:0,
                alpha:.85,
            },
            selectedMarker:{
                size:8,
                borderWidth: 1,
                borderColor: '#000',
            },
            hoverMarker:{
                size:7
            },
            tooltip:{
                backgroundColor:'#FFF',
                fontColor:'#000',
                fontSize:14,
                borderRadius:4,
                borderWidth:1,
                borderColor:'#000',
                text:'%t: %v',
                selectedState:{
                  borderWidth: 2,
                  fontSize: 16
                }
            }
        },
        plotarea:{
            margin:'dynamic'
        },
        scaleX:{
            visible:false,
        },
        scaleY:{
            minValue:-2,
            maxValue:2,
            step:1,
            guide:{
                visible:false
            },
            lineColor:'#90CAF9',
            lineWidth:2,
            refLine:{
                lineColor:'#90CAF9',
                lineWidth:2
            },
            item:{
                fontColor:'#90CAF9',
                fontSize:14
            },
            tick:{
                lineColor:'#90CAF9'
            }
        },
        // This styling will be pushed during the next build.
        // You can style the mask background, border and line color
        selectionTool:{
            mask:{
                borderWidth:2,
                borderColor:'red',
                backgroundColor:'yellow',
                alpha:.5
            }
        },
        series : [
            {
                // Lets create some random values that look cool
                values : (function () {
                    var aV = [];
                    var len = 500;
                    var x = 0;
                    while (len--) {
                        x = (Math.random() * 10).toFixed(3) - 0;
                        aV.push([
                            x,
                            (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                        ]);
                    }
                    return aV.sort();
                })(),
                backgroundColor:'#F48FB1',
                text:'Sin Wave One',
                marker:{
                    backgroundColor:'#F48FB1'
                }
            },
            {
                // Lets create some random values that look cool
                values : (function () {
                    var aV = [];
                    var len = 600;
                    var x = 0;
                    while (len--) {
                        x = (Math.random() * 10).toFixed(3) - 0;
                        aV.push([
                            x,
                            (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                        ]);
                    }
                    return aV.sort();
                })(),
                backgroundColor:'#F48FB1',
                text:'Sin Wave Two',
                marker:{
                    backgroundColor:'#CE93D8'
                }
            }
        ]
    };
    
    /* Special callback function for this dragging module.
     * You can use this information to display selected data.
     * You can use this information to update the chart etc...
     */
    zingchart.bind(null, 'zingchart.plugins.selection-tool.selection', function(e) {
        var table = document.getElementById('table');
        var header = document.createElement('h3');
        var Column = function() {
            var column = document.createElement('div');
            column.classList.add('column');
            return column;
        }
    
        var Row = function() {
            var row = document.createElement('div');
            row.classList.add('row');
            return row;
        }
    
        // clear table and set header
        table.innerHTML = '';
        header.innerHTML = 'Selected State Logistics';
        table.appendChild(header);
    
        // define variables for creating grid
        var totalMinValue = 10000;
        var totalMaxValue = 0;
        var sumValues = 0;
        var row;
        var column1;
        var column2;
        var column3;
    
        // loop through plots and grab information
        for (var key in e.nodes) {
    
            // Get global min and max values from plots
            if (e.nodes[key].value < totalMinValue)
                totalMinValue = e.nodes[key].value;
    
            if (e.nodes[key].value > totalMaxValue)
                totalMaxValue = e.nodes[key].value;
    
            sumValues += e.nodes[key].value;
        }
    
        // append a new total value row
        row = Row();
        column1 = Column();
        column2 = Column();
        column3 = Column();
        column1.innerHTML = 'SumValues: ' + sumValues.toFixed(3);
        column2.innerHTML = 'MinValue: ' + totalMinValue.toFixed(3);
        column3.innerHTML = 'MaxValue: ' + totalMaxValue.toFixed(3);
        row.appendChild(column1);
        row.appendChild(column2);
        row.appendChild(column3);
        table.appendChild(row);
    
        // render the table visible
        table.style.visibility = 'visible';
    });
    
    
    /* Lets create a place to store our function. Typically it is not recomended
     * to modify the zingchart object. This is for advanced users. It is good
     * practice to keep all your charting stuff together, in this case your 
     * custom functions within the zingchart object! This will also help with
     * name collisions within the window object.
     *
     * BE WARNED: you can overwrite stuff in the zingchart object if you are
     * not careful. This will mess stuff up.
     */
    zingchart.insert_company_name_customFncs = {};
    zingchart.insert_company_name_customFncs.clearSelection = function(e) {
      zingchart.exec(e.id,'clearselection');
    }
    
    // Load the selection-tool and render the chart once the module is loaded
    zingchart.loadModules('selection-tool', function() {
        zingchart.render({
            id : 'myChart',
            // defined data this way since context menu needs to be defined in root (above graphset)
            data : { 
              gui:{
                contextMenu:{
                  customItems: [
                    {
                      text: 'Clear Selection',
                      function: 'zingchart.insert_company_name_customFncs.clearSelection()',
                      id: 'clearSelection'
                    }
                  ]
                }
              },
              graphset:[myConfig]
            },
            height: 400,
            width: '100%',
            modules:'selection-tool'
        });
    });