• 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>
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 480px;
            }
        </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
    });