• 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: 450px;
            }
        </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 = {
                "gui": {
                    "contextMenu": {
                        "button": {
                            "visible": 0
                        },
                        "visible": false
                    },
                    "behaviors": [{
                            "id": "GuideShow",
                            "enabled": "none"
                        },
                        {
                            "id": "GuideHide",
                            "enabled": "none"
                        },
                        {
                            "id": "About",
                            "enabled": "none"
                        },
                        {
                            "id": "ViewSource",
                            "enabled": "none"
                        },
                        {
                            "id": "Reload",
                            "enabled": "none"
                        }
                    ]
                },
                "scaleX": {
                    "visible": true,
                    "label": {
                        "text": "",
                        "visible": true
                    },
                    "zooming": false,
                    "values": [
                        "JAS 2014",
                        "OND 2014",
                        "JFM 2014",
                        "AMJ 2015",
                        "JAS 2015",
                        "OND 2015",
                        "JAS 2016",
                        "JFM 2017"
                    ],
                    "lineColor": "black",
                    "lineWidth": "1px",
                    "tick": {
                        "lineColor": "black",
                        "lineWidth": "1px"
                    },
                    "item": {
                        "fontColor": "black",
                        "angle": 0,
                        "flat": false,
                        "visible": true,
                        "fontSize": 10
                    },
                    "itemsoverlap": false,
                    "guide": {
                        "visible": false,
                        "alpha": 0.7
                    }
                },
                "scaleY": {
                    "lineColor": "black",
                    "lineWidth": "1px",
                    "tick": {
                        "lineColor": "black",
                        "lineWidth": "1px"
                    },
                    "guide": {
                        "lineColor": "#626262",
                        "alpha": 0.5,
                        "lineStyle": "dashed",
                        "visible": false
                    },
                    "item": {
                        "fontColor": "black"
                    },
                    "itemsoverlap": false,
                    "label": {
                        "visible": true
                    },
                    "visible": false
                },
                "scaleY2": {
                    "lineColor": "black",
                    "lineWidth": "1px",
                    "tick": {
                        "lineColor": "black",
                        "lineWidth": "1px"
                    },
                    "guide": {
                        "lineColor": "#626262",
                        "alpha": 0.7,
                        "lineStyle": "dashed",
                        "visible": false
                    },
                    "item": {
                        "fontColor": "black"
                    },
                    "itemsoverlap": false,
                    "label": {
                        "visible": false
                    },
                    "visible": false
                },
                "tooltip": {
                    "visible": true,
                    "text": "%t, %v, %kt"
                },
                "plot": {
                    "lineWidth": "2px",
                    "aspect": "segmented",
                    "marker": {
                        "visible": true
                    },
                    "size": "90%",
                    "selectedState": {
                        "alpha": 10,
                        "lineWidth": 10
                    },
                    valueBox: {
                        overlap: false
                    }
                },
                "series": [{
                        "text": "A Series",
                        "values": [
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            27,
                            29
                        ],
                        "type": "line",
                        "legendItem": {
                            "cursor": "pointer"
                        },
                        "lineStyle": "dashed",
                        "alpha": 0.8,
                        "valueBox": {
                            "text": "%v",
                            "_overlap": false,
                            "placement": "top",
                            "fontColor": "none",
                            "fontSize": 10
                        },
                        "jsRule": "getSeriesColor()",
                        "backgroundColor": "#80B1D3",
                        "lineColor": "#80B1D3",
                        "marker": {
                            "backgroundColor": "#80B1D3"
                        }
                    },
                    {
                        "text": "B Series",
                        "values": [
                            6,
                            7,
                            7,
                            8,
                            10,
                            9,
                            7,
                            7
                        ],
                        "type": "line",
                        "legendItem": {
                            "cursor": "pointer"
                        },
                        "lineStyle": "dashed",
                        "alpha": 0.8,
                        "valueBox": {
                            "text": "%v",
                            "_overlap": false,
                            "placement": "top",
                            "fontColor": "none",
                            "fontSize": 10
                        },
                        "jsRule": "getSeriesColor()",
                        "backgroundColor": "#FDB462",
                        "lineColor": "#FDB462",
                        "marker": {
                            "backgroundColor": "#FDB462"
                        }
                    },
                    {
                        "text": "C Series",
                        "values": [
                            87,
                            86,
                            85,
                            84,
                            80,
                            82,
                            83,
                            85
                        ],
                        "type": "line",
                        "legendItem": {
                            "cursor": "pointer"
                        },
                        "lineStyle": "dashed",
                        "alpha": 0.8,
                        "valueBox": {
                            "text": "%v",
                            "_overlap": false,
                            "placement": "top",
                            "fontColor": "none",
                            "fontSize": 10
                        },
                        "jsRule": "getSeriesColor()",
                        "marker": {
                            "backgroundColor": "#006600"
                        },
                        "backgroundColor": "#B3DE69",
                        "lineColor": "#006600"
                    },
                    {
                        "text": "D Series",
                        "values": [
                            98,
                            95,
                            95,
                            95,
                            89,
                            93,
                            92,
                            91
                        ],
                        "type": "line",
                        "legendItem": {
                            "cursor": "pointer"
                        },
                        "lineStyle": "solid",
                        "alpha": 0.8,
                        "valueBox": {
                            "text": "%v",
                            "_overlap": false,
                            "placement": "top",
                            "fontColor": "none",
                            "fontSize": 10
                        },
                        "jsRule": "getSeriesColor()",
                        "marker": {
                            "backgroundColor": "#f50808"
                        },
                        "backgroundColor": "#FFED6F",
                        "lineColor": "#f50808"
                    }
                ],
                "legend": {
                    "padding": "1%",
                    "align": "right",
                    "verticalAlign": "middle",
                    "toggleAction": "remove",
                    "maxItems": 5,
                    "overflow": "scroll",
                    "adjustLayout": true,
                    "visible": true,
                    "layout": "v"
                },
                "crosshairX": {
                    "visible": false
                },
                "crosshairY": {
                    "visible": false
                },
                "plotarea": {
                    "adjustLayout": true,
                    "marginLeft": "5%",
                    "marginBottom": "dynamic",
                    "marginRight": "dynamic",
                    "marginTop": "dynamic"
                },
                "type": "line"
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: '100%',
                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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></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 myConfig = {  
      "gui":{  
        "contextMenu":{  
          "button":{  
            "visible":0
          },
          "visible":false
        },
        "behaviors":[  
          {  
            "id":"GuideShow",
            "enabled":"none"
          },
          {  
            "id":"GuideHide",
            "enabled":"none"
          },
          {  
            "id":"About",
            "enabled":"none"
          },
          {  
            "id":"ViewSource",
            "enabled":"none"
          },
          {  
            "id":"Reload",
            "enabled":"none"
          }
        ]
      },
      "scaleX":{  
        "visible":true,
        "label":{  
          "text":"",
          "visible":true
        },
        "zooming":false,
        "values":[  
          "JAS 2014",
          "OND 2014",
          "JFM 2014",
          "AMJ 2015",
          "JAS 2015",
          "OND 2015",
          "JAS 2016",
          "JFM 2017"
        ],
        "lineColor":"black",
        "lineWidth":"1px",
        "tick":{  
          "lineColor":"black",
          "lineWidth":"1px"
        },
        "item":{  
          "fontColor":"black",
          "angle":0,
          "flat":false,
          "visible":true,
          "fontSize":10
        },
        "itemsoverlap":false,
        "guide":{  
          "visible":false,
          "alpha":0.7
        }
      },
      "scaleY":{  
        "lineColor":"black",
        "lineWidth":"1px",
        "tick":{  
          "lineColor":"black",
          "lineWidth":"1px"
        },
        "guide":{  
          "lineColor":"#626262",
          "alpha":0.5,
          "lineStyle":"dashed",
          "visible":false
        },
        "item":{  
          "fontColor":"black"
        },
        "itemsoverlap":false,
        "label":{  
          "visible":true
        },
        "visible":false
      },
      "scaleY2":{  
        "lineColor":"black",
        "lineWidth":"1px",
        "tick":{  
          "lineColor":"black",
          "lineWidth":"1px"
        },
        "guide":{  
          "lineColor":"#626262",
          "alpha":0.7,
          "lineStyle":"dashed",
          "visible":false
        },
        "item":{  
          "fontColor":"black"
        },
        "itemsoverlap":false,
        "label":{  
          "visible":false
        },
        "visible":false
      },
      "tooltip":{  
        "visible":true,
        "text":"%t, %v, %kt"
      },
      "plot":{  
        "lineWidth":"2px",
        "aspect":"segmented",
        "marker":{  
          "visible":true
        },
        "size":"90%",
        "selectedState":{  
          "alpha":10,
          "lineWidth":10
        },
        valueBox: {
          overlap:false
        }
      },
      "series":[  
        {  
          "text":"A Series",
          "values":[  
            0,
            0,
            0,
            0,
            0,
            0,
            27,
            29
          ],
          "type":"line",
          "legendItem":{  
            "cursor":"pointer"
          },
          "lineStyle":"dashed",
          "alpha":0.8,
          "valueBox":{  
            "text":"%v",
            "_overlap":false,
            "placement":"top",
            "fontColor":"none",
            "fontSize":10
          },
          "jsRule":"getSeriesColor()",
          "backgroundColor":"#80B1D3",
          "lineColor":"#80B1D3",
          "marker":{  
            "backgroundColor":"#80B1D3"
          }
        },
        {  
          "text":"B Series",
          "values":[  
            6,
            7,
            7,
            8,
            10,
            9,
            7,
            7
          ],
          "type":"line",
          "legendItem":{  
            "cursor":"pointer"
          },
          "lineStyle":"dashed",
          "alpha":0.8,
          "valueBox":{  
            "text":"%v",
            "_overlap":false,
            "placement":"top",
            "fontColor":"none",
            "fontSize":10
          },
          "jsRule":"getSeriesColor()",
          "backgroundColor":"#FDB462",
          "lineColor":"#FDB462",
          "marker":{  
            "backgroundColor":"#FDB462"
          }
        },
        {  
          "text":"C Series",
          "values":[  
            87,
            86,
            85,
            84,
            80,
            82,
            83,
            85
          ],
          "type":"line",
          "legendItem":{  
            "cursor":"pointer"
          },
          "lineStyle":"dashed",
          "alpha":0.8,
          "valueBox":{  
            "text":"%v",
            "_overlap":false,
            "placement":"top",
            "fontColor":"none",
            "fontSize":10
          },
          "jsRule":"getSeriesColor()",
          "marker":{  
            "backgroundColor":"#006600"
          },
          "backgroundColor":"#B3DE69",
          "lineColor":"#006600"
        },
        {  
          "text":"D Series",
          "values":[  
            98,
            95,
            95,
            95,
            89,
            93,
            92,
            91
          ],
          "type":"line",
          "legendItem":{  
            "cursor":"pointer"
          },
          "lineStyle":"solid",
          "alpha":0.8,
          "valueBox":{  
            "text":"%v",
            "_overlap":false,
            "placement":"top",
            "fontColor":"none",
            "fontSize":10
          },
          "jsRule":"getSeriesColor()",
          "marker":{  
            "backgroundColor":"#f50808"
          },
          "backgroundColor":"#FFED6F",
          "lineColor":"#f50808"
        }
      ],
      "legend":{  
        "padding":"1%",
        "align":"right",
        "verticalAlign":"middle",
        "toggleAction":"remove",
        "maxItems":5,
        "overflow":"scroll",
        "adjustLayout":true,
        "visible":true,
        "layout":"v"
      },
      "crosshairX":{  
        "visible":false
      },
      "crosshairY":{  
        "visible":false
      },
      "plotarea":{  
        "adjustLayout":true,
        "marginLeft":"5%",
        "marginBottom":"dynamic",
        "marginRight":"dynamic",
        "marginTop":"dynamic"
      },
      "type":"line"
    };
     
    zingchart.render({ 
    	id: 'myChart', 
    	data: myConfig, 
    	height: '100%', 
    	width: '100%' 
    });