Canvas pie chart with CSS bar chart fallback
How do I make an canvas pie chart with css bar chart fallback?
What is a canvas pie chart with css bar chart fallback? How do you make a canvas pie chart with css bar chart fallback? This script and codes were developed by Ludvig Lindblom on 25 July 2022, Monday.
Canvas pie chart with CSS bar chart fallback Previews
Canvas pie chart with CSS bar chart fallback - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas pie chart with CSS bar chart fallback</title> <meta name='viewport' content='width=device-width, initial-scale=1.0' /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { padding: 50px 0; background: #cceffc;
}
#live-poll-area { overflow: auto;
}
.graph-container { display: none;
}
.canvas .graph-container { display: block;
}
.graph-container .graph { width: 110px; margin: 0 auto 25px auto;
}
.graph-container .graph canvas { max-width: 110px; height: auto;
}
.bar-chart { list-style-type: none; margin: 0 auto; padding: 0; max-width: 244px;
}
.bar-chart li { margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 1.45; overflow: auto;
}
.bar-chart span { display: block;
}
.bar-chart .label { font-weight: 700; width: 70%; float: left;
}
.bar-chart .percentage { width: 30%; float: right; font-size: 12px; text-align: right;
}
.bar-chart .bar-track { clear: both; display: block; background: #e6f0f2; box-shadow: 0 2px 0 #cccccc; height: 5px; overflow: visible; margin-bottom: 20px;
}
.bar-chart .bar { display: block; height: 5px;
}
.bar-chart .answer-0 .bar { background-color: #ce0f42; box-shadow: 0 2px 0 #99102e;
}
.bar-chart .answer-1 .bar { background-color: #72be44; box-shadow: 0 2px 0 #538e32;
}
.bar-chart .answer-2 .bar { background-color: #f15637; box-shadow: 0 2px 0 #bd4429;
}
.bar-chart .answer-3 .bar { background-color: #8b1851; box-shadow: 0 2px 0 #53002c;
}
@media only screen and (min-width: 600px) { .canvas .graph-container .graph { margin: 0 30px; padding: 0; float: left; } .canvas .bar-chart { float: left; min-width: 244px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="live-poll-area"> <div class="graph-container"> <div class="graph"></div> </div> <div class="answer-list"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Canvas pie chart with CSS bar chart fallback - Script Codes CSS Codes
body { padding: 50px 0; background: #cceffc;
}
#live-poll-area { overflow: auto;
}
.graph-container { display: none;
}
.canvas .graph-container { display: block;
}
.graph-container .graph { width: 110px; margin: 0 auto 25px auto;
}
.graph-container .graph canvas { max-width: 110px; height: auto;
}
.bar-chart { list-style-type: none; margin: 0 auto; padding: 0; max-width: 244px;
}
.bar-chart li { margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 1.45; overflow: auto;
}
.bar-chart span { display: block;
}
.bar-chart .label { font-weight: 700; width: 70%; float: left;
}
.bar-chart .percentage { width: 30%; float: right; font-size: 12px; text-align: right;
}
.bar-chart .bar-track { clear: both; display: block; background: #e6f0f2; box-shadow: 0 2px 0 #cccccc; height: 5px; overflow: visible; margin-bottom: 20px;
}
.bar-chart .bar { display: block; height: 5px;
}
.bar-chart .answer-0 .bar { background-color: #ce0f42; box-shadow: 0 2px 0 #99102e;
}
.bar-chart .answer-1 .bar { background-color: #72be44; box-shadow: 0 2px 0 #538e32;
}
.bar-chart .answer-2 .bar { background-color: #f15637; box-shadow: 0 2px 0 #bd4429;
}
.bar-chart .answer-3 .bar { background-color: #8b1851; box-shadow: 0 2px 0 #53002c;
}
@media only screen and (min-width: 600px) { .canvas .graph-container .graph { margin: 0 30px; padding: 0; float: left; } .canvas .bar-chart { float: left; min-width: 244px; }
}Canvas pie chart with CSS bar chart fallback - Script Codes JS Codes
var percentageArray = new Array();
percentageArray.push(30.63);
percentageArray.push(26.25);
percentageArray.push(14.38);
percentageArray.push(28.75);
var answerArray = new Array();
answerArray.push('Kollektivtrafik');
answerArray.push('Bil');
answerArray.push('Cykel');
answerArray.push('Gå');
$.fn.createBarchart = function (optionvariables) { var chartContainer = $(this); var defaults = { 'maxWidth': 244 }; var options = $.extend({}, defaults, optionvariables); var self = $(this), graphContainer = self.parent().find('.graph-container .graph'), barChart = $('<ul/>', { class: 'bar-chart' }); barChart.appendTo(chartContainer); $.each(answerArray, function(index, value) { var chartAnswer = $('<li/>', { class: 'answer-' + index }), answerLabel = $('<span/>', { class: 'label', text: value }), percentageValue = percentageArray[index].toString(), answerPercentage = $('<span/>', { class: 'percentage', text: percentageValue.replace('.', ',') + '%' }), barTrack = $('<span/>', { class: 'bar-track' }), bar = $('<span />', { class: 'bar', style: 'width: ' + percentageValue + '%;' }); chartAnswer.appendTo(barChart); answerLabel.appendTo(chartAnswer); answerPercentage.appendTo(chartAnswer); barTrack.appendTo(chartAnswer); bar.appendTo(barTrack); }); if($('html').hasClass('canvas')) { barChart.chart( { graphContainer: graphContainer } ); }
};
$.fn.chart = function (optionvariables) { var chart = $(this); var defaults = { 'canvasSize': 220, 'graphContainer': $('.graph-container .graph') }; var options = $.extend({}, defaults, optionvariables); return chart.each(function () { var listItem = chart.find('li'), listItems = listItem.length, canvas = document.createElement('canvas'), canvasWidth = options.canvasSize, canvasHeight = options.canvasSize, graphContainer = options.graphContainer, total = 0, totalPercentage = 0, data = [], newData = [], i = 0, startingAngle, arcSize, endingAngle; $.each(percentageArray, function(index, value) { newData.push(3.6 * value); }); function sumTo(a, i) { var sum = 0; for (var j = 0; j < i; j++) { sum += a[j]; } return sum - 90; } function degreesToRadians(degrees) { return ((degrees * Math.PI)/180); } canvas.setAttribute('width', canvasWidth); canvas.setAttribute('height', canvasHeight); canvas.setAttribute('id', 'chartCanvas'); graphContainer.append(canvas); var cvs = document.getElementById('chartCanvas'), ctx = cvs.getContext('2d'), centerX = canvasWidth / 2, centerY = canvasHeight / 2, radius = canvasWidth / 2; ctx.clearRect(0, 0, canvasWidth, canvasHeight); listItem.each(function(e) { startingAngle = degreesToRadians(sumTo(newData, i)); arcSize = degreesToRadians(newData[i]); endingAngle = startingAngle + arcSize; ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, false); ctx.closePath(); ctx.fillStyle = $(this).find('.bar').css('backgroundColor'); ctx.fill(); ctx.restore(); i++; }); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, radius * .45, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = $('body').css('backgroundColor'); ctx.fill(); });
};
$('#live-poll-area .answer-list').createBarchart();
| Developer | Ludvig Lindblom |
| Username | ludviglindblom |
| Uploaded | July 25, 2022 |
| Rating | 4 |
| Size | 4,014 Kb |
| Views | 56,672 |
Do you need developer help for Canvas pie chart with CSS bar chart fallback?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Ludvig Lindblom (ludviglindblom) Script Codes
| Name | Size |
| Canvas animation | 2,386 Kb |
| Circle star | 2,690 Kb |
| Fullscreen API | 2,979 Kb |
| CSS loading spinners | 2,163 Kb |
| CSS optical illusion | 3,443 Kb |
| JQuery countdown plugin | 4,195 Kb |
| Css arrows and pies | 2,584 Kb |
| SaSS pattern | 7,900 Kb |
| Just another responsive layout | 3,660 Kb |
| Christmas ornaments | 2,124 Kb |
Create amazing love letters with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Simple Login Form | JoshBlackwood | 4,418 Kb |
| Gradients | Karpovsystems | 2,394 Kb |
| Hover Animation from UNIQLO | Insprd | 3,772 Kb |
| A Pen by lizz | Lizz | 10,068 Kb |
| Display properties | Hamzaerbay | 1,886 Kb |
| NeeilTimer | Neeilan | 2,836 Kb |
| Drag and Drop Quiz | Cgspicer | 3,837 Kb |
| Website Concept | Sagoza | 3,104 Kb |
| Multi-step GSAP animation | Acacheung | 2,668 Kb |
| CSS Donut Charts | Seanstopnik | 2,908 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!