Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Numerator/Denominator in HTML CSS JS
<!doctype html>
<html>
<head>
<title>Pie Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://code.jquery.com/jquery-1.10.1.js"></script>
</head>
<body>
<input type="text" id="num1" name="num1" />
<br />
<input type="text2" id="num2" name="num2" />
<button name="submit" value="draw" id="draw">draw</button>
<div id="canvas-holder">
<canvas id="chart-area" width="300" height="300" />
</div>
<script>
window.onload = function() {
$(document).ready(function() {
$('#draw').click(function() {
var num1 = $('#num1').val(); //bast
var num2 = $('#num2').val(); //makam
var pieData = [];
var circle_size = num2;
var slot_size = (1 / num2) * 100;
var number_of_uncolored_pieces = ((num2 - num1) / num2) * 100; //100/5 = 20
var number_of_colored_pieces = (num1 / num2) * 100;
var sum_of_colored = 0;
var colored_pieces_count = 0;
var uncolored_pieces_count = 0;
for (var i = 0;; i++) {
colored_pieces_count++;
sum_of_colored += slot_size;
if (sum_of_colored == number_of_colored_pieces) {
break;
}
}
uncolored_pieces_count = circle_size - colored_pieces_count;
console.log(sum_of_colored);
console.log(colored_pieces_count);
console.log(uncolored_pieces_count);
//fill colored
for (var i = 0; i < colored_pieces_count; i++) {
pieData.push({
value: slot_size,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
});
}
//fill uncolored
for (var i = 0; i < uncolored_pieces_count; i++) {
pieData.push({
value: slot_size,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Red"
});
}
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData);
});
});
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.