• 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>
            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
    
            #myChart {
                height: 100%;
                width: 100%;
                min-height: 150px;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 480px;
            }
        </style>
    </head>
    
    <body>
        <div id="myChart"></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myChart = {
                "type": "mixed",
                "legend": {
                    "alpha": 0,
                    "width": 168,
                    "margin-right": "0",
                    "margin-top": "45",
                    "max-items": 8,
                    "overflow": "page",
                    "layout": "x1",
                    "toggle-action": "remove"
                },
                "plot": {
                    "bar-width": "75%",
                    "joined": true
                },
                "plotarea": {
                    "margin-right": "216",
                    "margin-top": "50"
                },
                "scale-x": {
                    "visible": true,
                    "item": {
                        "visible": true,
                        "font-angle": 0
                    },
                    "progression": "linear"
                },
                "scale-y": {
                    "visible": true,
                    "decimals": 0,
                    "decimals-separator": ".",
                    "thousands-separator": ",",
                    "format": "$%v",
                    "label": {
                        "text": "Cost",
                        "text-decoration": "none",
                        "text-align": "center"
                    },
                    "progression": "linear"
                },
                "scale-y-2": {
                    "visible": true,
                    "decimals": 2,
                    "decimals-separator": ".",
                    "thousands-separator": ",",
                    "format": "%v%",
                    "max-value": 85.71295951029543,
                    "min-value": 85.0838100215073,
                    "progression": "linear"
                },
                "series": [{
                        "values": [
                            ["Jan-2017", 7374886680.469998]
                        ],
                        "text": "ROP Value (A)",
                        "joined": true,
                        "tooltip": {
                            "text": "%t\n$%v\n%kl",
                            "text-decoration": "none",
                            "decimals": "0",
                            "thousands-separator": ",",
                            "decimals-separator": ".",
                            "visible": true
                        },
                        "type": "bar",
                        "legend-item": {
                            "width": 143,
                            "text": "ROP Value (A)",
                            "text-decoration": "none",
                            "wrap-text": true
                        }
                    },
                    {
                        "values": [
                            ["Jan-2017", 85.71295951029543]
                        ],
                        "text": "Customer Fill Rate (A)",
                        "joined": true,
                        "tooltip": {
                            "text": "%v% @ %kl\n%t",
                            "text-decoration": "none",
                            "decimals": "2",
                            "thousands-separator": ",",
                            "decimals-separator": ".",
                            "visible": true
                        },
                        "type": "line",
                        "scales": "scale-x,scale-y-2",
                        "legend-item": {
                            "width": 143,
                            "text": "Customer Fill Rate (A)",
                            "text-decoration": "none",
                            "wrap-text": true
                        },
                        "visible": false
                    },
                    {
                        "values": [
                            ["Jan-2017", 85.0838100215073]
                        ],
                        "text": "Total Fill Rate (A)",
                        "joined": true,
                        "tooltip": {
                            "text": "%v% @ %kl\n%t",
                            "text-decoration": "none",
                            "decimals": "2",
                            "thousands-separator": ",",
                            "decimals-separator": ".",
                            "visible": true
                        },
                        "type": "line",
                        "scales": "scale-x,scale-y-2",
                        "legend-item": {
                            "width": 143,
                            "text": "Total Fill Rate (A)",
                            "text-decoration": "none",
                            "wrap-text": true
                        }
                    }
                ],
                "title": {
                    "text": "ROP Vs Fill Rate",
                    "text-decoration": "none",
                    "text-align": "center"
                },
                "stacked": false,
                "gui": {
                    "behaviors": [{
                        "id": "FullScreen",
                        "enabled": "all"
                    }],
                    "inherit": "all"
                }
            };
            zingchart.render({
                id: "myChart",
                data: myChart,
            });
        </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>
    html, body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    #myChart {
    	height:100%;
    	width:100%;
    	min-height:150px;
    }
    .zc-ref {
    	display:none;
    }
    var myChart = {
            "type":"mixed",
            "legend":{
                "alpha":0,
                "width":168,
                "margin-right":"0",
                "margin-top":"45",
                "max-items":8,
                "overflow":"page",
                "layout":"x1",
                "toggle-action":"remove"
            },
            "plot":{
                "bar-width":"75%",
                "joined":true
            },
            "plotarea":{
                "margin-right":"216",
                "margin-top":"50"
            },
            "scale-x":{
                "visible":true,
                "item":{
                    "visible":true,
                    "font-angle":0
                },
                "progression":"linear"
            },
            "scale-y":{
                "visible":true,
                "decimals":0,
                "decimals-separator":".",
                "thousands-separator":",",
                "format":"$%v",
                "label":{
                    "text":"Cost",
                    "text-decoration":"none",
                    "text-align":"center"
                },
                "progression":"linear"
            },
            "scale-y-2":{
                "visible":true,
                "decimals":2,
                "decimals-separator":".",
                "thousands-separator":",",
                "format":"%v%",
                "max-value":85.71295951029543,
                "min-value":85.0838100215073,
                "progression":"linear"
            },
            "series":[
                {
                    "values":[["Jan-2017",7374886680.469998]],
                    "text":"ROP Value (A)",
                    "joined":true,
                    "tooltip":{
                        "text":"%t\n$%v\n%kl",
                        "text-decoration":"none",
                        "decimals":"0",
                        "thousands-separator":",",
                        "decimals-separator":".",
                        "visible":true
                    },
                    "type":"bar",
                    "legend-item":{
                        "width":143,
                        "text":"ROP Value (A)",
                        "text-decoration":"none",
                        "wrap-text":true
                    }
                },
                {
                    "values":[["Jan-2017",85.71295951029543]],
                    "text":"Customer Fill Rate (A)",
                    "joined":true,
                    "tooltip":{
                        "text":"%v% @ %kl\n%t",
                        "text-decoration":"none",
                        "decimals":"2",
                        "thousands-separator":",",
                        "decimals-separator":".",
                        "visible":true
                    },
                    "type":"line",
                    "scales":"scale-x,scale-y-2",
                    "legend-item":{
                        "width":143,
                        "text":"Customer Fill Rate (A)",
                        "text-decoration":"none",
                        "wrap-text":true
                    },
                    "visible":false
                },
                {
                    "values":[["Jan-2017",85.0838100215073]],
                    "text":"Total Fill Rate (A)",
                    "joined":true,
                    "tooltip":{
                        "text":"%v% @ %kl\n%t",
                        "text-decoration":"none",
                        "decimals":"2",
                        "thousands-separator":",",
                        "decimals-separator":".",
                        "visible":true
                    },
                    "type":"line",
                    "scales":"scale-x,scale-y-2",
                    "legend-item":{
                        "width":143,
                        "text":"Total Fill Rate (A)",
                        "text-decoration":"none",
                        "wrap-text":true
                    }
                }
            ],
            "title":{
                "text":"ROP Vs Fill Rate",
                "text-decoration":"none",
                "text-align":"center"
            },
            "stacked":false,
            "gui":{
                "behaviors":[
                    {
                        "id":"FullScreen",
                        "enabled":"all"
                    }
                ],
                "inherit":"all"
            }
        };
    zingchart.render({
      id: "myChart",
      data: myChart,
    });