• 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 = {
                "backgroundColor": "none",
                "alpha": 1,
                "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"
                        }
                    ]
                },
                "globals": {
                    "fontFamily": "Muli",
                    "fontSize": 10,
                    "fontColor": ""
                },
                "plotarea": {
                    "backgroundColor": "transparent",
                    "alpha": 1,
                    "marginTop": "dynamic",
                    "marginBottom": "dynamic"
                },
                "tooltip": {
                    "visible": true,
                    "text": "%t, %v, %kt"
                },
                "title": {
                    "visible": false,
                    "shadow": false,
                    "adjustLayout": true,
                    "alpha": 1,
                    "textAlign": "center",
                    "backgroundColor": "",
                    "text": "Chart Title",
                    "textDecoration": "none",
                    "fontStyle": "none",
                    "fontSize": 12,
                    "fontWeight": "none",
                    "label": {
                        "flat": false,
                        "cursor": "pointer"
                    },
                    "flat": false
                },
                "plot": {
                    "lineWidth": "2px",
                    "aspect": "",
                    "stacked": false,
                    "stackType": "normal",
                    "marker": {
                        "visible": true
                    },
                    "size": "100%",
                    "valueBox": {
                        "text": "%v",
                        "overlap": false,
                        "fontColor": "#000000",
                        "fontSize": 10,
                        "placement": "auto"
                    },
                    "selectionMode": "plot",
                    "selectedState": {},
                    "animation": {
                        "delay": 0,
                        "effect": "ANIMATION_EXPAND_BOTTOM",
                        "speed": 20,
                        "method": "ANIMATION_LINEAR",
                        "sequence": "ANIMATION_BACK_EASE_OUT"
                    },
                    "selectedMarker": {
                        "borderColor": "black",
                        "alpha": 10,
                        "borderWidth": 2
                    }
                },
                "series": [{
                    "text": "001",
                    "values": [
                        [
                            2.06,
                            8.91,
                            3.54
                        ],
                        [
                            3.29,
                            7.92,
                            4.3
                        ],
                        [
                            13.99,
                            15.84,
                            11.65
                        ],
                        [
                            6.58,
                            9.9,
                            11.14
                        ],
                        [
                            8.64,
                            4.95,
                            10.13
                        ],
                        [
                            13.17,
                            0,
                            14.18
                        ],
                        [
                            12.35,
                            0,
                            10.63
                        ],
                        [
                            9.05,
                            0,
                            7.09
                        ]
                    ],
                    "minSize": null,
                    "alpha": 1,
                    "legendItem": {
                        "cursor": "pointer"
                    },
                    "backgroundColor": "#42b3d5",
                    "lineColor": "#42b3d5",
                    "marker": {
                        "backgroundColor": "#42b3d5",
                        "type": "pie",
                        "size": 4
                    },
                    "lineWidth": 2,
                    "barWidth": -1,
                    "sizeFactor": null,
                    "maxSize": null,
                    "reference": "chart-max",
                    "minRatio": "0.2",
                    "maxRatio": "1",
                    "lineStyle": "solid",
                    "borderRadius": 0,
                    "borderColor": "#000000",
                    "borderWidth": 0,
                    "valueBox": {
                        "jsRule": "window.rc-chart-3384.getLabelRules()"
                    },
                    "jsRule": "window.rc-chart-3384.getSeriesColor()",
                    "scales": "scale-x,scale-y"
                }],
                "legend": {
                    "alpha": 1,
                    "item": {
                        "fontWeight": "normal",
                        "fontStyle": "none",
                        "fontSize": 10,
                        "fontColor": "#000000"
                    },
                    "backgroundColor": "",
                    "borderColor": "#000000",
                    "borderWidth": 0,
                    "visible": true,
                    "toggleAction": "remove",
                    "maxItems": null,
                    "highlightPlot": true,
                    "overflow": "none",
                    "adjustLayout": true,
                    "align": "center",
                    "verticalAlign": "bottom",
                    "padding": "1%",
                    "layout": "float"
                },
                "scaleX": {
                    "visible": true,
                    "minorGuide": {
                        "alpha": 0.2,
                        "lineColor": "#000000",
                        "lineStyle": "solid"
                    },
                    "label": {
                        "text": "Axis Title",
                        "cursor": "pointer",
                        "flat": false,
                        "visible": false,
                        "fontSize": 10,
                        "textDecoration": "none",
                        "fontWeight": "normal",
                        "fontStyle": "none",
                        "fontColor": "#000000"
                    },
                    "minValue": null,
                    "maxValue": null,
                    "step": null,
                    "maxTicks": 0,
                    "minorTicks": 0,
                    "minorTick": {},
                    "zooming": false,
                    "values": [],
                    "lineColor": "#000000",
                    "lineWidth": 1,
                    "tick": {
                        "lineColor": "#000000",
                        "lineWidth": 1,
                        "visible": true
                    },
                    "item": {
                        "fontWeight": "normal",
                        "angle": "0",
                        "textDecoration": "none",
                        "fontSize": 10,
                        "italic": false,
                        "flat": false,
                        "cursor": "pointer",
                        "visible": true,
                        "textAlign": "right",
                        "fontColor": "#000000"
                    },
                    "itemsoverlap": false,
                    "guide": {
                        "visible": true,
                        "alpha": 0.2,
                        "lineColor": "#000000",
                        "lineStyle": "dashed"
                    },
                    "flat": false,
                    "format": "%v"
                },
                "scaleY": {
                    "visible": true,
                    "minorGuide": {
                        "alpha": 0.2,
                        "lineColor": "#000000",
                        "lineStyle": "solid"
                    },
                    "label": {
                        "text": "Axis Title",
                        "cursor": "pointer",
                        "flat": false,
                        "visible": false,
                        "fontSize": 10,
                        "textDecoration": "none",
                        "fontWeight": "normal",
                        "fontStyle": "none",
                        "fontColor": "#000000"
                    },
                    "maxTicks": 5,
                    "minorTicks": 0,
                    "minorTick": {},
                    "zooming": false,
                    "lineColor": "#000000",
                    "lineWidth": 1,
                    "tick": {
                        "lineColor": "#000000",
                        "lineWidth": 1,
                        "visible": true
                    },
                    "item": {
                        "fontWeight": "normal",
                        "angle": "0",
                        "textDecoration": "none",
                        "fontSize": 10,
                        "italic": false,
                        "flat": false,
                        "cursor": "pointer",
                        "visible": true,
                        "fontColor": "#000000"
                    },
                    "itemsoverlap": false,
                    "guide": {
                        "visible": true,
                        "alpha": 0.5,
                        "lineColor": "#000000",
                        "lineStyle": "dashed"
                    },
                    "flat": false,
                    "format": "%v"
                },
                "scaleY2": {
                    "visible": true,
                    "minorGuide": {
                        "alpha": 0.2,
                        "lineColor": "#000000",
                        "lineStyle": "solid"
                    },
                    "label": {
                        "text": "Axis Title",
                        "cursor": "pointer",
                        "flat": false,
                        "visible": false,
                        "fontSize": 10,
                        "textDecoration": "none",
                        "fontWeight": "normal",
                        "fontStyle": "none"
                    },
                    "maxTicks": 0,
                    "minorTicks": 0,
                    "minorTick": {},
                    "zooming": false,
                    "lineColor": "",
                    "lineWidth": 1,
                    "tick": {
                        "lineColor": "",
                        "lineWidth": 1,
                        "visible": true
                    },
                    "item": {
                        "fontWeight": "normal",
                        "angle": "0",
                        "textDecoration": "none",
                        "fontSize": 10,
                        "italic": false,
                        "flat": false,
                        "cursor": "pointer",
                        "visible": false
                    },
                    "itemsoverlap": false,
                    "guide": {
                        "visible": false,
                        "alpha": 0.2,
                        "lineColor": "",
                        "lineStyle": "dashed"
                    },
                    "flat": false,
                    "format": "%v"
                },
                "crosshairX": {
                    "visible": true,
                    "plotLabel": {
                        "visible": false
                    },
                    "scaleLabel": {
                        "backgroundColor": "#000",
                        "fontColor": "#fff"
                    }
                },
                "crosshairY": {
                    "visible": true,
                    "plotLabel": {
                        "visible": false
                    },
                    "scaleLabel": {
                        "backgroundColor": "#000",
                        "fontColor": "#fff"
                    }
                },
                "type": "scatter"
            };
    
            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 = {
      "backgroundColor": "none",
      "alpha": 1,
      "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"
          }
        ]
      },
      "globals": {
        "fontFamily": "Muli",
        "fontSize": 10,
        "fontColor": ""
      },
      "plotarea": {
        "backgroundColor": "transparent",
        "alpha": 1,
        "marginTop": "dynamic",
        "marginBottom": "dynamic"
      },
      "tooltip": {
        "visible": true,
        "text": "%t, %v, %kt"
      },
      "title": {
        "visible": false,
        "shadow": false,
        "adjustLayout": true,
        "alpha": 1,
        "textAlign": "center",
        "backgroundColor": "",
        "text": "Chart Title",
        "textDecoration": "none",
        "fontStyle": "none",
        "fontSize": 12,
        "fontWeight": "none",
        "label": {
          "flat": false,
          "cursor": "pointer"
        },
        "flat": false
      },
      "plot": {
        "lineWidth": "2px",
        "aspect": "",
        "stacked": false,
        "stackType": "normal",
        "marker": {
          "visible": true
        },
        "size": "100%",
        "valueBox": {
          "text": "%v",
          "overlap": false,
          "fontColor": "#000000",
          "fontSize": 10,
          "placement": "auto"
        },
        "selectionMode": "plot",
        "selectedState": {},
        "animation": {
          "delay": 0,
          "effect": "ANIMATION_EXPAND_BOTTOM",
          "speed": 20,
          "method": "ANIMATION_LINEAR",
          "sequence": "ANIMATION_BACK_EASE_OUT"
        },
        "selectedMarker": {
          "borderColor": "black",
          "alpha": 10,
          "borderWidth": 2
        }
      },
      "series": [
        {
          "text": "001",
          "values": [
            [
              2.06,
              8.91,
              3.54
            ],
            [
              3.29,
              7.92,
              4.3
            ],
            [
              13.99,
              15.84,
              11.65
            ],
            [
              6.58,
              9.9,
              11.14
            ],
            [
              8.64,
              4.95,
              10.13
            ],
            [
              13.17,
              0,
              14.18
            ],
            [
              12.35,
              0,
              10.63
            ],
            [
              9.05,
              0,
              7.09
            ]
          ],
          "minSize": null,
          "alpha": 1,
          "legendItem": {
            "cursor": "pointer"
          },
          "backgroundColor": "#42b3d5",
          "lineColor": "#42b3d5",
          "marker": {
            "backgroundColor": "#42b3d5",
            "type": "pie",
            "size": 4
          },
          "lineWidth": 2,
          "barWidth": -1,
          "sizeFactor": null,
          "maxSize": null,
          "reference": "chart-max",
          "minRatio": "0.2",
          "maxRatio": "1",
          "lineStyle": "solid",
          "borderRadius": 0,
          "borderColor": "#000000",
          "borderWidth": 0,
          "valueBox": {
            "jsRule": "window.rc-chart-3384.getLabelRules()"
          },
          "jsRule": "window.rc-chart-3384.getSeriesColor()",
          "scales": "scale-x,scale-y"
        }
      ],
      "legend": {
        "alpha": 1,
        "item": {
          "fontWeight": "normal",
          "fontStyle": "none",
          "fontSize": 10,
          "fontColor": "#000000"
        },
        "backgroundColor": "",
        "borderColor": "#000000",
        "borderWidth": 0,
        "visible": true,
        "toggleAction": "remove",
        "maxItems": null,
        "highlightPlot": true,
        "overflow": "none",
        "adjustLayout": true,
        "align": "center",
        "verticalAlign": "bottom",
        "padding": "1%",
        "layout": "float"
      },
      "scaleX": {
        "visible": true,
        "minorGuide": {
          "alpha": 0.2,
          "lineColor": "#000000",
          "lineStyle": "solid"
        },
        "label": {
          "text": "Axis Title",
          "cursor": "pointer",
          "flat": false,
          "visible": false,
          "fontSize": 10,
          "textDecoration": "none",
          "fontWeight": "normal",
          "fontStyle": "none",
          "fontColor": "#000000"
        },
        "minValue": null,
        "maxValue": null,
        "step": null,
        "maxTicks": 0,
        "minorTicks": 0,
        "minorTick": {},
        "zooming": false,
        "values": [],
        "lineColor": "#000000",
        "lineWidth": 1,
        "tick": {
          "lineColor": "#000000",
          "lineWidth": 1,
          "visible": true
        },
        "item": {
          "fontWeight": "normal",
          "angle": "0",
          "textDecoration": "none",
          "fontSize": 10,
          "italic": false,
          "flat": false,
          "cursor": "pointer",
          "visible": true,
          "textAlign": "right",
          "fontColor": "#000000"
        },
        "itemsoverlap": false,
        "guide": {
          "visible": true,
          "alpha": 0.2,
          "lineColor": "#000000",
          "lineStyle": "dashed"
        },
        "flat": false,
        "format": "%v"
      },
      "scaleY": {
        "visible": true,
        "minorGuide": {
          "alpha": 0.2,
          "lineColor": "#000000",
          "lineStyle": "solid"
        },
        "label": {
          "text": "Axis Title",
          "cursor": "pointer",
          "flat": false,
          "visible": false,
          "fontSize": 10,
          "textDecoration": "none",
          "fontWeight": "normal",
          "fontStyle": "none",
          "fontColor": "#000000"
        },
        "maxTicks": 5,
        "minorTicks": 0,
        "minorTick": {},
        "zooming": false,
        "lineColor": "#000000",
        "lineWidth": 1,
        "tick": {
          "lineColor": "#000000",
          "lineWidth": 1,
          "visible": true
        },
        "item": {
          "fontWeight": "normal",
          "angle": "0",
          "textDecoration": "none",
          "fontSize": 10,
          "italic": false,
          "flat": false,
          "cursor": "pointer",
          "visible": true,
          "fontColor": "#000000"
        },
        "itemsoverlap": false,
        "guide": {
          "visible": true,
          "alpha": 0.5,
          "lineColor": "#000000",
          "lineStyle": "dashed"
        },
        "flat": false,
        "format": "%v"
      },
      "scaleY2": {
        "visible": true,
        "minorGuide": {
          "alpha": 0.2,
          "lineColor": "#000000",
          "lineStyle": "solid"
        },
        "label": {
          "text": "Axis Title",
          "cursor": "pointer",
          "flat": false,
          "visible": false,
          "fontSize": 10,
          "textDecoration": "none",
          "fontWeight": "normal",
          "fontStyle": "none"
        },
        "maxTicks": 0,
        "minorTicks": 0,
        "minorTick": {},
        "zooming": false,
        "lineColor": "",
        "lineWidth": 1,
        "tick": {
          "lineColor": "",
          "lineWidth": 1,
          "visible": true
        },
        "item": {
          "fontWeight": "normal",
          "angle": "0",
          "textDecoration": "none",
          "fontSize": 10,
          "italic": false,
          "flat": false,
          "cursor": "pointer",
          "visible": false
        },
        "itemsoverlap": false,
        "guide": {
          "visible": false,
          "alpha": 0.2,
          "lineColor": "",
          "lineStyle": "dashed"
        },
        "flat": false,
        "format": "%v"
      },
      "crosshairX": {
        "visible": true,
        "plotLabel": {
          "visible": false
        },
        "scaleLabel": {
          "backgroundColor": "#000",
          "fontColor": "#fff"
        }
      },
      "crosshairY": {
        "visible": true,
        "plotLabel": {
          "visible": false
        },
        "scaleLabel": {
          "backgroundColor": "#000",
          "fontColor": "#fff"
        }
      },
      "type": "scatter"
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: "100%", 
    	width: "100%" 
    });