• 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;
        }
      </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:load 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:load 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%',
      });
    });