/* funzione per donutchart animato */
function drawDonutChart(element, percent, width, height,c1, c2,name)
{
              
    var duration   = 2000;

    var  color = d3.scale.ordinal()
           .range([c1,c2]);

    var dataset = {
          lower: calcPercent(0),
          upper: calcPercent(percent)
        },
        radius = Math.min(width, height) / 2,
        pie = d3.layout.pie().sort(null),
        format = d3.format(".0%");

    var arc = d3.svg.arc()
          .innerRadius(radius - radius/4)
          .outerRadius(radius);

    var svg = d3.select(element).append("svg")
          .attr("id",name)
          .attr("width", width+5)
          .attr("height", height+5)
          .append("g")
          .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


    var path = svg.selectAll("path")
          .data(pie(dataset.lower))
          .enter().append("path")
          .attr("fill", function(d,i) { return color(d+i); })
          .attr("d", arc)
          .each(function(d) { this._current = d; }); // store the initial values

    var text = svg.append("text")
          .attr("text-anchor", "middle")
          .attr("dy", ".35em")                   
         .attr("fill", function(d) { return color(d); })
          .attr("font-size", 40)
          .attr("font-weight",900);


      var progress = 0;
      var timeout = setTimeout(function () {
        clearTimeout(timeout);
        path = path.data(pie(dataset.upper)); // update the data
        path.transition().duration(duration).attrTween("d", function (a) {
          // Store the displayed angles in _current.
          // Then, interpolate from _current to the new angles.
          // During the transition, _current is updated in-place by d3.interpolate.
          var i  = d3.interpolate(this._current, a);
          var i2 = d3.interpolate(progress, percent);
          this._current = i(0);
          return function(t) {
            text.text( format(i2(t) / 100) );
            return arc(i(t));
          };
        }); // redraw the arcs
      }, 200);
    }


function calcPercent(percent) {
  return [percent, 100-percent];
}


function drawStarPath(element,width,height,data)
  {
      var parseDate = d3.time.format("%d/%m/%Y");
      var sd = Object.keys(data).length;  
      var xmin = parseDate.parse(data[0].data);
      var xmax = parseDate.parse(data[sd-1].data);
    
      var svg = dimple.newSvg(element,width,height);
      svg.attr("id","starPath");
      var myChart = new dimple.chart(svg, data);
      myChart.x = 20;
      myChart.width = (width/100)*95;
      
      var xAxis = myChart.addTimeAxis("x", "data","%d/%m/%Y","%b/%y");
      xAxis.addOrderRule("Date");
      xAxis.timePeriod = d3.time.months;
      xAxis.timeInterval = 2;
      xAxis.overrideMin  = d3.time.month.offset(xmin,-1);
      xAxis.overrideMax  = d3.time.month.offset(xmax,+1);
      xAxis.title = null;
      
      var yAxis = myChart.addMeasureAxis("y", "voto");
      yAxis.overrideMin=18;
      yAxis.title = null;
            
      var line = myChart.addSeries(null, dimple.plot.line);
      line.lineWeight = 3;
      line.lineMarkers = true;
      
      

      myChart.draw(3000);
      
      // creazione array id nodi
      var keys = [];

      for (var i = 0; i < data.length; i++) 
         keys.push(line._positionData[i].key);   
    

    // associazione id->dato
    for (var i = 0; i < data.length; i++) {
         data[i].key = keys[i];   
    }
      
      line.getTooltipText = function(e) 
      {
 
        //acquisizione chiave associata
        var key = e.key;

        // ricerca dato e assegnazione tooltip
        for (var i = 0; i < data.length; i++) 
        {
             if (data[i].key === key)

                 // Define the tooltip content.
                 return [
                     "nome: "+ data[i].nome,
                     "voto: "+ e.yValue,
                     "data: "+ data[i].data
                 ];
        }

      };

   
  }