Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function drawPie(canvasId,data,legend){
- var ctx = $("#pie-canvas-" + canvasId).get(0).getContext("2d");
- var piedata = [];
- $.each(data,function(i,val){
- piedata.push({value:val.count,color:val.color,label:val.status});
- });
- var options =
- {
- tooltipTemplate: "<%= Math.round(circumference / 6.283 * 100) %>%",
- }
- var pie = new Chart(ctx).Pie(piedata,options);
- if(legend)document.getElementById("legend").innerHTML = pie.generateLegend();
- }
- printf('<table><tr>');
- echo '<td style="text-align: right;"><canvas id="pie-canvas-'
- . $canvasId
- . '" width="256" height="256" ></canvas></td><td style="text-align: left;width:360px;height:auto" id="legend" class="chart-legend"></td></tr></table>';
- echo '<script type="text/javascript">drawPie('
- . $canvasId
- . ', '
- . $data3
- .', '
- . $legend
- . ');</script>';
- function drawSegmentValues()
- {
- for(var i=0; i<myPieChart.segments.length; i++)
- {
- // Default properties for text (size is scaled)
- ctx.fillStyle="white";
- var textSize = canvas.width/10;
- ctx.font= textSize+"px Verdana";
- // Get needed variables
- var value = myPieChart.segments[i].value;
- var startAngle = myPieChart.segments[i].startAngle;
- var endAngle = myPieChart.segments[i].endAngle;
- var middleAngle = startAngle + ((endAngle - startAngle)/2);
- // Compute text location
- var posX = (radius/2) * Math.cos(middleAngle) + midX;
- var posY = (radius/2) * Math.sin(middleAngle) + midY;
- // Text offside to middle of text
- var w_offset = ctx.measureText(value).width/2;
- var h_offset = textSize/4;
- ctx.fillText(value, posX - w_offset, posY + h_offset);
- }
- }
- Math.round(myPieChart.segments[i].value/totalValue*100)+'%';
- var value = myPieChart.segments[i].value/totalValue*100;
- if(Math.round(value) !== value)
- value = (myPieChart.segments[i].value/totalValue*100).toFixed(1);
- value = value + '%';
- var data = {
- datasets: [{
- data: [
- 11,
- 16,
- 7,
- 3,
- 14
- ],
- backgroundColor: [
- "#FF6384",
- "#4BC0C0",
- "#FFCE56",
- "#E7E9ED",
- "#36A2EB"
- ],
- label: 'My dataset' // for legend
- }],
- labels: [
- "Red",
- "Green",
- "Yellow",
- "Grey",
- "Blue"
- ]
- };
- var pieOptions = {
- events: false,
- animation: {
- duration: 500,
- easing: "easeOutQuart",
- onComplete: function () {
- var ctx = this.chart.ctx;
- ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
- ctx.textAlign = 'center';
- ctx.textBaseline = 'bottom';
- this.data.datasets.forEach(function (dataset) {
- for (var i = 0; i < dataset.data.length; i++) {
- var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
- total = dataset._meta[Object.keys(dataset._meta)[0]].total,
- mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
- start_angle = model.startAngle,
- end_angle = model.endAngle,
- mid_angle = start_angle + (end_angle - start_angle)/2;
- var x = mid_radius * Math.cos(mid_angle);
- var y = mid_radius * Math.sin(mid_angle);
- ctx.fillStyle = '#fff';
- if (i == 3){ // Darker text color for lighter background
- ctx.fillStyle = '#444';
- }
- var percent = String(Math.round(dataset.data[i]/total*100)) + "%";
- ctx.fillText(dataset.data[i], model.x + x, model.y + y);
- // Display percent in another line, line break doesn't work for fillText
- ctx.fillText(percent, model.x + x, model.y + y + 15);
- }
- });
- }
- }
- };
- var pieChartCanvas = $("#pieChart");
- var pieChart = new Chart(pieChartCanvas, {
- type: 'pie', // or doughnut
- data: data,
- options: pieOptions
- });
- <canvas id="pieChart" width=200 height=200></canvas>
- var val = dataset.data[i];
- var percent = String(Math.round(val/total*100)) + "%";
- if(val != 0) {
- ctx.fillText(dataset.data[i], model.x + x, model.y + y);
- // Display percent in another line, line break doesn't work for fillText
- ctx.fillText(percent, model.x + x, model.y + y + 15);
- }
- var data = {
- datasets: [{
- data: [
- 11,
- 16,
- 7,
- 3,
- 14
- ],
- backgroundColor: [
- "#FF6384",
- "#4BC0C0",
- "#FFCE56",
- "#E7E9ED",
- "#36A2EB"
- ],
- label: 'My dataset' // for legend
- }],
- labels: [
- "Red",
- "Green",
- "Yellow",
- "Grey",
- "Blue"
- ]
- };
- var pieOptions = {
- events: false,
- animation: {
- duration: 500,
- easing: "easeOutQuart",
- onComplete: function () {
- var ctx = this.chart.ctx;
- ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
- ctx.textAlign = 'center';
- ctx.textBaseline = 'bottom';
- this.data.datasets.forEach(function (dataset) {
- for (var i = 0; i < dataset.data.length; i++) {
- var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
- total = dataset._meta[Object.keys(dataset._meta)[0]].total,
- mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
- start_angle = model.startAngle,
- end_angle = model.endAngle,
- mid_angle = start_angle + (end_angle - start_angle)/2;
- var x = mid_radius * Math.cos(mid_angle);
- var y = mid_radius * Math.sin(mid_angle);
- ctx.fillStyle = '#fff';
- if (i == 3){ // Darker text color for lighter background
- ctx.fillStyle = '#444';
- }
- var val = dataset.data[i];
- var percent = String(Math.round(val/total*100)) + "%";
- if(val != 0) {
- ctx.fillText(dataset.data[i], model.x + x, model.y + y);
- // Display percent in another line, line break doesn't work for fillText
- ctx.fillText(percent, model.x + x, model.y + y + 15);
- }
- }
- });
- }
- }
- };
- var pieChartCanvas = $("#pieChart");
- var pieChart = new Chart(pieChartCanvas, {
- type: 'pie', // or doughnut
- data: data,
- options: pieOptions
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement