• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            zing-grid[loading] {
                height: 400px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                "type": "area",
                "preview": {
                    "handle-left": {
                        "background-color": "#ff6666",
                        "border-color": "#6666ff",
                        "alpha": 0.8,
                        "border-radius": "15px",
                        "border-width": 2,
                        "height": "50px",
                        "width": "10px"
                    },
                    "handle-right": {
                        "background-color": "#ff6666",
                        "border-color": "#6666ff",
                        "alpha": 0.8,
                        "border-radius": "15px",
                        "border-width": 2,
                        "height": "50px",
                        "width": "10px"
                    },
                    "handle-top": {
                        "background-color": "#6666ff",
                        "border-color": "#ff6666",
                        "alpha": 0.8,
                        "border-radius": "15px",
                        "border-width": 2,
                        "height": "10px",
                        "width": "50px"
                    },
                    "handle-bottom": {
                        "background-color": "#6666ff",
                        "border-color": "#ff6666",
                        "alpha": 0.8,
                        "border-radius": "15px",
                        "border-width": 2,
                        "height": "10px",
                        "width": "50px"
                    }
                },
                "scale-x": {
                    "zooming": true,
                    "zoom-to": [10, 90],
                    "item": {
                        "font-size": 10
                    }
                },
                "scale-y": {
                    "zooming": true,
                    "zoom-to": [50, 300],
                    "values": "0:350:50",
                    "guide": {
                        "line-style": "dotted"
                    },
                    "item": {
                        "font-size": 10
                    }
                },
                "plot": {
                    "line-width": 1,
                    "line-color": "#4d9900",
                    "background-color": "#4d9900",
                    "marker": {
                        "size": 3,
                        "background-color": "#ccccff #6666ff",
                        "border-width": 1,
                        "border-color": "#4d9900"
                    },
                    "tooltip": {
                        "visible": false
                    }
                },
                "crosshair-x": {
                    "plot-label": {
                        "text": "%v"
                    },
                    "scale-label": {
                        "visible": false
                    }
                },
                "crosshair-y": {
                    "type": "multiple",
                    "scale-label": {
                        "visible": false
                    }
                },
                "series": [{
                    "values": [
                        138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
                        136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
                        184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
                        122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
                        108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
                        249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
                        279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
                        225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
                        258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
                        237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
                        234.2
                    ]
                }]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: 400,
                width: "100%"
            });
        </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='myChart'></div>
    	</body>
    </html>
    
          
    var myConfig = {
      "type": "area",
     	"preview": {
     	  "handle-left":{
     	    "background-color":"#ff6666",
     	    "border-color":"#6666ff",
     	    "alpha":0.8,
     	    "border-radius":"15px",
     	    "border-width":2,
     	    "height":"50px",
     	    "width":"10px"
     	  },
     	  "handle-right":{
     	    "background-color":"#ff6666",
     	    "border-color":"#6666ff",
     	    "alpha":0.8,
     	    "border-radius":"15px",
     	    "border-width":2,
     	    "height":"50px",
     	    "width":"10px"
     	  },
     	  "handle-top":{
     	    "background-color":"#6666ff",
     	    "border-color":"#ff6666",
     	    "alpha":0.8,
     	    "border-radius":"15px",
     	    "border-width":2,
     	    "height":"10px",
     	    "width":"50px"
     	  },
     	  "handle-bottom":{
     	    "background-color":"#6666ff",
     	    "border-color":"#ff6666",
     	    "alpha":0.8,
     	    "border-radius":"15px",
     	    "border-width":2,
     	    "height":"10px",
     	    "width":"50px"
     	  }
     	},
      "scale-x": {
        "zooming":true,
        "zoom-to":[10,90],
        "item":{
          "font-size":10
        }
      },
      "scale-y": {
        "zooming":true,
        "zoom-to":[50,300],
        "values": "0:350:50",
        "guide":{
          "line-style":"dotted"
        },
        "item":{
          "font-size":10
        }
      },
      "plot": { 
        "line-width":1,
        "line-color":"#4d9900",
        "background-color":"#4d9900",
        "marker":{
          "size":3,
          "background-color":"#ccccff #6666ff",
          "border-width":1,
          "border-color":"#4d9900"
        },
        "tooltip":{
          "visible":false
        }
      },
      "crosshair-x":{
        "plot-label":{
          "text":"%v"
        },
        "scale-label":{
          "visible":false
        }
      },
      "crosshair-y":{
        "type": "multiple",
        "scale-label":{
          "visible":false
        }
      },
      "series": [
        {
          "values": [
            138.2,196.3,153.6,127.4,114.1,181.4,131.1,170.9,154.4,105.2,
            136.3,180.4,150.5,135.3,130.5,164.3,110.5,127.2,183.9,191.3,
            184.8,165.7,102.4,196.2,179.1,116.8,175.2,137.8,100.9,177.3,
            122.5,123.1,131.7,109.4,167.2,142.7,140.7,165.5,148.6,181.2,
            108.7,132.9,161.9,192.1,134.5,149.4,183.9,124.4,114.4,121.7,
            249.6,224.3,199.3,151.4,112.4,213.5,265.3,239.5,294.6,284.4,
            279.2,273.7,233.7,290.1,228.2,269.3,208.4,224.6,235.1,222.5,
            225.7,257.2,238.1,262.5,229.6,269.7,283.9,236.2,260.8,255.2,
            258.1,219.5,292.4,264.8,251.7,225.9,206.5,203.3,258.2,200.7,
            237.2,208.1,262.7,292.8,249.2,242.6,284.4,246.7,275.9,274.5,
            234.2
          ]
        }
      ]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: 400, 
    	width: "100%"
    });