• 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 {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
    
            .chart--container {
                min-height: 150px;
                width: 100%;
                height: 100%;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 480px;
            }
        </style>
    </head>
    
    <body>
        <!-- CHART CONTAINER -->
        <div id="myChart" class="chart--container">
            <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
        </div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window.onload event for Javascript to run after HTML
            // because this Javascript is injected into the document head
            window.addEventListener('load', () => {
                // Javascript code to execute after DOM content
    
                // full ZingChart schema can be found here:
                // https://www.zingchart.com/docs/api/json-configuration/
                let chartConfig = {
                    "graphset": [{
                        "type": "hboxplot",
                        "background-color": "white",
                        "plot": {
                            "dataStationName": ["BARDUFOSS", "E6 HEIA", "DIVIDALEN II", "TAMOKDALEN", "SJUFJELLET", "BONES I BARDU"],
                            "dataStationElevation": [69, 297, 391, 481, 484, 540]
                        },
                        "plotarea": {
                            "margin": "dynamic"
                        },
                        "scale-x": {
                            "zooming": true,
                            "ranged": false,
                            "label": {
                                "text": "Altitude"
                            },
                            "format": "%v",
                            "tick": {
                                "-visible": false
                            },
                            "item": {
                                "font-size": "14px"
                            },
                            "guide": {
                                "lineWidth": 1,
                                "visible": true
                            },
                            "minValue": 0,
                            "maxValue": 600,
                        },
                        "scale-y": {
                            "label": {
                                "text": "Temp (Celsius)"
                            },
                            "ref-line": {
                                "visible": true,
                                "line-color": "darkgrey",
                                "line-width": 1,
                                "line-style": "solid"
                            },
                            "format": "%v C",
                            "line-color": "darkgrey",
                            "tick": {
                                "line-color": "darkgrey"
                            },
                            "item": {
                                "font-size": "14px"
                            },
                            "guide": {
                                "visible": true
                            }
                        },
                        "options": {
                            "box": {
                                "border-color": "black",
                                "border-width": 1,
                                "tooltip": {
                                    "paddingBottom": 5,
                                    "background-color": "darkgrey",
                                    "border-color": "lightgrey",
                                    "border-radius": 10,
                                    "text": "%data-station-name,  %data-station-elevation moh"
                                }
                            }
                        },
                        "series": [{
                            "barWidth": 25,
                            "url": "http://www.google.com",
                            "target": "_blank",
                            "data-box": [
                                [69, 2, 3, 3.8, 4, 4.2],
                                [297, 1, 2.2, 2.4, 3.1, 3.8],
                                [391, 0.4, 0.766666651, 1.4, 1.73333335, 2.3],
                                [481, 2.1, 2.7, 3.2, 3.7, 4.5],
                                [484, -4.3, -3.8, -3.1, -2.26666665, -1],
                                [540, 1.6, 2.5, 3.05, 3.6, 5.2]
                            ]
                        }]
                    }]
                };
    
                // render chart
                zingchart.render({
                    id: 'myChart',
                    data: chartConfig,
                    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>
        <!-- CHART CONTAINER -->
        <div id="myChart" class="chart--container">
          <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
        </div>
      </body>
    </html>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }
    
    .zc-ref {
      display: none;
    }
    // window.onload event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
    
      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartConfig = {
    "graphset":[
        {
            "type":"hboxplot",
            "background-color":"white",
            "plot":{
                "dataStationName":["BARDUFOSS","E6 HEIA","DIVIDALEN II","TAMOKDALEN","SJUFJELLET","BONES I BARDU"],
                "dataStationElevation":[69,297,391,481,484,540]
                },
            "plotarea":{
                "margin":"dynamic"
                },
            "scale-x":{
                "zooming":true,
                "ranged":false,
                "label":{
                    "text":"Altitude"
                    },
                "format":"%v",
                "tick":{
                    "-visible":false
                    },
                "item":{
                    "font-size":"14px"
                    },
                "guide":{
                    "lineWidth":1,
                    "visible":true
                    },
                "minValue":0,
                "maxValue":600,
                },
            "scale-y":{
                "label":{
                    "text":"Temp (Celsius)"
                    },
                "ref-line":{
                    "visible":true,
                    "line-color":"darkgrey",
                    "line-width":1,
                    "line-style":"solid"
                    },
                "format":"%v C",
                "line-color":"darkgrey",
                "tick":{
                    "line-color":"darkgrey"
                    },
                "item":{
                    "font-size":"14px"
                    },
                "guide":{
                    "visible":true
                    }
                },
            "options":{
                "box":{
                    "border-color":"black",
                    "border-width":1,
                    "tooltip":{
                        "paddingBottom":5,
                        "background-color":"darkgrey",
                        "border-color":"lightgrey",
                        "border-radius":10,
                        "text":"%data-station-name,  %data-station-elevation moh"
                        }
                    }
                },
            "series":[
                {
                    "barWidth":25,
                    "url":"http://www.google.com",
                    "target":"_blank",
                    "data-box":[
                      [69,2,3,3.8,4,4.2],
                      [297,1,2.2,2.4,3.1,3.8],
                      [391,0.4,0.766666651,1.4,1.73333335,2.3],
                      [481,2.1,2.7,3.2,3.7,4.5],
                      [484,-4.3,-3.8,-3.1,-2.26666665,-1],
                      [540,1.6,2.5,3.05,3.6,5.2]
                    ]
                    }
            ]
            }
    ]
    };
    
      // render chart
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        width: '100%',
      });
    });