AppInventor, Google charts and Javascript...how to manipulate data?

Cla_Bello · November 5, 2020, 7:59pm

Hello everyone, I'm here again...this time my question is about "how to read and use" data into HTML file with javascript...I'm in this condition:

I have a big block that send to a "WebView" a big list like (for example):
[[new Date (2020, 11, 03), 2, 3, 4, 5],[new Date ((2020, 11, 04), 5, 6, 7, 8]]
at the other side I've the classic HTML file like this:

Cattura669×936 30.6 KB

Now what I want to do is to change data.addColumn's second parameter with a new one send via "getWebViewString" from AppInventor....

I've tried to do it adding, at the end of sended string, the new name after "||" char, reading it via SPLIT method in javascript...

so, the new data sended il like
[[new Date (2020, 11, 03), 2, 3, 4, 5],[new Date ((2020, 11, 04), 5, 6, 7, 8]]||FIRST||SECOND
the new HTML FILE is like this (only for example I try to change only two elements)

Cattura666×947 29.9 KB

I've tried many many times whit other ideas but I cant do what I want....there is someone that canm help me?

PLEASE

TY a lot....

TIMAI2 · November 5, 2020, 8:37pm

Please share an example aia project for others to work on.

TIMAI2 · November 5, 2020, 9:05pm

I have a "working example" here drawn from the google charts example here:

https://developers.google.com/chart/interactive/docs/gallery/table

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);


		data 			= "[['Mike',  {v: 10000, f: '$10,000'}, true],['Jim',   {v:8000,   f: '$8,000'},  false],['Alice', {v: 12500, f: '$12,500'}, true],['Bob', {v: 7000,  f: '$7,000'},  true]]||Name||Salary||Full Time Employee";
		datalist 		= data.split("||");
		rows			= eval(datalist[0]);
		firstElement 	= datalist[1];
		secondElement 	= datalist[2];
		thirdElement 	= datalist[3];

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', firstElement);
        data.addColumn('number', secondElement);
        data.addColumn('boolean', thirdElement);
		data.addRows(rows);


        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
  </body>
</html>

The issue for you could be as simple as using the correct apostrophes - either " or ' in the right places. Look closely at what you are sending through in the webviewstring. Try doing it as above with actual data.

Cla_Bello · November 5, 2020, 10:16pm

I haven't a working ezample aia project...my project is very big

Cla_Bello · November 5, 2020, 10:22pm

Ty for the example....I've tried to use it for experiment but if I change "table" to "line chart" doesn't do anything...I cant understand how can I do a linechart

P.S.: how have you "quote" the html file in your post?

...

chart.draw(data, options);

google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawTable);

	data 			= "[['Mike',  {v: 10000, f: '$10,000'}, true],['Jim',   {v:8000,   f: '$8,000'},  false],['Alice', {v: 12500, f: '$12,500'}, true],['Bob', {v: 7000,  f: '$7,000'},  true]]||Name||Salary||Full Time Employee";
	datalist 		= data.split("||");
	rows			= eval(datalist[0]);
	firstElement 	= datalist[1];
	secondElement 	= datalist[2];
	thirdElement 	= datalist[3];

  function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', firstElement);
    data.addColumn('number', secondElement);
    data.addColumn('boolean', thirdElement);
	data.addRows(rows);

var options = {
title: 'Grafico livelli sintomi',
width: 900,
height: 500,
hAxis: {
format: 'dd/MM',
gridlines: {count: 15}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
};

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    chart.draw(data, options);
   // var table = new google.visualization.Table(document.getElementById('table_div'));

 //   table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
  }
</script>

...

Taifun · November 5, 2020, 10:36pm

use the preformatted text option and make sure to have an empty line before using that option
Unbenannt
Taifun

Trying to push the limits! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun.

TIMAI2 · November 5, 2020, 10:51pm

or you can enclose your code in three backticks on separate lines

code

ABG · November 5, 2020, 10:55pm

If your project is too big to export, you are in imminent danger of losing the ability to work on it further.

For safety, I advise

Do a Project->Save As for backup and version control
Save block images of each event and procedure on your PC, appropriately named, for import into smaller sketch projects.
Upload relevant block images here, for us to load into AI2 for examination/testing/correction.

Do not edit or clip the images. Use the right click menu to request the individual block png downloads.

Please download and post each of those event block(s)/procedures here ...
(sample video)

TIMAI2 · November 5, 2020, 11:01pm

Here is an example line chart (material). Use this as a base.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
    <script type="text/javascript">
    
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
    </script>
  </head>
  <body>
    <div id="linechart"  style="width: 900px; height: 500px"></div>
  </body>
</html>

https://developers.google.com/chart/interactive/docs/gallery/linechart#creating-material-line-charts

TIMAI2 · November 6, 2020, 12:25am

And here is an aia project for the same line chart but using the webviewstring - as a list.

gchart.aia (2.4 KB)

Remember you need a network connection for google charts to work.

Cla_Bello · November 6, 2020, 6:15pm

I've used your AIA example and worked on for my needs...now everything works!!
The passed data are the same...probably there was something in my script.....this community is very helpful...ty again

system · November 13, 2020, 6:15pm

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.