LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
* {
  font-family: Lato;
}

.content h1 {
  font-weight: 300;
  text-align: center;
}

svg {
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
svg text.middle {
  font-family: Lato;
  font-weight: 300;
  font-size: 24px;
}
svg .nvd3.nv-pie .nv-pieLabels text {
  font-family: Lato;
  font-size: 18px;
  font-weight: 300;
  fill: #fff !important;
}

#lbltipAddedComment {
  text-align: center;
}
JS
// Create the donut pie chart and insert it onto the page
nv.addGraph(function() {
var TotalSteps = 14;
var doneSteps = 12;

var donutChart = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.showLabels(true)
.showLegend(false)
.labelThreshold(.05)
.labelType("key")
.color(function(d) {
return d.data.color
})
.tooltipContent(
function(key, y, e, graph) { return 'Custom tooltip string' }
) // This is for when I turn on tooltips
.tooltips(false)
.donut(true)
.donutRatio(0.35);

// Insert text into the center of the donut
function centerText() {
return function() {
var svg = d3.select("svg");

var donut = svg.selectAll("g.nv-slice").filter(
function (d, i) {
return i == 0;
}
);

// Insert first line of text into middle of donut pie chart
donut.insert("text", "g")
.text("LEVEL")
.attr("class", "middle")
.attr("text-anchor", "middle")
.attr("dy", "0")
.attr('font-size', '20px')
.style("fill", "#000")
.style('font-size', '35px');
donut.insert("text", "g")
.text(e.debug_currentLevel)
.attr("class", "middle")
.attr("text-anchor", "middle")
.attr("dy", "40")
.attr('font-size', '20px')
.style("fill", "#000")
.style('font-size', '35px');

}
}

// Put the donut pie chart together
d3.select("#donut-chart svg")
.datum(seedData(TotalSteps,doneSteps))
.transition().duration(300)
.call(donutChart)
.call(centerText());

document.getElementById('lbltipAddedComment').innerHTML = 'You are '+ (TotalSteps - doneSteps) +' away...';

return donutChart;
});




// Seed data to populate donut pie chart
function seedData(TotalSteps, doneSteps) {
  var doneValue = {
    label : "",
    value: 25 * doneSteps,
    color: "#18d36f"
  };
  var myJSON = JSON.stringify(doneValue);
  var result = [];
  result.push(doneValue);
  
  var color = d3.scale.linear().domain([0,1 * (TotalSteps - doneSteps - 1)])
      .interpolate(d3.interpolateHcl)
      .range([d3.rgb("#ff0000"), d3.rgb('#8b0000')]);

  for ( var i = 0 ; i < TotalSteps - doneSteps ; i ++ ) {
    var misDoneValue = {
    label : "",
    value: 25,
    color: color(i)
  }
    result.push(misDoneValue);
  }
  return result;
}
Term
Wed, 12/27/2017 - 07:04

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv