Timeline and JSON data doesn't work

1,675 views
Skip to first unread message

franck danard

unread,
Jan 27, 2017, 9:50:47 AM1/27/17
to Google Visualization API
Hi all.

I've some problems to get some datas with JSON.
I've PHP function which send the value like this.

                    $_booking        = $this->getPMSbooking("");
                    foreach($_booking as $key => $value){
                        $confirmed    = $value["confirmed"];
                        $conf         = "";
                        if($confirmed == "0")
                            $conf     = "*";
                        list($_date_ci, $time_ci)    = explode(" ",$value["date_ci"]);
                        list($yci, $mci, $dci)       = explode("-",$_date_ci);
                        $mci          = strval(intval($mci)-1);
                        $dtci         = array($yci, $mci, $dci);
                        list($_date_co, $time_co)    = explode(" ",$value["date_co"]);
                        list($yco, $mco, $dco)       = explode("-",$_date_co);
                        $mco          = strval(intval($mco)-1);
                        $dtco         = array($yci, $mci, $dco);
                        $_rooms       = $this->getPMS_all_rooms("id = ".$value["room_id"]);
                        $_guest       = $this->getPMS_all_guest("id = ".$value["guest_id"]);    
                        $room_name    = $_rooms[0]["room_name"];
                        $guest_name   = $_guest[0]["last_name"]." ".$_guest[0]["first_name"]." ".$conf;
                        $data[$key]   = array($room_name, $guest_name, $dtci, $dtco );
                    }

                    return json_encode($data, JSON_NUMERIC_CHECK);

Next, i put in my page this.


<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    $.ajax({
        url: "ajax.php?module=ddd&booking=1",
        dataType:"json",
        success: function (json) {
     
            var container = document.getElementById('timeline');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
            console.debug(json);
            dataTable.addColumn({ type: 'string', id: 'Term' });
            dataTable.addColumn({ type: 'string', id: 'Name' });
            dataTable.addColumn({ type: 'date', id: 'Start' });
            dataTable.addColumn({ type: 'date', id: 'End' });

            dataTable.addRows(json);

            chart.draw(dataTable);
        }
    });
  }
</script>

But it doesn't' display anything.

Message returns this :

[["Room 200","Danard Franck *",[2017,0,28],[2017,0,31]],["Room 200","Danard Franck *",[2017,0,29],[2017,0,31]]]

Sure, something is wrong in my code, but i don't know what.

