r.2 - AssetTitle_WordCloud

JQWidgets

by Steve Thompson

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/nd-cdn/jqx.base-3.9.0.css" />
<script src="https://s3.amazonaws.com/nd-cdn/jqx-all-3.9.0.js"></script>
<div class="container">
  <div class="cont-box-shadow">
    <div class="info">
      <div class="var-icon">
        <div class="var-structure var-blue">
          (
        </div>
        <div class="var-type var-blue">
          A
        </div>
        <div class="var-structure var-blue">
          )
        </div>
      </div>
      <div class="var-name">Square Feet</div>
      <a href="#">
        <div class="info-icon"></div>
      </a>
      <a href="#">
        <div class="alert-icon"></div>
      </a>
    </div>
    <div class="chart-container">
      <div id="chart1"></div>
    </div>
    <div class="menu-tools">
      <a href="#">
        <div class="nD-edit sm-icons" title="Edit"></div>
      </a>
      <a href="#">
        <div class="nD-trash sm-icons" title="Delete"></div>
      </a>
    </div>
  </div>
</div>

CSS

.container {
  width: 196px;
  height: 196px;
  background-color: #eceded;
  position: relative;
  padding: 2px;
  overflow: hidden;
}

.cont-box-shadow {
  width: 100%;
  height: 100%;
  background-color: white;
  -webkit-box-shadow: 0px 1px 1px 1px rgba(171, 172, 172, 1);
  -moz-box-shadow: 0px 1px 1px 1px rgba(171, 172, 172, 1);
  box-shadow: 0px 1px 1px 1px rgba(171, 172, 172, 1);
}

.info {
  width: 100%;
  height: 25px;
  background-color: #555555;
  margin: 0 auto;
}

.var-icon {
  position: relative;
  float: left;
  margin: 5px;
  width: 19px;
  height: 14px;
  font-size: 12px;
}

.var-blue {
  color: #42a5f5;
}

.var-structure {
  position: relative;
  float: left;
}

.var-type {
  position: relative;
  float: left;
}

.var-name {
  font-size: 12px;
  color: white;
  position: relative;
  float: left;
  margin-top: 5px;
}

.alert-icon {
  display: none;
  background: url(http://i.imgur.com/TcAIU77.png) no-repeat;
  position: relative;
  float: right;
  margin: 5px 3px;
  width: 16px;
  height: 14px;
}

.info-icon {
  background: url(http://i.imgur.com/NhumKdn.png) no-repeat;
  position: relative;
  float: right;
  margin: 5px 5px 5px 0;
  width: 14px;
  height: 14px;
}

.info-icon:hover {
  background: url(http://i.imgur.com/Y4NJcU5.png) no-repeat;
}

.chart-container {
  width: 100%;
  height: 77%;
}

#chart1 {
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.jqx-tag-cloud ul {
  margin: 0 !important;  
}

.jqx-tag-cloud-item {
  padding: 2px !important;
}

.menu-tools {
  display: none;
  position: relative;
  float: right;
  margin-right: 5px;
}

.container:hover .menu-tools {
  display: block;
}

.sm-icons {
  width: 15px;
  height: 15px;
  position: relative;
  float: left;
  margin-right: 5px;
}

.nD-edit {
  background: url(http://i.imgur.com/2JA9xGB.png) no-repeat;
}

.nD-edit:hover {
  background: url(http://i.imgur.com/wl0o0oZ.png) no-repeat;
}

.nD-trash {
  background:...

JavaScript

$(document).ready(function() {
          var data = [{
            countryName: "Australia",
            technologyRating: 35
          }, {
            countryName: "United States",
            technologyRating: 60
          }, {
            countryName: "Germany",
            technologyRating: 55
          }, {
            countryName: "Brasil",
            technologyRating: 20
          }, {
            countryName: "United Kingdom",
            technologyRating: 50
          }, {
            countryName: "Japan",
            technologyRating: 80
          }, {
            countryName: "Spain",
            technologyRating: 40
          }, {
            countryName: "Canada",
            technologyRating: 35
          }, {
            countryName: "Bahamas",
            technologyRating: 10
          }, {
            countryName: "Mexico",
            technologyRating: 20
          }, {
            countryName: "Portugal",
            technologyRating: 45
          }, {
            countryName: "Finland",
            technologyRating: 50
          }, {
            countryName: "Norway",
            technologyRating: 45
          }, {
            countryName: "Korea",
            technologyRating: 5
          }, {
            countryName: "China",
            technologyRating: 75
          }];
          var source = {
            localdata: data,
            datatype: "array",
            datafields: [{
              name: 'countryName'
            }, {
              name: 'technologyRating'
            }]
          };
          var dataAdapter = new $.jqx.dataAdapter(source, {});
          $('#chart1').jqxTagCloud({
            source: dataAdapter,
            minFontSize: 8,
            maxFontSize: 18,
            maxColor: '#2c2c2c',
            minColor: '#9c9c9c',
            displayLimit: 100,
            displayMember: 'countryName',
            valueMember: 'technologyRating'
          });
        });