• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingGrid: Blank Grid</title>
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
    
            #myChart {
                margin: 0 auto;
                height: 380px;
                width: 98%;
                box-shadow: 5px 5px 5px #eee;
                background-color: #fff;
                border: 1px solid #eee;
                display: flex;
                flex-flow: column wrap;
            }
    
            .controls--container {
                display: flex;
                align-items: center;
                justify-content: center;
            }
    
            .controls--container button {
                margin: 40px;
                padding: 15px;
                background-color: #FF4081;
                border: none;
                color: #fff;
                box-shadow: 5px 5px 5px #eee;
                font-size: 16px;
                font-family: Roboto;
                cursor: pointer;
                transition: .1s;
            }
    
            .controls--container button:hover {
                opacity: .9;
            }
    
            /*button movement*/
            .controls--container button:active {
                border-width: 0 0 2px 0;
                transform: translateY(8px);
                opacity: 0.9;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 380px;
            }
        </style>
    </head>
    
    <body>
        <!-- CHART CONTAINER -->
        <div id="myChart">
            <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
        </div>
        <div class="controls--container">
            <button id="get">get</button>
            <button id="set">Set</button>
            <span id="output">Interval is: 500</span>
        </div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; //real-time feed random math function
            function realTimeFeed(callback) {
                var tick = {};
                tick.plot0 = parseInt(10 + 90 * Math.random(), 10);
                tick.plot1 = parseInt(10 + 90 * Math.random(), 10);
                callback(JSON.stringify(tick));
            };
    
            // define top level feed control functions
            function getInterval() {
                let interval = zingchart.exec('myChart', 'getinterval');
                output.textContent = `Interval is: ${interval}`;
            }
    
            function setInterval() {
                let interval = Math.floor(Math.random() * (1000 - 50)) + 50;
                zingchart.exec('myChart', 'setinterval', {
                    interval: interval,
                    update: false
                });
                output.textContent = `Interval is: ${interval}`;
            }
    
    
            // window.onload event for Javascript to run after HTML
            // because this Javascript is injected into the document head
            window.addEventListener('load', () => {
                // Javascript code to execute after DOM content
    
                //clear start stop click events
                document.getElementById('get').addEventListener('click', getInterval);
                document.getElementById('set').addEventListener('click', setInterval);
    
                // full ZingChart schema can be found here:
                // https://www.zingchart.com/docs/api/json-configuration/
                const myConfig = {
                    //chart styling
                    type: 'line',
                    globals: {
                        fontFamily: 'Roboto',
                    },
                    backgroundColor: '#fff',
                    title: {
                        backgroundColor: '#1565C0',
                        text: 'Real-Time Line Chart',
                        color: '#fff',
                        height: '30x',
                    },
                    plotarea: {
                        marginTop: '80px'
                    },
                    crosshairX: {
                        lineWidth: 4,
                        lineStyle: 'dashed',
                        lineColor: '#424242',
                        marker: {
                            visible: true,
                            size: 9
                        },
                        plotLabel: {
                            backgroundColor: '#fff',
                            borderColor: '#e3e3e3',
                            borderRadius: 5,
                            padding: 15,
                            fontSize: 15,
                            shadow: true,
                            shadowAlpha: 0.2,
                            shadowBlur: 5,
                            shadowDistance: 4,
                        },
                        scaleLabel: {
                            backgroundColor: '#424242',
                            padding: 5
                        }
                    },
                    scaleY: {
                        guide: {
                            visible: false
                        },
                        values: '0:100:25'
                    },
                    tooltip: {
                        visible: false
                    },
                    //real-time feed
                    refresh: {
                        type: 'feed',
                        transport: 'js',
                        url: 'realTimeFeed()',
                        interval: 500,
                    },
                    plot: {
                        shadow: 1,
                        shadowColor: '#eee',
                        shadowDistance: '10px',
                        lineWidth: 5,
                        hoverState: {
                            visible: false
                        },
                        marker: {
                            visible: false
                        },
                        aspect: 'spline'
                    },
                    series: [{
                        values: [],
                        lineColor: '#2196F3',
                        text: 'Blue Line'
                    }, {
                        values: [],
                        lineColor: '#ff9800',
                        text: 'Orange Line'
                    }]
                };
    
                // render chart with width and height to
                // fill the parent container CSS dimensions
                zingchart.render({
                    id: 'myChart',
                    data: myConfig,
                    height: '100%',
                    width: '100%',
                });
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>ZingGrid: Blank Grid</title>
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      </head>
      <body>
        <!-- CHART CONTAINER -->
        <div id="myChart">
          <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
        </div>
        <div class="controls--container">
           <button id="get">get</button>
           <button id="set">Set</button>
           <span id="output">Interval is: 500</span>
        </div>
      </body>
    </html>
    html, body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    
    #myChart {
      margin: 0 auto;
      height: 380px;
      width: 98%;
      box-shadow: 5px 5px 5px #eee;
      background-color: #fff;
      border: 1px solid #eee;  
      display: flex;
      flex-flow: column wrap;
    }
     
    .controls--container {
      display: flex;
      align-items: center;
      justify-content: center;
    }
     
    .controls--container button {
      margin: 40px;
      padding: 15px;
      background-color: #FF4081;
      border: none;
      color: #fff;
      box-shadow: 5px 5px 5px #eee;
      font-size: 16px;
      font-family: Roboto;
      cursor: pointer;
      transition: .1s;
    }
     
    .controls--container button:hover {
      opacity: .9;
    }
     
    /*button movement*/
    .controls--container button:active {
      border-width: 0 0 2px 0;
      transform: translateY(8px);
      opacity: 0.9;
    }
    
    .zc-ref { display:none; }
    //real-time feed random math function
    function realTimeFeed(callback) {
      var tick = {};
      tick.plot0 = parseInt(10 + 90 * Math.random(), 10);
      tick.plot1 = parseInt(10 + 90 * Math.random(), 10);
      callback(JSON.stringify(tick));
    };
    
    // define top level feed control functions
    function getInterval() {
      let interval = zingchart.exec('myChart', 'getinterval');
      output.textContent = `Interval is: ${interval}`;
    }
    function setInterval() {
      let interval=Math.floor(Math.random() * (1000 - 50)) + 50;
      zingchart.exec('myChart', 'setinterval', {
        interval: interval,
        update: false
      });
      output.textContent = `Interval is: ${interval}`;
    }
    
    
    // window.onload event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
      
      //clear start stop click events
      document.getElementById('get').addEventListener('click', getInterval);
      document.getElementById('set').addEventListener('click', setInterval);
     
      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      const myConfig = {
        //chart styling
        type: 'line',
        globals: {
          fontFamily: 'Roboto',
        },
        backgroundColor: '#fff',
        title: {
          backgroundColor: '#1565C0',
          text: 'Real-Time Line Chart',
          color: '#fff',
          height: '30x',
        },
        plotarea: {
          marginTop: '80px'
        },
        crosshairX: {
          lineWidth: 4,
          lineStyle: 'dashed',
          lineColor: '#424242',
          marker : {
            visible : true,
            size : 9
          },
          plotLabel: {
            backgroundColor: '#fff',
            borderColor: '#e3e3e3',
            borderRadius:5,
            padding:15,
            fontSize: 15,
            shadow : true,
            shadowAlpha : 0.2,
            shadowBlur : 5,
            shadowDistance : 4,
          },
          scaleLabel: {
            backgroundColor: '#424242',
            padding:5
          }
        },
        scaleY: {
          guide: {
            visible: false
          },
          values: '0:100:25'
        },
        tooltip: {
          visible: false
        },
        //real-time feed
        refresh: {
          type: 'feed',
          transport: 'js',
          url: 'realTimeFeed()',
          interval: 500,
        },
        plot: {
          shadow: 1,
          shadowColor: '#eee',
          shadowDistance: '10px',
          lineWidth:5,
          hoverState: {visible: false},
          marker:{ visible: false},
          aspect:'spline'
        },
        series: [{
          values: [],
          lineColor: '#2196F3',
          text: 'Blue Line'
        },{
          values: [],
          lineColor: '#ff9800',
          text: 'Orange Line'
        }]
      };
    
      // render chart with width and height to
      // fill the parent container CSS dimensions
      zingchart.render({ 
        id: 'myChart', 
        data: myConfig, 
        height: '100%', 
        width: '100%',
      }); 
    });