• 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></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "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%'
    });