See here:
and look at the bar chart examples in the first post
1 Like
All very well! I used the block like this. It was just necessary to highlight the point with a different style.
And there is the result.
Thank you very much!
1 Like
Hello, I'm new here, on MIT App Inventor and in the community, so please don't shut me down. I read tons of documentation, examples, codes, and so on. I try to make a project somehow complex but I start experimenting with small parts, when those small parts work as expected, I'll incorporate them into my project. Now I'm at the part that must plot in a chart (not canvas - the canvas is good for analog signals for example), some data that came over the Bluetooth from an esp32. I print from esp32 two digital pins on serial, so 0-1. Therefore, I think it is best to use charts, not canvas.
Short story... I try to display these two channels that I have from esp32, without any success. I try all that you can see in the image, no success, even dummy integers... no success.
Your extension doesn't work in Android 13?! It doesn't appear the chart on the screen with all that I tested. Or what did I do wrong?!
Thank you in advance, Dan.
Yes it does
You have not set the arrayTable correctly
for example:
https://developers.google.com/chart/interactive/docs/gallery/linechart#examples
@ TIMAI2 - Thank you kindly that you make time for that reply, now I know/confirm that it works on Android 13, one problem less. The example that you showed me, troth, I didn't try it. I do not try it because it is a static chart that depends on a button click. Now the million-dollar question...
Google chart (line) can be used with dynamic data versus time? I want to receive two variables over Bluetooth, var_1 and var_2, var_1 can be 0 or 1 over on X axis, and var_2 can be 0 or 1 on the X axis. Something like an oscilloscope or more like a logic analyzer with 2 channels on a chart or independent on 2 charts. The base time for an entire chart (not a division) can be about 10 - 1000ms. I must test this if the Bluetooth / MIT App Inventor can do this speed/milliseconds.
The entire project is about ECU (Engine Control Unit) - Simulating. For the moment all that I need to send from MIT App Inventor to esp32 works like a charm but I'm stuck at sending from esp32 to MIT App Inventor.
Another thank you kindly for making time for my questions.
Best regards, Dan.
It can be done, but not using the chartmakerplus extension. You will have to build your own html file with the chart requirements, and call the chart again with the new value.
@TIMAI2 - Thank you very much for your time, I will try directly with Google Line chart if I have problems, I will post some questions in the community.
@ABG - Please believe me that I read tons of documentation
that post - How do you use the chart2D plugin to create a chart with time as the horizontal axis - #3 by Kevinkun - I don't find it. Can be a good starting point. Thank you kindly @ABG for your guidance. My big problem is the fact that I'm not an engineering person trained (like you all), I'm a reverse-engineering trained person. I don't have your culture in the amount/diversity of things that I'll have at my disposition, I have 35+ years of research training on how other people think to make something.
Can be a weird/inappropriate approach to do something but must work. Until now it has worked without any help, from now I think that the power of distributed intelligence of people who spend their time to help can be a plus factor.
Another big thank you kindly for taking your time to illuminate me.
Best regards, Dan
You might get some ideas from here:
https://developers.google.com/chart/interactive/docs/gallery/gauge
I did a setup to make a replica tachometer and it worked well...
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['RPM', 0],
]);
var options = {
width: 400, height: 400,
redFrom: 55, redTo: 60,
yellowFrom:60, yellowTo: 70,
minorTicks: 5,
majorTicks: ["0",5,10,15,20,25,30,35,40,45,50,55,60,65,70],
max: 70,
animation: {duration:200},
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
setInterval(function() {
if( window.AppInventor ){
data.setValue(0,1,window.AppInventor.getWebViewString());
} else {
data.setValue(0, 1, 0 + Math.round(60 * Math.random()));
}
chart.draw(data, options);
}, 50);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 400px;"></div>
</body>
</html>
@TIMAI2 - The gauge I already use in my "complicated" program.
CrankShaft signal is controlled as RPM, number of teeth, missing teeth, and so on from MIT App Inventor.
One PWM signal - all controlled by MIT App Inventor.
Until now all that I need to communicate from MIT App Inventor to esp32 (it is an E series, in the future I will use an S3 - 32/8), but for now all it works fin 4-PWM, the crankshaft simulation generator, and so on. Now I'm in the fight with displaying some charts, after that will be the big fight with the CAN-bus that will be displayed where is the "dummy" text.
I discovered that the power that's behind MIT App Inventor / Google tools is impressive. A good old friend of mine has a 2023 year idea - to use MIT App Inventor to do some programs, not LabView with that I'll fight until now for my projects. Here https://www.youtube.com/watch?v=9zr9ctn501M - a humble example of a BGA Rework Station control software made in LabView.
Now I have started to port that application (BGA Rework Station control software) on MIT App Inventor.
Another huge thank you for your time spent to help me.
Best regards, Dan
1 Like
Chart Maker Plus
Since today I use ChatMakerPlus, a wonderful app .
My Problem my Numbers are between -10 and 100 but
the Graph Y Axis is from -200 to +200.
Can I adjust the Y Axis to -20 to 110
Yes, use the extraOptions socket to add options to your chart.
See the example blocks or configuration sections on Google Charts (all linked in first post of topic)
Like so:
Thx TIMAI12. I try Thx But it is not vAxis it is yAxis but anyway Thank you very much
should be vAxis not yAxis
from the configuration options
Hello
hAxis:{maxValue:200,minValue:-20} Works alone
But not the whole join Puzzle
By the way where does I find a Guild with vAxis.maxValue Move the max....
Why did you add the curly brackets? These are only needed in you axis option
