1#@!#!123s

: / home / shubmkcj / urbane.createerp.com / assets / pie charts /
Filename : script.js
back
var data = [
  ['good', 25],
  ['bad', 10],
  ['neutral', 65]
];

var chart = c3.generate({
    bindto: '#piechart',
    data: {
        columns: data,
        type: 'pie'
    },
    legend: {
        show: false
    },
    tooltip: {
      position: function (data, width, height, element) {
        return {top: 0, left: 0}
      }
    },
    onrendered: function(){
      var self = this;
      console.log(self)
      
      d3Pie = d3.select('.c3-chart-arcs');
      pieSize = d3Pie.node().getBBox();
      pieTransform = d3.transform(d3Pie.attr("transform")); // credit : http://stackoverflow.com/questions/20340263/d3-retrieve-and-add-to-current-selections-attribute-value

      // MODIFY PIE POSITION
      var posX = 0+pieSize.width/1.5;
      var posY = pieTransform.translate[1];
      d3Pie.attr('transform', 'translate('+posX+','+posY+')')
    }
});

// ADD CUSTOM LEGEND
var d3legend = d3.select('.c3-chart').append('g')
  .attr('transform', 'translate('+(pieSize.width + pieSize.width/3)+',100)')
  .attr('class', 'custom-legend')
  .selectAll('g')
  .data(data)
  .enter()
  .append('g')
  .attr('transform', function(d, i){
    return 'translate(0, '+i*50+')';
  })
  .attr('data-id', function (d) { 
    return d[0]; 
  })
  .on('mouseover', function (id) {
    chart.focus(id);
  })
  .on('mouseout', function (id) {
    chart.revert();
  })

var legendRect = d3legend.append('rect')
  .attr('class', function(d, i){
    return 'custom-legend-color is-'+d[0];
  })
  .attr('width', 20)
  .attr('height', 20)
  .attr('y', -50)
  .attr('rx', 4)
  .attr('ry', 4)
  .style('fill', function(d, i){
    return chart.color(d[0])
  });

var legendValue = d3legend.append('text')
  .attr('class', 'custom-legend-value')
  .attr('x', 30)
  .attr('y', -50)
  .text(function(d, i){
    return (d[1]/100)*100 + '%';
  });

var legendTitle = d3legend.append('text')
  .attr('class', 'custom-legend-title')
  .attr('x', 0)
  .attr('y', -75)
  .attr('font-size', '15px')
  .text(function(d, i){
    return d[0];
  });
  
  
  
  $(window).on("throttledresize", function (event) {
    var options = {
        width: '100%',
        height: '100%'
    };

    var data = google.visualization.arrayToDataTable([]);
    drawChart(data, options);
});
  
  
  // var ctx = document.getElementById("myChart").getContext("2d");

// const colors = {
//   green: {
//     fill: '#e0eadf',
//     stroke: '#5eb84d' },

//   lightBlue: {
//     stroke: '#6fccdd' },

//   darkBlue: {
//     fill: '#92bed2',
//     stroke: '#3282bf' },

//   purple: {
//     fill: '#8fa8c8',
//     stroke: '#75539e' } };



// const loggedIn = [26, 36, 42, 38, 40, 30, 12];
// const available = [34, 44, 33, 24, 25, 28, 25];
// const availableForExisting = [16, 13, 25, 33, 40, 33, 45];
// const unavailable = [5, 9, 10, 9, 18, 19, 20];
// const xData = [13, 14, 15, 16, 17, 18, 19];

// const myChart = new Chart(ctx, {
//   type: 'line',
//   data: {
//     labels: xData,
//     datasets: [{
//       label: "Unavailable",
//       fill: true,
//       backgroundColor: colors.purple.fill,
//       pointBackgroundColor: colors.purple.stroke,
//       borderColor: colors.purple.stroke,
//       pointHighlightStroke: colors.purple.stroke,
//       borderCapStyle: 'butt',
//       data: unavailable },

//     {
//       label: "Available for Existing",
//       fill: true,
//       backgroundColor: colors.darkBlue.fill,
//       pointBackgroundColor: colors.darkBlue.stroke,
//       borderColor: colors.darkBlue.stroke,
//       pointHighlightStroke: colors.darkBlue.stroke,
//       borderCapStyle: 'butt',
//       data: availableForExisting },
//     {
//       label: "Available",
//       fill: true,
//       backgroundColor: colors.green.fill,
//       pointBackgroundColor: colors.lightBlue.stroke,
//       borderColor: colors.lightBlue.stroke,
//       pointHighlightStroke: colors.lightBlue.stroke,
//       borderCapStyle: 'butt',
//       data: available },
//     {
//       label: "Logged In",
//       fill: true,
//       backgroundColor: colors.green.fill,
//       pointBackgroundColor: colors.green.stroke,
//       borderColor: colors.green.stroke,
//       pointHighlightStroke: colors.green.stroke,
//       data: loggedIn }] },


//   options: {
//     responsive: false,
//     // Can't just just `stacked: true` like the docs say
//     scales: {
//       yAxes: [{
//         stacked: true }] },


//     animation: {
//       duration: 750 } } });