Skip to first unread message
SteveJG
Jul 9, 2018, 8:32:03 AM7/9/18
to MIT App Inventor Forum
You might try this extension instead https://github.com/MillsCS215AppInventorProj/chartmaker to make your pie.
Taifun
Jul 9, 2018, 10:35:10 AM7/9/18
to MIT App Inventor Forum
but the pie chart didnt come out on the application(it was blank)
which most probably means, you forgot to upload the html and Chart.min.js library into the assets of your project
see the example proect here https://puravidaapps.com/pie.php
Taifun
Trying to push the limits of App Inventor!
Snippets,
Tutorials and
Extensions from
Pura Vida Apps by
Taifun.
Juan Antonio
Jul 9, 2018, 10:35:29 AM7/9/18
to MIT App Inventor Forum
Here with JavaScript
Ezra Epriputra
Sep 17, 2019, 8:04:13 AM9/17/19
to MIT App Inventor Forum
Hi juan, i tried your tutorial and its work. Do you have any tutorial with 3d pie chart or 3d doughnut?
Juan Antonio
Sep 17, 2019, 12:07:35 PM9/17/19
to MIT App Inventor Forum
Try:
http://kio4.com/appinventor/index.htm#javascript
Ezra Epriputra
Sep 20, 2019, 10:47:29 PM9/20/19
to MIT App Inventor Forum
hey Juan, thanks, your chart is working...
but can you
help me. I see your tutorial about bar chart...but i little bit confused
how to modify this script so the value is match with the color
look at the yellow bar, i want that pink color is 150, then blue is 172, yellow is 213....so on
This is the bar2.htm script that i modify
<!doctype html>
<html>
<head><meta charset="utf-8">
<title>Tarta</title>
<script src="Chart.bundle.js"></script>
<script src="utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="100"></canvas>
<script>
var datos = window.AppInventor.getWebViewString() ;
partes = datos.split(":");
datos = partes[0].split(",");
etiquetas = partes[1].split(",");
var ctx = document.getElementById("canvas");
var myChart = new Chart(ctx, {
// type: 'doughnut',
type: 'bar',
data:{
labels: etiquetas,
datasets: [{
label: datos,
// data: [30, 5, 10, 2, 20, 15],
data: datos,
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56",
"#009900",
"#FF33FF",
"#FF6633"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56",
"#009900",
"#FF33FF",
"#FF6633"
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
// Juan Antonio Villalpando
</script>
</body>
</html>
<html>
<head><meta charset="utf-8">
<title>Tarta</title>
<script src="Chart.bundle.js"></script>
<script src="utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="100"></canvas>
<script>
var datos = window.AppInventor.getWebViewString() ;
partes = datos.split(":");
datos = partes[0].split(",");
etiquetas = partes[1].split(",");
var ctx = document.getElementById("canvas");
var myChart = new Chart(ctx, {
// type: 'doughnut',
type: 'bar',
data:{
labels: etiquetas,
datasets: [{
label: datos,
// data: [30, 5, 10, 2, 20, 15],
data: datos,
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56",
"#009900",
"#FF33FF",
"#FF6633"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56",
"#009900",
"#FF33FF",
"#FF6633"
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
// Juan Antonio Villalpando
</script>
</body>
</html>
Juan Antonio
Sep 24, 2019, 3:22:53 PM9/24/19
to MIT App Inventor Forum
Convert decimal to Hex color code:
Ezra Epriputra
Sep 24, 2019, 7:27:56 PM9/24/19
to MIT App Inventor Forum
Hi juan, ita not about the color, its about the label. Please read my questions carefully
Reply all
Reply to author
Forward
0 new messages