The format gave by google looks like this:

 dataTable.addRows([ [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], 
                     [ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], 
                     [ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

I think that are the sames.

Could you help me please.

Regards



Daniel LaLiberte

unread,
Jan 27, 2017, 10:21:14 AM1/27/17
to Google Visualization API
Your debug output shows that the format of your date values is incorrect.  You'll need to return the dates using the string representation that looks like this: "Date(2017,0,28)".  See the documentation here:  https://developers.google.com/chart/interactive/docs/datesandtimes#dates-and-times-using-the-date-string-representation


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/76a0b287-320d-4c0a-aa22-349c7078928b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

franck danard

unread,
Jan 27, 2017, 10:55:34 AM1/27/17
to Google Visualization API
HI
Thanks for your replay

[["Room 200","Danard Franck *","DATE(2017,0,28)","DATE(2017,0,31)"],
 ["Room 200","Danard Franck *","DATE(2017,0,29)","DATE(2017,0,31)"]]
No way.
Even with DATE, nothing.

I don't understand why .
Excepted DATE should be new DATE() but even with this, nothing.

The error returned by console:
Error: Argument given to addRows must be either a number or an array

Where???? What? Clue? Nothing.
My argument is array , ok...
What argument is wrong? I don't know.
To post to this group, send email to google-visua...@googlegroups.com.



--

Daniel LaLiberte

unread,
Jan 27, 2017, 11:03:52 AM1/27/17
to Google Visualization API
Where the error occurs is your addRows() call.  You believe you are passing an array, but since the error message is claiming otherwise, I would check that with the debugger.  

Can you point us to your web page so we can try to debug it?

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.



--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/aa86514f-6ae7-4868-8a2a-79ecdc98a6fc%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

franck danard

unread,
Jan 27, 2017, 11:18:34 AM1/27/17
to Google Visualization API
Hmmmm ok thanks.

I'll send you what you need. by email
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

franck danard

unread,
Jan 28, 2017, 3:44:24 AM1/28/17
to Google Visualization API

Hi Daniel and all.
It's better now, i've not the same error, but another one.

My objet is formated like this now:

{"cols":
[{"label":"Room","type":"string"},{"label":"Name","type":"string"},{"label":"Start","type":"date"},{"label":"End","type":"date"}],
"rows":
[{"c":[{"v":"Room 200"},{"v":"Danard Franck *"},{"v":"DATE(2017,0,28)"},{"v":"DATE(2017,0,31)"}]},
 {"c":[{"v":"Room 201"},{"v":"Danard Franck *"},{"v":"DATE(2017,0,29)"},{"v":"DATE(2017,0,31)"}]}
]}


But i've this error instead of timeline. Invalid data table format: must have 3 or 4 data columns.


Something is wrong in my build?

Regards

franck danard

unread,
Jan 28, 2017, 3:50:24 AM1/28/17
to Google Visualization API
Hmmm
The code looks like this now:
        .../...
success: function (json) {
            console.debug(json);    

            var container = document.getElementById('timeline');

            var chart = new google.visualization.Timeline(container);

            var dataTable = new google.visualization.DataTable(json);
           
            chart.draw(dataTable);
        }

Daniel LaLiberte

unread,
Jan 28, 2017, 1:07:53 PM1/28/17
to Google Visualization API
You appear to still be using "DATE" instead of "Date".  That will make a difference.  

The error message about 3 or 4 data columns is coming from the Timeline chart.  It is possible this is misleading or even wrong, but I can't tell from what you copied.  There are similar cases that work, so something is still not as expected.  Here is a working example:  https://jsfiddle.net/dlaliberte/k97L511u/

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/f5442f57-f03e-4e02-8c44-62c661328585%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Daniel LaLiberte

unread,
Jan 28, 2017, 1:11:45 PM1/28/17
to Google Visualization API
And here is an example using your json data as you copied, but with "DATE"s changed to "Date"s:  https://jsfiddle.net/dlaliberte/k97L511u/1/

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
--

franck danard

unread,
Jan 28, 2017, 3:17:17 PM1/28/17
to google-visua...@googlegroups.com
Hi Daniel.

It doesn't work but almost.
It's better,  but something is weird.

Now json request is formated correctly.

{"cols":[{"label":"Room","type":"string"},{"label":"Name","type":"string"},{"label":"Start","type":"date"},{"label":"End","type":"date"}],"rows":[{"c":[{"v":"Room 200"},{"v":"Danard Franck *"},{"v":"Date(2017,0,28)"},{"v":"Date(2017,0,31)"}]},{"c":[{"v":"Room 201"},{"v":"Danard Franck *"},{"v":"Date(2017,0,29)"},{"v":"Date(2017,0,31)"}]}]}



        success: function (json) {
            console.debug(json);     

            var container = document.getElementById('timeline');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable(json);
           
            chart.draw(dataTable);
        }



This way returns an error. But!!!!
This way below works!!!!
If i make a copy and past the content of JSON request, it works.


        success: function (json) {
            console.debug(json);     

            var container = document.getElementById('timeline');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable({"cols":[{"label":"Room","type":"string"},{"label":"Name","type":"string"},{"label":"Start","type":"date"},{"label":"End","type":"date"}],"rows":[{"c":[{"v":"Room 200"},{"v":"Danard Franck *"},{"v":"Date(2017,0,28)"},{"v":"Date(2017,0,31)"}]},{"c":[{"v":"Room 201"},{"v":"Danard Franck *"},{"v":"Date(2017,0,29)"},{"v":"Date(2017,0,31)"}]}]});
           
            chart.draw(dataTable);
        }



I think there must be little to make it work.

There's something to do arround the variable json ?

Regards

Franck Danard

Daniel LaLiberte

unread,
Jan 28, 2017, 9:45:44 PM1/28/17
to Google Visualization API
There is nothing special about the name of the variable.  The issue is what's in the variable.  JSON format is actually a string that contains a structure.  It looks like you have a string as shown in your message output, so then you will have to convert the string to a JavaScript object by parsing it.  

Here is documentation on the JavaScript JSON.parse() function:  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

We should try to make this all this clearer in the Google Charts documentation.


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/02496535-f970-1189-01ad-03564b99d499%40gmail.com.

For more options, visit https://groups.google.com/d/optout.

franck danard

unread,
Jan 29, 2017, 1:08:54 AM1/29/17
to google-visua...@googlegroups.com
Hi Daniel.
I've thought at this way indeed.
I've already used JSON.parse(json); but unfortunately it doesn't work.
I don't understand what's wrong here.
One side, the content of json is good. (copy past)
On the other side, the same variable with same content doesn't works. It's crazy.

Franck Danard

Franck Danard

unread,
Jan 29, 2017, 1:16:41 AM1/29/17
to google-visua...@googlegroups.com
With JSON.parse, i've this.

JSON.parse: unexpected character at line 1 column 2 of the JSON data

franck danard

unread,
Jan 29, 2017, 3:22:23 AM1/29/17
to Google Visualization API
Found!!!!

Champagne.... wifes....party...

        dataType:"json",
        success: function (json) {

             
            console.debug(json);
            var result = json.message;

            var container = document.getElementById('timeline');
            var chart = new google.visualization.Timeline(container);

            var dataTable = new google.visualization.DataTable(result);
           
            chart.draw(dataTable);
        }

We need to get message object
i guess Parse doesn't work because it seems to be already parsed.

Result takes the content of message.
Code shorter

        success: function (json) {
             
            console.debug(json);

            var container = document.getElementById('timeline');
            var chart = new google.visualization.Timeline(container);

            var dataTable = new google.visualization.DataTable(json.message);
           
            chart.draw(dataTable);
        }

For resume.

For PHP - preparing datas

                    $table = array();
                    $table['cols'] = array(array('label' => 'Room',     'type' => 'string'),    
                                           array('label' => 'Name',     'type' => 'string'),
                                           array('label' => 'Start',    'type' => 'date'),
                                           array('label' => 'End',      'type' => 'date'));                
                    foreach($_booking as $key => $value){
                        .../...    
                        $temp       = array();
                        $temp[]     = array('v' => (string) $room_name);
                        $temp[]     = array('v' => (string) $guest_name);
                        $temp[]     = array('v' => (string) "Date($yci,$mci,$dci)");
                        $temp[]     = array('v' => (string) "Date($yco,$mco,$dco)");
                        $rows[]     = array('c' => $temp);
                    }
                    $table['rows'] = $rows;
                    return json_encode($table, JSON_NUMERIC_CHECK);

For Javascript:

  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    $.ajax({

        url: "ajax.php.....",

        dataType:"json",
        success: function (json) {

             
            console.debug(json);

            var container = document.getElementById('timeline');
            var chart = new google.visualization.Timeline(container);

            var dataTable = new google.visualization.DataTable(json.message);
           
            chart.draw(dataTable);
        }
    });
  }

Thanks at Daniel for his graet help.

Have a good day at all.

Franck






Le vendredi 27 janvier 2017 15:50:47 UTC+1, franck danard a écrit :
Message has been deleted

Carlos Rolando Jordán Ramos

unread,
Jun 21, 2017, 7:24:24 PM6/21/17
to Google Visualization API
Muchas gracias por la ayuda !!! 
Reply all
Reply to author
Forward
0 new messages