• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <link href='//fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        zingchart.THEME = "classic";
        var myConfig = {
          "globals": {
            "font-family": "Roboto",
            "shadow": 0
          },
          "type": "bubble",
          "background-color": "#f9f9f9",
          "title": {
            "text": "NHL 2014-15 Regular Season Standings",
            "background-color": "#333",
            "font-weight": 300
          },
          "labels": [{
            "text": "Tampa Bay and Chicao both beat conference<br>leaders NY Rangers and Anaheim, respectively,<br>to go on to the Stanley Cup Finals.",
            "background-color": "#FFF",
            "border-color": "#333",
            "border-width": 1,
            "shadow": 0,
            "padding": "5px 10px",
            "font-size": 12,
            "text-align": "left",
            "x": 350,
            "y": 80
          }],
          "scale-y": {
            "values": "20:55:5",
            "label": {
              "text": "Regular Season Wins",
              "color": "#333",
              "font-weight": 300,
              "font-size": 12
            },
            "line-color": "#999",
            "line-width": 1,
            "guide": {
              "line-color": "#999",
              "line-width": 1,
              "line-style": "solid"
            },
            "tick": {
              "line-color": "#999",
              "line-width": 1
            }
          },
          "scale-x": {
            "values": "20:55:5",
            "label": {
              "text": "Regular Season Losses",
              "color": "#333",
              "font-weight": 300,
              "font-size": 12
            },
            "line-color": "#999",
            "line-width": 1,
            "guide": {
              "line-color": "#999",
              "line-width": 1,
              "line-style": "solid"
            },
            "tick": {
              "line-color": "#999",
              "line-width": 1
            }
          },
          "series": [{
              "value-box": {
                "text": "%data-western-names",
                "font-weight": 300,
                "color": "#FFF",
                "alpha": 0,
                "rules": [{
                  "rule": "%i == 10",
                  "alpha": 1
                }]
              },
              "marker": {
                "background-color": "#003E7E",
                "alpha": 0.3,
                "rules": [{
                  "rule": "%i == 10",
                  "alpha": 1
                }]
              },
              "values": [
                [50, 24, 56],
                [44, 24, 62],
                [33, 40, 89],
                [31, 39, 90],
                [31, 41, 92],
                [27, 40, 95],
                [30, 45, 97],
                [26, 43, 99],
                [28, 46, 100],
                [29, 48, 101],
                [28, 48, 102],
                [25, 47, 104],
                [24, 51, 109],
                [24, 51, 109]
              ],
              "data-western-names": ["Arizona", "Edmonton", "San Jose", "Colorado", "Dallas", "Los Angeles", "Calgary", "Winnipeg", "Minnesota", "Vancouver", "Chicago", "Nashville", "St. Louis", "Anaheim"],
              "data-western-offset": [
                "-520px",
                "-420px",
                "-540px",
                "-400px",
                "-480px",
                "-500px",
                "-380px",
                "-600px",
                "-580px",
                "-440px",
                "-300px",
                "-340px",
                "-360px",
                "-460px"
              ],
              "data-western-playoffs": [
                "Did not make",
                "Did not make",
                "Did not make",
                "Did not make",
                "Did not make",
                "Did not make",
                "Made",
                "Made",
                "Made",
                "Made",
                "Made",
                "Made",
                "Made",
                "Made"
              ],
              "data-western-finals": [
                "",
                "",
                "",
                "",
                "",
                "",
                "",
                "",
                "",
                "",
                "Stanley Cup Finals",
                "",
                "",
                ""
              ],
              "tooltip": {
                "html-mode": true,
                "border-color": "#003E7E",
                "border-width": 1,
                "padding": "10px",
                "text": "<div style='border-bottom:1px solid #d9d9d9;float:left;padding-bottom:5px;margin-bottom:5px;'><div style='float:left;background-image:url(http://cdn.nhle.com/projects/ice3-ui/com.nhl.ice3.ui.t5.components/GlobalPageImports/images/smLogoSprite.png);background-position:0px %data-western-offset;width:40px;height:20px;display:block;'></div><span style='float:left;padding:0px 5px;text-transform:uppercase;font-size:14px;line-height:20px;color:#333;font-family:Roboto;font-weight:900;'>%data-western-names</span></div><div style='clear:both;text-align:center;font-size:14px;'><span style='font-family:Roboto;font-weight:900;font-size:14px;'>Wins</span>: %v<br><span style='font-family:Roboto;font-weight:900;font-size:14px;'>Losses</span>: %k<br><span style='font-family:Roboto;font-weight:900;font-size:14px;'>Points</span>: %v2<br><span>%data-western-playoffs playoffs</span><br><span style='font-weight:900;text-decoration:underline;'>%data-western-finals</span></div>",
                "background-color": "#FFF",
                "color": "#333"
              }
            },
            {
              "value-box": {
                "text": "%data-eastern-names",
                "font-weight": 300,
                "color": "#FFF",
                "alpha": 0,
                "rules": [{
                  "rule": "%i == 13",
                  "alpha": 1
                }]
              },
              "marker": {
                "background-color": "#BA112D",
                "alpha": 0.3,
                "rules": [{
                  "rule": "%i == 13",
                  "alpha": 1
                }]
              },
              "values": [
                [51, 23, 54],
                [44, 30, 68],
                [41, 30, 71],
                [36, 32, 78],
                [31, 33, 84],
                [35, 42, 89],
                [29, 38, 91],
                [27, 41, 96],
                [27, 43, 98],
                [26, 43, 99],
                [25, 43, 100],
                [28, 47, 101],
                [26, 45, 101],
                [24, 50, 108],
                [22, 50, 110],
                [22, 53, 113]
              ],
              "data-eastern-names": ["Buffalo", "Toronto", "Carolina", "New Jersey", "Philadelphia", "Columbus", "Florida", "Boston", "Pittsburgh", "Ottawa", "Detroit", "NY Islanders", "Washington", "Tampa Bay", "Montréal", "NY Rangers"],
              "data-eastern-offset": [
                "-120px", "-180px", "-220px", "-0px", "-60px", "-560px", "-240px", "-100px", "-80px", "-160px", "-320px", "-20px", "-280px", "-260px", "-140px", "-40px"
              ],
              "data-eastern-playoffs": [
                "Did not make",
                "Did not make",
                "Did not make",
                "Did not make",
                "Did not make",
                "Did not make",
                "Did not make",
                "Did not make",
                "Made",
                "Made",
                "Made",
                "Made",
                "Made",
                "Made",
                "Made",
                "Made",
                "Made"
              ],
              "data-eastern-finals": [
                "",
                "",
                "",
                "",
                "",
                "",
                "",
                "",
                "",
                "",
                "",
                "",
                "",
                "Stanley Cup Finals",
                "",
                ""
              ],
              "tooltip": {
                "html-mode": true,
                "border-color": "#BA112D",
                "border-width": 1,
                "padding": "10px",
                "text": "<div style='border-bottom:1px solid #d9d9d9;float:left;padding-bottom:5px;margin-bottom:5px;'><div style='float:left;background-image:url(http://cdn.nhle.com/projects/ice3-ui/com.nhl.ice3.ui.t5.components/GlobalPageImports/images/smLogoSprite.png);background-position:0px %data-eastern-offset;width:40px;height:20px;display:block;'></div><span style='float:left;padding:0px 5px;text-transform:uppercase;font-size:14px;line-height:20px;color:#333;font-family:Roboto;font-weight:900;'>%data-eastern-names</span></div><div style='clear:both;text-align:center;font-size:14px;'><span style='font-family:Roboto;font-weight:900;font-size:14px;'>Wins</span>: %v<br><span style='font-family:Roboto;font-weight:900;font-size:14px;'>Losses</span>: %k<br><span style='font-family:Roboto;font-weight:900;font-size:14px;'>Points</span>: %v2<br><span>%data-eastern-playoffs playoffs</span><br><span style='font-weight:900;text-decoration:underline;'>%data-eastern-finals</span></div>",
                "background-color": "#FFF",
                "color": "#333"
              }
            }
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 500,
          width: 725
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <link href='//fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='myChart'></div>
    </body>
    
    </html>
    
          
    zingchart.THEME = "classic";
    var myConfig = {
      "globals": {
        "font-family": "Roboto",
        "shadow": 0
      },
      "type": "bubble",
      "background-color": "#f9f9f9",
      "title": {
        "text": "NHL 2014-15 Regular Season Standings",
        "background-color": "#333",
        "font-weight": 300
      },
      "labels": [{
        "text": "Tampa Bay and Chicao both beat conference<br>leaders NY Rangers and Anaheim, respectively,<br>to go on to the Stanley Cup Finals.",
        "background-color": "#FFF",
        "border-color": "#333",
        "border-width": 1,
        "shadow": 0,
        "padding": "5px 10px",
        "font-size": 12,
        "text-align": "left",
        "x": 350,
        "y": 80
      }],
      "scale-y": {
        "values": "20:55:5",
        "label": {
          "text": "Regular Season Wins",
          "color": "#333",
          "font-weight": 300,
          "font-size": 12
        },
        "line-color": "#999",
        "line-width": 1,
        "guide": {
          "line-color": "#999",
          "line-width": 1,
          "line-style": "solid"
        },
        "tick": {
          "line-color": "#999",
          "line-width": 1
        }
      },
      "scale-x": {
        "values": "20:55:5",
        "label": {
          "text": "Regular Season Losses",
          "color": "#333",
          "font-weight": 300,
          "font-size": 12
        },
        "line-color": "#999",
        "line-width": 1,
        "guide": {
          "line-color": "#999",
          "line-width": 1,
          "line-style": "solid"
        },
        "tick": {
          "line-color": "#999",
          "line-width": 1
        }
      },
      "series": [{
          "value-box": {
            "text": "%data-western-names",
            "font-weight": 300,
            "color": "#FFF",
            "alpha": 0,
            "rules": [{
              "rule": "%i == 10",
              "alpha": 1
            }]
          },
          "marker": {
            "background-color": "#003E7E",
            "alpha": 0.3,
            "rules": [{
              "rule": "%i == 10",
              "alpha": 1
            }]
          },
          "values": [
            [50, 24, 56],
            [44, 24, 62],
            [33, 40, 89],
            [31, 39, 90],
            [31, 41, 92],
            [27, 40, 95],
            [30, 45, 97],
            [26, 43, 99],
            [28, 46, 100],
            [29, 48, 101],
            [28, 48, 102],
            [25, 47, 104],
            [24, 51, 109],
            [24, 51, 109]
          ],
          "data-western-names": ["Arizona", "Edmonton", "San Jose", "Colorado", "Dallas", "Los Angeles", "Calgary", "Winnipeg", "Minnesota", "Vancouver", "Chicago", "Nashville", "St. Louis", "Anaheim"],
          "data-western-offset": [
            "-520px",
            "-420px",
            "-540px",
            "-400px",
            "-480px",
            "-500px",
            "-380px",
            "-600px",
            "-580px",
            "-440px",
            "-300px",
            "-340px",
            "-360px",
            "-460px"
          ],
          "data-western-playoffs": [
            "Did not make",
            "Did not make",
            "Did not make",
            "Did not make",
            "Did not make",
            "Did not make",
            "Made",
            "Made",
            "Made",
            "Made",
            "Made",
            "Made",
            "Made",
            "Made"
          ],
          "data-western-finals": [
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "Stanley Cup Finals",
            "",
            "",
            ""
          ],
          "tooltip": {
            "html-mode": true,
            "border-color": "#003E7E",
            "border-width": 1,
            "padding": "10px",
            "text": "<div style='border-bottom:1px solid #d9d9d9;float:left;padding-bottom:5px;margin-bottom:5px;'><div style='float:left;background-image:url(http://cdn.nhle.com/projects/ice3-ui/com.nhl.ice3.ui.t5.components/GlobalPageImports/images/smLogoSprite.png);background-position:0px %data-western-offset;width:40px;height:20px;display:block;'></div><span style='float:left;padding:0px 5px;text-transform:uppercase;font-size:14px;line-height:20px;color:#333;font-family:Roboto;font-weight:900;'>%data-western-names</span></div><div style='clear:both;text-align:center;font-size:14px;'><span style='font-family:Roboto;font-weight:900;font-size:14px;'>Wins</span>: %v<br><span style='font-family:Roboto;font-weight:900;font-size:14px;'>Losses</span>: %k<br><span style='font-family:Roboto;font-weight:900;font-size:14px;'>Points</span>: %v2<br><span>%data-western-playoffs playoffs</span><br><span style='font-weight:900;text-decoration:underline;'>%data-western-finals</span></div>",
            "background-color": "#FFF",
            "color": "#333"
          }
        },
        {
          "value-box": {
            "text": "%data-eastern-names",
            "font-weight": 300,
            "color": "#FFF",
            "alpha": 0,
            "rules": [{
              "rule": "%i == 13",
              "alpha": 1
            }]
          },
          "marker": {
            "background-color": "#BA112D",
            "alpha": 0.3,
            "rules": [{
              "rule": "%i == 13",
              "alpha": 1
            }]
          },
          "values": [
            [51, 23, 54],
            [44, 30, 68],
            [41, 30, 71],
            [36, 32, 78],
            [31, 33, 84],
            [35, 42, 89],
            [29, 38, 91],
            [27, 41, 96],
            [27, 43, 98],
            [26, 43, 99],
            [25, 43, 100],
            [28, 47, 101],
            [26, 45, 101],
            [24, 50, 108],
            [22, 50, 110],
            [22, 53, 113]
          ],
          "data-eastern-names": ["Buffalo", "Toronto", "Carolina", "New Jersey", "Philadelphia", "Columbus", "Florida", "Boston", "Pittsburgh", "Ottawa", "Detroit", "NY Islanders", "Washington", "Tampa Bay", "Montréal", "NY Rangers"],
          "data-eastern-offset": [
            "-120px", "-180px", "-220px", "-0px", "-60px", "-560px", "-240px", "-100px", "-80px", "-160px", "-320px", "-20px", "-280px", "-260px", "-140px", "-40px"
          ],
          "data-eastern-playoffs": [
            "Did not make",
            "Did not make",
            "Did not make",
            "Did not make",
            "Did not make",
            "Did not make",
            "Did not make",
            "Did not make",
            "Made",
            "Made",
            "Made",
            "Made",
            "Made",
            "Made",
            "Made",
            "Made",
            "Made"
          ],
          "data-eastern-finals": [
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "Stanley Cup Finals",
            "",
            ""
          ],
          "tooltip": {
            "html-mode": true,
            "border-color": "#BA112D",
            "border-width": 1,
            "padding": "10px",
            "text": "<div style='border-bottom:1px solid #d9d9d9;float:left;padding-bottom:5px;margin-bottom:5px;'><div style='float:left;background-image:url(http://cdn.nhle.com/projects/ice3-ui/com.nhl.ice3.ui.t5.components/GlobalPageImports/images/smLogoSprite.png);background-position:0px %data-eastern-offset;width:40px;height:20px;display:block;'></div><span style='float:left;padding:0px 5px;text-transform:uppercase;font-size:14px;line-height:20px;color:#333;font-family:Roboto;font-weight:900;'>%data-eastern-names</span></div><div style='clear:both;text-align:center;font-size:14px;'><span style='font-family:Roboto;font-weight:900;font-size:14px;'>Wins</span>: %v<br><span style='font-family:Roboto;font-weight:900;font-size:14px;'>Losses</span>: %k<br><span style='font-family:Roboto;font-weight:900;font-size:14px;'>Points</span>: %v2<br><span>%data-eastern-playoffs playoffs</span><br><span style='font-weight:900;text-decoration:underline;'>%data-eastern-finals</span></div>",
            "background-color": "#FFF",
            "color": "#333"
          }
        }
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 500,
      width: 725
    });