Forum | Appery.io

Hi Appery team

I already know how to publish my data saved into a database and I've had read quite a lot in this forum to find out the way how to get a graph with those data. Well, with the code shown below I draw the chart that appears when I click on "Get chart" button. But, as you can see, that is possible because I wrote all the information that this API needs.

My question is. How can I avoid this in a third button?
I mean, I would like to read the information from my database records, and send them directly to the API to let it do its job. How can I do something like that?

Let you some screen shots from my app, so you can have a better idea what I'm trying.

Thanks in advance for your time.

Have a nice day.

1. Database name: dataList // Collection: dataDetails

2. My array variables are "mdName" and "mdAge"

1. My storage variable is "myData"

   

2. Service response for "Get list of friends" button

   

3. Code for "Get chart" button linked to a html frame

   [quote:]
   function barChart() {
   //These are the parameters desired to be added dynamically from my database
   var data = new google.visualization.arrayToDataTable([
   ['Friends', 'Age'],
   ['Robert', 24],
   ['Aeryn', 23],
   ['Ariana', 21],
   ['Chris', 25],
   ['Dean', 24]
   ]);

   var options = {
   legend: {position: 'none'},
   bars: 'horizontal',
   };

   var chart = new google.charts.Bar(document.getElementById('plot_div'));
   chart.draw(data, options);
   }
   [/quote]

4. Test viiew

   

   These are some of the issues that I read, related with Arrays. Because I believe it is a possible solution to my needs, but maybe "array variables" are not the best proposal.

   01. Building a ToDo app
   02 - Map JSON Array values
   03 - Save array to local variable
   04 - Response to an array
   05 - Arrays in database

adfafasdf

Hi Appery team.

I continued searching possibles solutions to my headache and after another whole day I just tried the following code ...which by the way had seen before but couldn't understand how or where to use it.

codevar response = JSON.parse(localStorage.getItem("listData_Svc"));/code
codefor (var i=0, l=response&#46;length; i<l; i++) { /code
codevar row = response;/code
codealert(row&#46;Name + ", " + row&#46;Age);/code
code};/code

I placed the code on "Get list of friends" button.
Original post

Not sure if is this the best practice, but finally I could read row by row from my database. Is there a better way to get the same? because I thought that needed those type array model and now it seems not.

Now I trying to figure out the best way to build the parameter with this particular structure, considering brackets, commas and spaces.

[row1column1, row1column2],[row2column1, row2column2],[row3column1, row3column2]....

To pass them to the google array sentence.To finally be able to draw my bar chart.

Still working on it...

Hi Gilbert,

Yes you read correctly response from your local storage and then iterate through items.

It's better way to get items on button click. On service success event you can use more simple code:

pre

for (var i = 0; i < data&#46;length; i++) {
var row = data;
alert(row&#46;Name + ", " + row&#46;Age);
};

/pre

You don't need to use model and storage if you don't need mapping. So it's up to you how to implement it.

pre

Now I trying to figure out the best way to build the parameter with this particular structure, considering brackets, commas and spaces&#46;

[row1column1, row1column2],[row2column1, row2column2],[row3column1, row3column2]&#46;&#46;&#46;&#46;

To pass them to the google array sentence&#46;To finally be able to draw my bar chart&#46;

/pre

Please specify details about this issue cause of this time it's not clear for us.

Regards

Hi, Yurii, thanks for reply

I've been trying make this code works, but after two night don't have good news.
I need some help.. what I need is to draw a barchart or pie chart using the Google Chart API. But could not find out the way to handle the function with external data.

With the last code I could read my database and with the aid of a loop finally row by row and column by column I placed each value with this specific pattern:

codefor (var i=0; i<myDataLen-1; i++) {/code
code var row = myResponse;/code
code myString += row&#46;Name + "', " + row&#46;Age + "], ['&quot/code
code }/code
codelastData = myResponse[myDataLen-1];/code
codemyString += lastData&#46;Name + "', " + lastData&#46;Age + "]&quot/code

pre
Result:
myString = ['Friends', 'Age'],['Robert', 24],['Aeryn', 23],['Ariana', 21],['Chris', 25],['Dean', 24]
/pre



....considering brackets, commas and spaces

My idea was to store this big data string in "myString" variable. And set it into the google function. But I realize is not as easy as it looks like.

function barChart() {
var data = new google.visualization.arrayToDataTable([
myString
]);
var options = {
legend: {position: 'none'},
bars: 'horizontal',
};

Is there any way to make google function accepts "myString"?
Or, what would be the best way to connect my database to this function and plot those data?

Regards

this is the original sentence working on "Get chart" button:

function barChart() {
var data = new google.visualization.arrayToDataTable([
["Friends", "Age"],["Robert", 24],["Aeryn", 23],["Ariana", 21],["Chris", 25],["Dean", 24]
]);

 var options = { 
     legend: {position: 'none'}, 
     bars: 'horizontal', 

};

Hi Gilbert,

Please try following code:

pre

function barChart() {
var data = new google&#46;visualization&#46;arrayToDataTable(
JSON&#46;parse("[" + myString + "]")
);
var options = {
legend: {position: 'none'},
bars: 'horizontal',
};

/pre

Regards.

Hi Yurii, excuse my long absence but these last days I had lot of work...

Last week I was really happy because finally I was able to go thru my data base, row by row, with this magic sentence.

codeJSON&#46;parse(localStorage&#46;getItem("listData"));/code

But now when I thought that I was ready to the next step... I am stuck again...
JSON seems not to work anymore.. I tried this simple code to get my rows number but nothing happens..

prelistData&#46;execute({});
var myData = JSON&#46;parse(localStorage&#46;getItem("listData"));
alert(myData&#46;length);
console&#46;log(myData&#46;length);/pre
The console log message says "Uncaught TypeError: Cannot read property 'length' of null". But as you can see in the picture the service displays my list data. So I think that means data source runs well.

But, now why I cannot even count rows with the code that I used to use before?

What am I doing wrong?..

Hi Yurii, excuse my long absence but these last days I had lot of work...

Last week I was really happy because finally I was able to go thru my data base, row by row, with this magic sentence.

codeJSON&#46;parse(localStorage&#46;getItem("listData"));/code

But now when I thought that I was ready to the next step... I am stuck again...
JSON seems not to work anymore.. I tried this simple code to get my rows number but nothing happens..

prelistData&#46;execute({});
var myData = JSON&#46;parse(localStorage&#46;getItem("listData"));
alert(myData&#46;length);
console&#46;log(myData&#46;length);/pre
The console log message says "Uncaught TypeError: Cannot read property 'length' of null". But as you can see in the picture the service displays my list data. So I think that means data source runs well.

But, now why I cannot even count rows with the code that I used to use before?

What am I doing wrong?..

Hi Gilber,

The code "JSON.parse(....)" - parses JSON string into JS object.

The error you have means you tried to parse NOT JSON string.

To make sure please try to put "console.log()" before this line of code.

Example:

pre

listData&#46;execute({});
console&#46;log("listData = " + listData);
var myData = JSON&#46;parse(localStorage&#46;getItem("listData"));
alert(myData&#46;length);
console&#46;log(myData&#46;length);

/pre

Also, i'm not sure but i guess you want to get data from "listData" service datasource?

If so - your code will not work at all. Cause of service is a async thing. And it need some time to execute, but other code executes immediately.

You can try this code:

pre

var onSuccess = function(data){
var myData = data;
alert(myData&#46;length);
console&#46;log(myData&#46;length);
};

listData&#46;execute({success: onSuccess});

/pre

Regards.