📊 [Free] ChartMakerPlus - an extension to make google charts

DanBadea · December 5, 2023, 6:07am

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.

TIMAI2 · December 5, 2023, 8:55am

Yes it does

You have not set the arrayTable correctly

for example:

https://developers.google.com/chart/interactive/docs/gallery/linechart#examples

DanBadea · December 5, 2023, 4:05pm

@ 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.

ABG · December 5, 2023, 4:09pm

TIMAI2 · December 5, 2023, 4:14pm

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.

DanBadea · December 5, 2023, 4:46pm

@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

TIMAI2 · December 5, 2023, 4:50pm

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>

DanBadea · December 5, 2023, 5:33pm

@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

ZenForAll · February 1, 2024, 11:17am

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

TIMAI2 · February 1, 2024, 11:32am

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:

ZenForAll · February 2, 2024, 5:08pm

Thx TIMAI12. I try Thx But it is not vAxis it is yAxis but anyway Thank you very much

ZenForAll · February 2, 2024, 5:27pm

Thank you it works but when I try to join curveType yAxis it does not work. Wrong approch

TIMAI2 · February 2, 2024, 5:32pm

should be vAxis not yAxis

from the configuration options

ZenForAll · February 3, 2024, 10:20am

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....

TIMAI2 · February 3, 2024, 10:40am

Why did you add the curly brackets? These are only needed in you axis option

ZenForAll · February 3, 2024, 1:33pm

When I try it this way

hAxis:{maxValue:200,minValue:-20}
will not be recognized

TIMAI2 · February 3, 2024, 1:35pm

Show your Array Table data

or try like this:

(note: it is pointSize not pointsize)

ZenForAll · February 3, 2024, 4:00pm

Thank youTIMAI12 No this is not working I don't have the field css
I attached my Data Part.

ZenForAll · February 3, 2024, 4:57pm

I found this to fiddle

But it seems that curveType:'function',
and maxValue are not working together.

TIMAI2 · February 3, 2024, 7:03pm

Last offer: