• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "graphset": [{
            "type": "mixed",
            "title": {
              "text": "Chart Title",
              "align": "left",
              "font-size": 14,
              "background-color": "#BDBDBD",
              "height": "5%"
            },
            "subtitle": {
              "text": "Subtitle",
              "align": "left",
              "background-color": "#E0E0E0",
              "height": "4%",
              "offset-y": -5
            },
            "source": {
              "text": "Source: www.zingchart.com",
              "font-color": "#B71C1C"
            },
            "legend": {
              "layout": "x2",
              "width": "180px",
              "x": "74%",
              "y": "9.5%",
              "alpha": 1,
              "shadow": 0,
              "max-items": 2,
              "overflow": "page",
              "draggable": true,
              "minimize": true,
              "header": {
                "text": "Legend Info"
              },
              "footer": {
                "text": "- Click Box Icon in Header to Minimize<br>- Click and Drag Cross Icon to Drag",
                "font-size": "8px"
              },
            },
            "plotarea": {
              "margin": "34% 30% 10% 10%"
            },
            "scale-x": {
              "values": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
              "zooming": true,
              "guide": {
                "line-style": "solid",
                "line-color": "#BDBDBD"
              },
              "label": {
                "text": "X label"
              },
              "markers": [{
                  "type": "area",
                  "range": [6.5, 7.5],
                  "background-color": "#66BB6A",
                  "alpha": 0.5,
                  "label": {
                    "text": "Active<br>Month",
                    "offset-y": -245,
                    "angle": 0,
                    "font-size": 10,
                    "bold": true
                  }
                },
                {
                  "type": "area",
                  "range": [7.5, 11.5],
                  "background-color": "#cccccc",
                  "alpha": 0.5
                }
              ]
            },
            "scale-x-2": {
              "values": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
              "guide": {
                "visible": false
              },
              "label": {
                "text": "X-2 label"
              },
              "zooming": true
            },
            "scale-y": {
              "zooming": true,
              "guide": {
                "line-style": "solid"
              },
              "label": {
                "text": "Y label"
              },
              "minor-ticks": 3,
              "minor-tick": {
                "placement": "cross",
                "size": 6
              },
              "minor-guide": {
                "line-width": "1px",
                "line-style": "dashed",
                "line-segement-size": "1px",
                "line-gap-size": "6px",
                "alpha": 0.7
              },
              "markers": [{
                "type": "line",
                "range": [74],
                "line-color": "#212121",
                "alpha": 1,
                "line-width": 2,
                "label": {
                  "text": "Threshold",
                  "offset-x": -60,
                  "offset-y": 8,
                  "background-color": "#212121",
                  "font-color": "white",
                  "font-size": 10,
                  "callout": true,
                  "callout-position": "right"
                }
              }]
            },
            "scale-y-2": {
              "values": "0:100:10",
              "format": "%v%",
              "zooming": true,
              "guide": {
                "visible": false
              },
              "label": {
                "text": "Y-2 label"
              }
            },
            "scale-y-3": {
              "values": "0:50:10",
              "decimals": 2,
              "zooming": true,
              "guide": {
                "visible": false
              },
              "label": {
                "text": "Y-3 label"
              }
            },
            "scale-y-4": {
              "values": "0:1000000:100000",
              "format": "$%v",
              "multiplier": true,
              "zooming": true,
              "guide": {
                "visible": false
              },
              "label": {
                "text": "Y-4 label"
              }
            },
            "scroll-x": {
              "bar": {
                "height": "8px",
                "background-color": "#757575"
              },
              "handle": {
                "height": "4px",
                "offset-y": -1,
                "background-color": "#E0E0E0"
              }
            },
            "scroll-y": {
              "bar": {
                "width": "8px",
                "background-color": "#757575"
              },
              "handle": {
                "width": "4px",
                "offset-x": -1,
                "background-color": "#E0E0E0"
              }
            },
            "crosshair-x": {
              "plot-label": {
                "visible": false
              }
            },
            "crosshair-y": {
    
            },
            "zoom": {
              "background-color": "#B71C1C",
              "alpha": 0.2,
              "label": {
                "visible": true,
                "border-color": "#B71C1C"
              }
            },
            "preview": {
              "height": 50,
              "width": "69%",
              "position": "14% 14%"
            },
            "labels": [{
              "text": "View External<br>Report",
              "url": "https://www.zingchart.com/buy",
              "target": "_blank",
              "offset-y": "-35px",
              "hook": "node:plot=2,index=4",
              "font-color": "#000",
              "background-color": "#ccc",
              "padding": 5,
              "border-radius": "3px",
              "callout": true,
              "callout-height": "10px",
              "callout-width": "15px",
              "underline": true
            }],
            "series": [{
                "type": "line",
                "values": [69, 68, 54, 80, 70, 74, 90, 70, 72, 68, 49, 69],
                "scales": "scale-x,scale-y",
                "line-color": "#0D47A1",
                "legend-marker": {
                  "type": "circle"
                },
                "marker": {
                  "background-color": "#0D47A1"
                }
              },
              {
                "type": "line",
                "values": [51, 53, 47, 50, 57, 63, 75, 52, 59, 47, 60, 48],
                "scales": "scale-x,scale-y-2",
                "line-color": "#B71C1C",
                "tooltip-text": "%v%",
                "legend-marker": {
                  "type": "circle"
                },
                "marker": {
                  "background-color": "#B71C1C"
                }
              },
              {
                "type": "bar",
                "values": [22, 25, 14, 22, 26, 29, 34, 22, 26, 18, 22, 21],
                "scales": "scale-x,scale-y-3",
                "background-color": "#1B5E20",
                "tooltip": {
                  "text": "The number being shown is the percentage of the node when compared to its plot",
                  "width": "200px",
                  "wrap-text": 1
                },
                "value-box": {
                  "placement": "top-in",
                  "offset-y": 5,
                  "font-color": "#fff",
                  "text": "%pper%",
                  "decimals": 1,
                  "font-angle": 90
                }
              },
              {
                "type": "bar",
                "values": [250000, 150000, 260000, 210000, 240000, 260000, 330000, 150000, 410000, 250000, 220000, 240000],
                "scales": "scale-x,scale-y-4",
                "background-color": "#E65100",
                "text": "Dell",
                "tooltip": {
                  "text": "The number being shown above the bar is the value of the node",
                  "width": "200px",
                  "wrap-text": 1
                },
                "value-box": {
                  "short": true,
                  "placement": "top-in",
                  "offset-y": 5,
                  "font-angle": 90,
                  "font-color": "#fff",
                  "bold": true
                }
              }
            ]
          }],
          "background-color": "white"
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig
        });
      </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'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
    </body>
    
    </html>
    .zc-ref {
      display: none;
    }
    var myConfig = {
      "graphset": [{
        "type": "mixed",
        "title": {
          "text": "Chart Title",
          "align": "left",
          "font-size": 14,
          "background-color": "#BDBDBD",
          "height": "5%"
        },
        "subtitle": {
          "text": "Subtitle",
          "align": "left",
          "background-color": "#E0E0E0",
          "height": "4%",
          "offset-y": -5
        },
        "source": {
          "text": "Source: www.zingchart.com",
          "font-color": "#B71C1C"
        },
        "legend": {
          "layout": "x2",
          "width": "180px",
          "x": "74%",
          "y": "9.5%",
          "alpha": 1,
          "shadow": 0,
          "max-items": 2,
          "overflow": "page",
          "draggable": true,
          "minimize": true,
          "header": {
            "text": "Legend Info"
          },
          "footer": {
            "text": "- Click Box Icon in Header to Minimize<br>- Click and Drag Cross Icon to Drag",
            "font-size": "8px"
          },
        },
        "plotarea": {
          "margin": "34% 30% 10% 10%"
        },
        "scale-x": {
          "values": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          "zooming": true,
          "guide": {
            "line-style": "solid",
            "line-color": "#BDBDBD"
          },
          "label": {
            "text": "X label"
          },
          "markers": [{
              "type": "area",
              "range": [6.5, 7.5],
              "background-color": "#66BB6A",
              "alpha": 0.5,
              "label": {
                "text": "Active<br>Month",
                "offset-y": -245,
                "angle": 0,
                "font-size": 10,
                "bold": true
              }
            },
            {
              "type": "area",
              "range": [7.5, 11.5],
              "background-color": "#cccccc",
              "alpha": 0.5
            }
          ]
        },
        "scale-x-2": {
          "values": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
          "guide": {
            "visible": false
          },
          "label": {
            "text": "X-2 label"
          },
          "zooming": true
        },
        "scale-y": {
          "zooming": true,
          "guide": {
            "line-style": "solid"
          },
          "label": {
            "text": "Y label"
          },
          "minor-ticks": 3,
          "minor-tick": {
            "placement": "cross",
            "size": 6
          },
          "minor-guide": {
            "line-width": "1px",
            "line-style": "dashed",
            "line-segement-size": "1px",
            "line-gap-size": "6px",
            "alpha": 0.7
          },
          "markers": [{
            "type": "line",
            "range": [74],
            "line-color": "#212121",
            "alpha": 1,
            "line-width": 2,
            "label": {
              "text": "Threshold",
              "offset-x": -60,
              "offset-y": 8,
              "background-color": "#212121",
              "font-color": "white",
              "font-size": 10,
              "callout": true,
              "callout-position": "right"
            }
          }]
        },
        "scale-y-2": {
          "values": "0:100:10",
          "format": "%v%",
          "zooming": true,
          "guide": {
            "visible": false
          },
          "label": {
            "text": "Y-2 label"
          }
        },
        "scale-y-3": {
          "values": "0:50:10",
          "decimals": 2,
          "zooming": true,
          "guide": {
            "visible": false
          },
          "label": {
            "text": "Y-3 label"
          }
        },
        "scale-y-4": {
          "values": "0:1000000:100000",
          "format": "$%v",
          "multiplier": true,
          "zooming": true,
          "guide": {
            "visible": false
          },
          "label": {
            "text": "Y-4 label"
          }
        },
        "scroll-x": {
          "bar": {
            "height": "8px",
            "background-color": "#757575"
          },
          "handle": {
            "height": "4px",
            "offset-y": -1,
            "background-color": "#E0E0E0"
          }
        },
        "scroll-y": {
          "bar": {
            "width": "8px",
            "background-color": "#757575"
          },
          "handle": {
            "width": "4px",
            "offset-x": -1,
            "background-color": "#E0E0E0"
          }
        },
        "crosshair-x": {
          "plot-label": {
            "visible": false
          }
        },
        "crosshair-y": {
    
        },
        "zoom": {
          "background-color": "#B71C1C",
          "alpha": 0.2,
          "label": {
            "visible": true,
            "border-color": "#B71C1C"
          }
        },
        "preview": {
          "height": 50,
          "width": "69%",
          "position": "14% 14%"
        },
        "labels": [{
          "text": "View External<br>Report",
          "url": "https://www.zingchart.com/buy",
          "target": "_blank",
          "offset-y": "-35px",
          "hook": "node:plot=2,index=4",
          "font-color": "#000",
          "background-color": "#ccc",
          "padding": 5,
          "border-radius": "3px",
          "callout": true,
          "callout-height": "10px",
          "callout-width": "15px",
          "underline": true
        }],
        "series": [{
            "type": "line",
            "values": [69, 68, 54, 80, 70, 74, 90, 70, 72, 68, 49, 69],
            "scales": "scale-x,scale-y",
            "line-color": "#0D47A1",
            "legend-marker": {
              "type": "circle"
            },
            "marker": {
              "background-color": "#0D47A1"
            }
          },
          {
            "type": "line",
            "values": [51, 53, 47, 50, 57, 63, 75, 52, 59, 47, 60, 48],
            "scales": "scale-x,scale-y-2",
            "line-color": "#B71C1C",
            "tooltip-text": "%v%",
            "legend-marker": {
              "type": "circle"
            },
            "marker": {
              "background-color": "#B71C1C"
            }
          },
          {
            "type": "bar",
            "values": [22, 25, 14, 22, 26, 29, 34, 22, 26, 18, 22, 21],
            "scales": "scale-x,scale-y-3",
            "background-color": "#1B5E20",
            "tooltip": {
              "text": "The number being shown is the percentage of the node when compared to its plot",
              "width": "200px",
              "wrap-text": 1
            },
            "value-box": {
              "placement": "top-in",
              "offset-y": 5,
              "font-color": "#fff",
              "text": "%pper%",
              "decimals": 1,
              "font-angle": 90
            }
          },
          {
            "type": "bar",
            "values": [250000, 150000, 260000, 210000, 240000, 260000, 330000, 150000, 410000, 250000, 220000, 240000],
            "scales": "scale-x,scale-y-4",
            "background-color": "#E65100",
            "text": "Dell",
            "tooltip": {
              "text": "The number being shown above the bar is the value of the node",
              "width": "200px",
              "wrap-text": 1
            },
            "value-box": {
              "short": true,
              "placement": "top-in",
              "offset-y": 5,
              "font-angle": 90,
              "font-color": "#fff",
              "bold": true
            }
          }
        ]
      }],
      "background-color": "white"
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig
    });