Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* 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
- ];
- }
- };
- }
Advertisement
Add Comment
Please, Sign In to add comment