• 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: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                "background-color": "transparent",
                "gui": {
                    "contextMenu": {
                        "visible": true
                    }
                },
                "globals": {
                    "font-family": "Open Sans",
                    "thousands-separator": ","
                },
                "graphset": [{
                    "type": "mixed",
                    "crosshair-x": {
                        "line-style": "dashed",
                        "line-color": "#787878",
                        "plot-label": {
                            "multiple": true,
                            "text-align": "left",
                            "font-size": "13px",
                            "background-color": "#fff",
                            "font-color": "#585858",
                            "padding": "8",
                            "border-color": "#d8d8d8",
                            "border-width": 1,
                            "border-radius": 2,
                            "callout": false,
                            "alpha": 0.9,
                            "visible": true
                        },
                        "scale-label": {
                            "background-color": "#787878",
                            "font-color": "#fff",
                            "font-size": "11px",
                            "callout": false,
                            "offset-y": "10px",
                            "visible": true
                        }
                    },
                    "title": {
                        "text": "Mixed Graph",
                        "font-size": "13px",
                        "font-weight": "bold",
                        "font-color": "#676a6c",
                    },
                    "plot": {
                        "bar-width": "60%",
                        "bars-overlap": "60%",
                        "font-weight": "normal",
                        "stacked": false,
                        "preview": "false",
                        "selection-mode": "graph",
                        "background-mode": "graph",
                        "selected-state": {
                            "border-width": "2px",
                            "border-color": "#000"
                        },
                        "background-state": {
                            "alpha": "0.3"
                        },
                        "background-marker": {
                            "alpha": "0.3"
                        },
                        "animation": {
                            "delay": 0,
                            "effect": 4
                        },
                        "hover-state": {
                            "border-color": "#000",
                            "border-width": 1,
                            "visible": true
                        }
                    },
                    "zoom": {
                        "shared": true,
                        "label": {
                            "visible": true,
                            "font-color": "#3399ff",
                            "font-family": "Georgia",
                            "font-size": 10,
                            "font-style": "normal",
                            "font-weight": "normal",
                            "background-color": "white",
                            "border-width": 1,
                            "border-color": "#3399ff",
                            "alpha": 0.7,
                            "padding": "5%"
                        }
                    },
                    "preview": {
                        "x": "10%",
                        "y": "84%",
                        "width": "96%",
                        "height": "4%",
                        "background-color": "#f4f4f4",
                        "border-width": 0,
                        "mask": {
                            "background-color": "#ccc",
                            "alpha": 1
                        },
                        "handle": {
                            "width": "16px",
                            "height": "16px",
                            "border-width": "1",
                            "border-radius": 50,
                            "border-color": "#ccc",
                            "background-color": "#fff"
                        }
                    },
                    "legend": {
                        "background-color": "none",
                        "border-width": 0,
                        "shadow": false,
                        "layout": "float",
                        "margin": "0px 2% auto auto",
                        "item": {
                            "font-color": "#585858",
                            "font-size": "11px"
                        },
                        "marker": {
                            "width": "10px",
                            "height": "10px",
                            "border-radius": 1,
                            "border-width": 0
                        },
                        "border-color": "none",
                        "toggle-action": "none",
                        "visible": true
                    },
                    "scale-x": {
                        "zooming": true,
                        "item": {
                            "font-color": "#585858",
                            "font-size": "11px",
                            "padding-top": "12px",
                            "visible": true
                        },
                        "labels": ["Apr-2014", "May-2014", "Jun-2014", "Jul-2014", "Aug-2014", "Sep-2014", "Oct-2014", "Nov-2014", "Dec-2014", "Jan-2015", "Feb-2015", "Mar-2015", "Apr-2015", "May-2015", "Jun-2015", "Jul-2015", "Aug-2015", "Sep-2015"],
                        "line-color": "none",
                        "tick": {
                            "line-color": "#e8e8e8",
                            "visible": false
                        },
                        "guide": {
                            "line-style": "dotted",
                            "line-color": "#e8e8e8",
                            "visible": true
                        }
                    },
                    "scale-y": {
                        "line-color": "none",
                        "item": {
                            "font-color": "#585858",
                            "font-size": "11px",
                            "visible": true
                        },
                        "offset-start": "55%",
                        "auto-fit": true,
                        "decimals": "1",
                        "values": "11798:13408:536.6666666666666",
                        "short": true,
                        "guide": {
                            "line-style": "dotted",
                            "line-color": "#e8e8e8",
                            "visible": true
                        },
                        "tick": {
                            "line-color": "#e8e8e8",
                            "visible": false
                        }
                    },
                    "scale-y-2": {
                        "placement": "default",
                        "blended": true,
                        "line-color": "none",
                        "item": {
                            "font-color": "#585858",
                            "font-size": "11px",
                            "visible": true
                        },
                        "offset-end": "65%",
                        "short": true,
                        "guide": {
                            "line-style": "dotted",
                            "line-color": "#e8e8e8",
                            "visible": true
                        },
                        "ref-line": {
                            "line-style": "dotted",
                            "line-color": "#e8e8e8"
                        },
                        "tick": {
                            "line-color": "#e8e8e8",
                            "visible": false
                        },
                        "label": {
                            "text": "Users",
                            "font-size": "11px",
                            "font-weight": "normal",
                            "visible": false
                        }
                    },
                    "tooltip": {
                        "text-align": "left",
                        "font-size": "13px",
                        "background-color": "#fff",
                        "font-color": "#585858",
                        "padding": "8",
                        "border-color": "#d8d8d8",
                        "border-width": 1,
                        "border-radius": 2,
                        "alpha": 0.9,
                        "text": "<b>%t</b>\nPeriod: <b>%k</b>\nUsers: <b>%v</b>",
                        "visible": false
                    },
                    "series": [{
                            "type": "line",
                            "aspect": "spline",
                            "scales": "scale-x,scale-y",
                            "values": [13408, 13091, 12948, 12835, 12846, 12848, 12782, 12785, 12884, 12703, 12689, 11917, 11854, 11945, 11937, 11992, 12008, 11798],
                            "text": "Active Users",
                            "line-color": "rgb(98, 207, 115)",
                            "marker": {
                                "type": "circle",
                                "background-color": "rgb(98, 207, 115)",
                                "size": 4,
                                "shadow": 0
                            },
                            "hover-marker": {
                                "background-color": "#fff",
                                "border-width": 2,
                                "border-color": "rgb(98, 207, 115)",
                                "size": 4
                            },
                            "value-box": {
                                "visible": true,
                                "short": true,
                                "placement": "top",
                                "type": "min,max",
                                "background-color": "rgb(98, 207, 115)",
                                "padding": "4px",
                                "offset-y": "-12px",
                                "callout": true,
                                "shadow": 0,
                                "font-size": "10px",
                                "font-weight": "normal",
                                "font-color": "#fff",
                                "angle": 0,
                                "decimals": "1",
                                "text": "%v"
                            }
                        },
                        {
                            "type": "bar",
                            "scales": "scale-x, scale-y-2",
                            "values": [1666, 1613, 1605, 1592, 1612, 1593, 1594, 1595, 1609, 1578, 1581, 1507, 1508, 1526, 1514, 1520, 1532, 1503],
                            "text": "Connects",
                            "background-color": "rgb(103, 183, 220)",
                            "alpha": "1"
                        },
                        {
                            "type": "bar",
                            "scales": "scale-x, scale-y-2",
                            "values": [1633, 1589, 1580, 1574, 1583, 1561, 1550, 1537, 1543, 1527, 1534, 1432, 1411, 1430, 1435, 1440, 1443, 1409],
                            "text": "Disconnects",
                            "background-color": "rgb(253, 212, 0)",
                            "alpha": "1"
                        }
                    ]
                }]
            };
    
            zingchart.render({
                id: 'myChart',
                output: 'canvas',
                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 = {
    "background-color":"transparent",
    "gui":{
        "contextMenu":{
            "visible":true
        }
    },
    "globals":{
        "font-family":"Open Sans",
        "thousands-separator":","
    },
    "graphset":[
        {
            "type":"mixed",
            "crosshair-x":{
                "line-style":"dashed",
                "line-color":"#787878",
                "plot-label":{
                    "multiple":true,
                    "text-align":"left",
                    "font-size":"13px",
                    "background-color":"#fff",
                    "font-color":"#585858",
                    "padding":"8",
                    "border-color":"#d8d8d8",
                    "border-width":1,
                    "border-radius":2,
                    "callout":false,
                    "alpha":0.9,
                    "visible":true
                },
                "scale-label":{
                    "background-color":"#787878",
                    "font-color":"#fff",
                    "font-size":"11px",
                    "callout":false,
                    "offset-y":"10px",
                    "visible":true
                }
            },
            "title":{
                "text":"Mixed Graph",
                "font-size":"13px",
                "font-weight":"bold",
                "font-color":"#676a6c",
            },
            "plot":{
                "bar-width":"60%",
                "bars-overlap":"60%",
                "font-weight":"normal",
                "stacked":false,
                "preview":"false",
                "selection-mode":"graph",
                "background-mode":"graph",
                "selected-state":{
                    "border-width":"2px",
                    "border-color":"#000"
                },
                "background-state":{
                    "alpha":"0.3"
                },
                "background-marker":{
                    "alpha":"0.3"
                },
                "animation":{
                    "delay":0,
                    "effect":4
                },
                "hover-state":{
                    "border-color":"#000",
                    "border-width":1,
                    "visible":true
                }
            },
            "zoom":{
                "shared":true,
                "label":{
                    "visible":true,
                    "font-color":"#3399ff",
                    "font-family":"Georgia",
                    "font-size":10,
                    "font-style":"normal",
                    "font-weight":"normal",
                    "background-color":"white",
                    "border-width":1,
                    "border-color":"#3399ff",
                    "alpha":0.7,
                    "padding":"5%"
                }
            },
            "preview":{
                "x":"10%",
                "y":"84%",
                "width":"96%",
                "height":"4%",
                "background-color":"#f4f4f4",
                "border-width":0,
                "mask":{
                    "background-color":"#ccc",
                    "alpha":1
                },
                "handle":{
                    "width":"16px",
                    "height":"16px",
                    "border-width":"1",
                    "border-radius":50,
                    "border-color":"#ccc",
                    "background-color":"#fff"
                }
            },
            "legend":{
                "background-color":"none",
                "border-width":0,
                "shadow":false,
                "layout":"float",
                "margin":"0px 2% auto auto",
                "item":{
                    "font-color":"#585858",
                    "font-size":"11px"
                },
                "marker":{
                    "width":"10px",
                    "height":"10px",
                    "border-radius":1,
                    "border-width":0
                },
                "border-color":"none",
                "toggle-action":"none",
                "visible":true
            },
            "scale-x":{
                "zooming":true,
                "item":{
                    "font-color":"#585858",
                    "font-size":"11px",
                    "padding-top":"12px",
                    "visible":true
                },
                "labels":["Apr-2014","May-2014","Jun-2014","Jul-2014","Aug-2014","Sep-2014","Oct-2014","Nov-2014","Dec-2014","Jan-2015","Feb-2015","Mar-2015","Apr-2015","May-2015","Jun-2015","Jul-2015","Aug-2015","Sep-2015"],
                "line-color":"none",
                "tick":{
                    "line-color":"#e8e8e8",
                    "visible":false
                },
                "guide":{
                    "line-style":"dotted",
                    "line-color":"#e8e8e8",
                    "visible":true
                }
            },
            "scale-y":{
                "line-color":"none",
                "item":{
                    "font-color":"#585858",
                    "font-size":"11px",
                    "visible":true
                },
                "offset-start":"55%",
                "auto-fit":true,
                "decimals":"1",
                "values":"11798:13408:536.6666666666666",
                "short":true,
                "guide":{
                    "line-style":"dotted",
                    "line-color":"#e8e8e8",
                    "visible":true
                },
                "tick":{
                    "line-color":"#e8e8e8",
                    "visible":false
                }
            },
            "scale-y-2":{
                "placement":"default",
                "blended":true,
                "line-color":"none",
                "item":{
                    "font-color":"#585858",
                    "font-size":"11px",
                    "visible":true
                },
                "offset-end":"65%",
                "short":true,
                "guide":{
                    "line-style":"dotted",
                    "line-color":"#e8e8e8",
                    "visible":true
                },
                "ref-line":{
                    "line-style":"dotted",
                    "line-color":"#e8e8e8"
                },
                "tick":{
                    "line-color":"#e8e8e8",
                    "visible":false
                },
                "label":{
                    "text":"Users",
                    "font-size":"11px",
                    "font-weight":"normal",
                    "visible":false
                }
            },
            "tooltip":{
                "text-align":"left",
                "font-size":"13px",
                "background-color":"#fff",
                "font-color":"#585858",
                "padding":"8",
                "border-color":"#d8d8d8",
                "border-width":1,
                "border-radius":2,
                "alpha":0.9,
                "text":"<b>%t</b>\nPeriod: <b>%k</b>\nUsers: <b>%v</b>",
                "visible":false
          },
          "series":[
              {
                  "type":"line",
                  "aspect":"spline",
                  "scales":"scale-x,scale-y",
                  "values":[13408,13091,12948,12835,12846,12848,12782,12785,12884,12703,12689,11917,11854,11945,11937,11992,12008,11798],
                  "text":"Active Users",
                  "line-color":"rgb(98, 207, 115)",
                  "marker":{
                      "type":"circle",
                      "background-color":"rgb(98, 207, 115)",
                      "size":4,
                      "shadow":0
                  },
                  "hover-marker":{
                      "background-color":"#fff",
                      "border-width":2,
                      "border-color":"rgb(98, 207, 115)",
                      "size":4
                  },
                  "value-box":{
                      "visible":true,
                      "short":true,
                      "placement":"top",
                      "type":"min,max",
                      "background-color":"rgb(98, 207, 115)",
                      "padding":"4px",
                      "offset-y":"-12px",
                      "callout":true,
                      "shadow":0,
                      "font-size":"10px",
                      "font-weight":"normal",
                      "font-color":"#fff",
                      "angle":0,
                      "decimals":"1",
                      "text":"%v"
                  }
              },
              {
                  "type":"bar",
                  "scales":"scale-x, scale-y-2",
                  "values":[1666,1613,1605,1592,1612,1593,1594,1595,1609,1578,1581,1507,1508,1526,1514,1520,1532,1503],
                  "text":"Connects",
                  "background-color":"rgb(103, 183, 220)",
                  "alpha":"1"
              },
              {
                  "type":"bar",
                  "scales":"scale-x, scale-y-2",
                  "values":[1633,1589,1580,1574,1583,1561,1550,1537,1543,1527,1534,1432,1411,1430,1435,1440,1443,1409],
                  "text":"Disconnects",
                  "background-color":"rgb(253, 212, 0)",
                  "alpha":"1"
              }
          ]
        }
    ]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	output:'canvas',
    	data : myConfig, 
    	height: 400, 
    	width: '100%' 
    });