r.2 - AssetTitle_Column (Color)

by Steve Thompson

HTML

<script src="https://code.highcharts.com/highcharts.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;
}

.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: url(http://i.imgur.com/5V6UKIT.png) no-repeat;
}

.nD-trash:hover {
  background: url(http://i.imgur.com/PjzC5eV.png)...

JavaScript

$(function() {
Highcharts.setOptions({
  lang: {
    thousandsSep: ','
  }
});

  $('#chart1').highcharts({
    chart: {
      type: 'column',
      backgroundColor: 'transparent',
      plotBorderColor: null,
      spacingBottom: 5,
      spacingTop: 15,
      spacingLeft: 10,
      spacingRight: 10
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    title: {
      text: ''
    },

    xAxis: {
      visible: false
    },
    yAxis: {
      visible: false,
      endOnTick: false,
      maxPadding: 0.025
    },
    tooltip: {
      borderWidth: 0,
      backgroundColor: "#3c3f42",
      borderRadius: 5,
      hideDelay: 1000,
      shadow: false,
      followPointer: true,
      headerFormat: '',
      formatter: function() {
        var series = this.series.chart.series;
        var data = series[1].data;
        var total = 0;
          for (var i = 0; i < data.length; i++) {
            total += data[i].y;
          }
        	var per = ((data[this.x].y / total)*100).toFixed(2); 
        return '<span style="font-size: 10px; color: white;">' + series[1].data[this.x].name + '</span><br/><span style="color: white; font-weight: bold;">' + series[1].data[this.x].y + ' (' + per + '%)</span><br/>'
      }
    },
    plotOptions: {
      column: {
        pointPadding: 0,
        groupPadding: 0.03508771929824561403508771929825, // (.chart-container width - (spacingLeft + spacingRight) / )  
        borderWidth: 0,
        borderRadius: 2,
        cursor: 'pointer',
        point: {
          events: {
            mouseOver: function() {
              var series = this.series.chart.series,
                point = this;
              Highcharts.each(series, function(ob, j) {
                Highcharts.each(ob.data, function(p, i) {
                  if (p.x === point.x) {
                    p.setState('hover')
                  }
                })
              })
           ...