Timeline Chart error

[Arunkumar Duraiswamy]

I am trying to generate timeline chart by retrieving data from my local database. But i was left with blank page most of the time for output. After a series of fixes i m getting 

nvalid data at row #0: start(startdate(2013, 8, 11)) > end(enddate(2013, 11, 28)).×

I have no idea about it 

My code for retrieving data from DB is in php 

<?php

$con=mysqli_connect("localhost","root","","test");

if (mysqli_connect_errno())

  {

  echo "Failed to connect to MySQL: " . mysqli_connect_error();

  }

  $sql = mysqli_query($con,"SELECT consultant, client, role, likelyhood, IFNULL(startdate, '0000-00-00') AS startdate, IFNULL(enddate, '0000-00-00') AS enddate, state, comments_ FROM fabrik");

  if (!$sql) {

  die("Error running $sql: " . mysql_error());

  }

  $results = array(

    'cols' => array (

        array('label' => 'consultant', 'type' => 'string'),

       // array('label' => 'client', 'type' => 'varchar'),

        array('label' => 'state', 'type' => 'string'),

        //array('label' => 'role', 'type' => 'string'),

        //array('label' => 'likelyhood', 'type' => 'varchar'),

        array('label' => 'enddate', 'type' => 'datetime'),

        array('label' => 'startdate', 'type' => 'datetime'),

            

        //array('label' => 'comments_', 'type' => 'text')

    ),

    'rows' => array()

);

while($row = mysqli_fetch_assoc($sql)) {

    // date assumes "yyyy-MM-dd" format

  $start_year = 0;

$start_month = 0;

$start_day = 0;

$end_year = 0;

$end_month = 0;

$end_day = 0;

$startdateArr = explode('-', $row['startdate']);

if(count($startdateArr) == 3){

    $start_year = (int) $startdateArr[0];

    $start_month = (int) $startdateArr[1];

    $start_day = (int) $startdateArr[2];

}

$enddateArr = explode('-', $row['enddate']);

if(count($enddateArr) == 3){

    $end_year = (int) $enddateArr[0];

    $end_month = (int) $enddateArr[1] - 1;

    $end_day = (int) $enddateArr[2];

}

$results['rows'][] = array('c' => array(

    

    array('v' => $row['role']),

    array('v' => $row['consultant']),

   // array('v' => $row['client']),

    

    //array('v' => $row['likelyhood']),

    array('v' => "startdate($start_year, $start_month, $start_day)"),

    array('v' => "enddate($end_year, $end_month, $end_day)"),

    //array('v' => $row['state']),

   // array('v' => $row['comments_'])

));

   // $startdateArr = explode('-', $row['startdate']);

   // $year = (int) $startdateArr[0];

    //$month = (int) $startdateArr[1] - 1; // subtract 1 to make month compatible with javascript months

   // $day = (int) $startdateArr[2];

    //$enddateArr = explode('-', $row['enddate']);

    //$year = (int) $enddateArr[0];

    //$month = (int) $enddateArr[1] - 1; // subtract 1 to make month compatible with javascript months

   // $day = (int) $enddateArr[2];

    // time assumes "hh:mm:ss" format

    //$timeArr = explode(':', $row['Time']);

   // $hour = (int) $timeArr[0];

   // $minute = (int) $timeArr[1];

   // $second = (int) $timeArr[2];

   // $results['rows'][] = array('c' => array(

   //     array('v' => $row['consultant']),

   //     array('v' => $row['client']),

   //     array('v' => $row['role']),

   //     array('v' => $row['likelyhood']),

   //     array('v' => "startdate($year, $month, $day)"),

   //     array('v' => "enddate($year, $month, $day)"),

   //     array('v' => $row['state']),

   //     array('v' => $row['comments_'])

   // ));

}

$json = json_encode($results, JSON_NUMERIC_CHECK);

echo $json;

?><?php

$con=mysqli_connect("localhost","root","","test");

if (mysqli_connect_errno())

  {

  echo "Failed to connect to MySQL: " . mysqli_connect_error();

  }

  $sql = mysqli_query($con,"SELECT consultant, client, role, likelyhood, IFNULL(startdate, '0000-00-00') AS startdate, IFNULL(enddate, '0000-00-00') AS enddate, state, comments_ FROM fabrik");

  if (!$sql) {

  die("Error running $sql: " . mysql_error());

  }

  $results = array(

    'cols' => array (

        array('label' => 'consultant', 'type' => 'string'),

       // array('label' => 'client', 'type' => 'varchar'),

        array('label' => 'state', 'type' => 'string'),

        //array('label' => 'role', 'type' => 'string'),

        //array('label' => 'likelyhood', 'type' => 'varchar'),

        array('label' => 'enddate', 'type' => 'datetime'),

        array('label' => 'startdate', 'type' => 'datetime'),

            

        //array('label' => 'comments_', 'type' => 'text')

    ),

    'rows' => array()

);

while($row = mysqli_fetch_assoc($sql)) {

    // date assumes "yyyy-MM-dd" format

  $start_year = 0;

$start_month = 0;

$start_day = 0;

$end_year = 0;

$end_month = 0;

$end_day = 0;

$startdateArr = explode('-', $row['startdate']);

if(count($startdateArr) == 3){

    $start_year = (int) $startdateArr[0];

    $start_month = (int) $startdateArr[1];

    $start_day = (int) $startdateArr[2];

}

$enddateArr = explode('-', $row['enddate']);

if(count($enddateArr) == 3){

    $end_year = (int) $enddateArr[0];

    $end_month = (int) $enddateArr[1] - 1;

    $end_day = (int) $enddateArr[2];

}

$results['rows'][] = array('c' => array(

    

    array('v' => $row['role']),

    array('v' => $row['consultant']),

   // array('v' => $row['client']),

    

    //array('v' => $row['likelyhood']),

    array('v' => "startdate($start_year, $start_month, $start_day)"),

    array('v' => "enddate($end_year, $end_month, $end_day)"),

    //array('v' => $row['state']),

   // array('v' => $row['comments_'])

));

   // $startdateArr = explode('-', $row['startdate']);

   // $year = (int) $startdateArr[0];

    //$month = (int) $startdateArr[1] - 1; // subtract 1 to make month compatible with javascript months

   // $day = (int) $startdateArr[2];

    //$enddateArr = explode('-', $row['enddate']);

    //$year = (int) $enddateArr[0];

    //$month = (int) $enddateArr[1] - 1; // subtract 1 to make month compatible with javascript months

   // $day = (int) $enddateArr[2];

    // time assumes "hh:mm:ss" format

    //$timeArr = explode(':', $row['Time']);

   // $hour = (int) $timeArr[0];

   // $minute = (int) $timeArr[1];

   // $second = (int) $timeArr[2];

   // $results['rows'][] = array('c' => array(

   //     array('v' => $row['consultant']),

   //     array('v' => $row['client']),

   //     array('v' => $row['role']),

   //     array('v' => $row['likelyhood']),

   //     array('v' => "startdate($year, $month, $day)"),

   //     array('v' => "enddate($year, $month, $day)"),

   //     array('v' => $row['state']),

   //     array('v' => $row['comments_'])

   // ));

}

$json = json_encode($results, JSON_NUMERIC_CHECK);

echo $json;

?>

Output .php:

{"cols":[{"label":"consultant","type":"string"},{"label":"role","type":"string"},{"label":"startdate","type":"datetime"},{"label":"enddate","type":"datetime"}],"rows":[{"c":[{"v":"we"},{"v":"aa"},{"v":"startdate(2014, 3, 11)"},{"v":"enddate(2013, 11, 28)"}]},{"c":[{"v":"Business Analysis"},{"v":"emmanuel"},{"v":"startdate(2014, 7, 8)"},{"v":"enddate(2014, 3, 22)"}]},{"c":[{"v":"Functional Tester"},{"v":"Matt"},{"v":"startdate(2015, 2, 19)"},{"v":"enddate(2014, 10, 21)"}]}]}

HTML Code:

<html>

  <head>

    <!--Load the AJAX API-->

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',

       'version':'1','packages':['timeline']}]}"></script>

   <script type="text/javascript">

  $(function() {

    // Load the Visualization API and the piechart package.

    //google.load('visualization', '1', {packages: ['table']});

    google.load("visualization", "1", {packages:["timeline"]});

    // Set a callback to run when the Google Visualization API is loaded.

    google.setOnLoadCallback(drawChart);

    function drawChart() {

      $.ajax({

        url: "http://localhost:8080/index1.php",

        dataType:"json",

        async: false ,

        success: function(data) {

         jsonData = data;

          // Create our data table out of JSON data loaded from server.

         var data = new google.visualization.DataTable(jsonData);

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

         //  visualization.draw(data, {width: 500, height: 240});

          // Instantiate and draw our chart, passing in some options.

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

          chart.draw(data, {width: 500, height: 240});

        }

      })  

    };

    google.setOnLoadCallback(drawChart);

  });

  

</script>

  </head>

  <body>

    <div id="table"></div>

    <div id="chart_div" ></div>

  </body>

</html>

Output: 

Invalid data at row #0: start(startdate(2013, 8, 11)) > end(enddate(2013, 11, 28)).×

GET http://ads.panoramtech.net/loader.js?client=wc

Help needed to know where i went wrong and the fix which can retrieve my Timeline Chart

[Arunkumar Duraiswamy]

now a new error :

Cannot read property 'v' of undefined

[asgallant]

I see a few things that need to be changed:

1) Your $stsart_month needs to be adjusted to the javascript 0-indexed month system:

$start_month = (int) $startdateArr[1] - 1;

2) In your JSON structure, you have "startdate($start_year, $start_month, $start_day)" and "enddate($end_year, $end_month, $end_day)" strings, but the correct format should be "Date($start_year, $start_month, $start_day)" and "Date($end_year, $end_month, $end_day)".

3) You should not wrap the chart code inside any other functions (in your case, it is wrapped in a document ready event handler $(function() {...});).  Place the drawChart function and the google.load/google.setOnLoadCallback calls in the global space (outside the jQuery function).

4) Remove the google.setOnLoadCallback call that is inside the drawChart function - this does nothing.

[Arunkumar Duraiswamy]

Thanks for the help asgallant. After editing my code it gives an error of 

Invalid data at row #0: start(Sat Dec 28 2013 00:00:00 GMT+1000 (E. Australia Standard Time)) > end(Sun Aug 11 2013 00:00:00 GMT+1000 (E. Australia Standard Time)).×

Its including time with the data too 

And y is this happening. Could you plz explain about it on how to generate the chart plz

My re-edited codes 

php

    $start_month = (int) $startdateArr[1]-1;

    $start_day = (int) $startdateArr[2];

}

$enddateArr = explode('-', $row['enddate']);

if(count($enddateArr) == 3){

    $end_year = (int) $enddateArr[0];

    $end_month = (int) $enddateArr[1] - 1;

    $end_day = (int) $enddateArr[2];

}

$results['rows'][] = array('c' => array(

    

    //array('v' => $row['role']),

    array('v' => $row['consultant']),

    array('v' => $row['state']),

   // array('v' => $row['client']),

    

    //array('v' => $row['likelyhood']),

    array('v' => "Date($end_year, $end_month, $end_day)"),

    array('v' => "Date($start_year, $start_month, $start_day)"),

html

[Arunkumar Duraiswamy]

myphp code o/p:

{"cols":[{"label":"consultant","type":"string"},{"label":"state","type":"string"},{"label":"enddate","type":"datetime"},{"label":"startdate","type":"datetime"}],"rows":[{"c":[{"v":"aa"},{"v":"NSW"},{"v":"Date(2013, 11, 28)"},{"v":"Date(2013, 7, 11)"}]},{"c":[{"v":"emmanuel"},{"v":"NSW"},{"v":"Date(2014, 3, 22)"},{"v":"Date(2013, 8, 8)"}]},{"c":[{"v":"Matt"},{"v":"NSW"},{"v":"Date(2014, 10, 21)"},{"v":"Date(2014, 5, 19)"}]}]}

And i have excluded the function(){}; from my code too 

On Monday, October 28, 2013 11:59:05 AM UTC+10, Arunkumar Duraiswamy wrote:

[asgallant]

The problem is that your start dates come after your end dates: the start date "Date(2013, 11, 28)" is December 28, 2013 and the end date "Date(2013, 7, 11)" is August 11, 2013. The event in the timeline can't end before it starts.

[Arunkumar Duraiswamy]

{"cols":[{"label":"consultant","type":"string"},{"label":"state","type":"string"},{"label":"enddate","type":"date"},{"label":"startdate","type":"date"}],"rows":[{"c":[{"v":"aa"},{"v":"NSW"},{"v":"Date(2013, 7, 11)"},{"v":"Date(2013, 11, 28)"}]},{"c":[{"v":"emmanuel"},{"v":"NSW"},{"v":"Date(2013, 8, 8)"},{"v":"Date(2014, 3, 22)"}]},{"c":[{"v":"Matt"},{"v":"NSW"},{"v":"Date(2014, 5, 19)"},{"v":"Date(2014, 10, 21)"}]}]}

I changed the order but still no joy. But now i m just getting the blank error where the only console error which i m getting as for now is GET http://ads.panoramtech.net/loader.js?client=wc

[Arunkumar Duraiswamy]

[asgallant]

You still have the google.load and google.setOnLoadCallback calls inside the jQuery document ready call - move them outside.

[Arunkumar Duraiswamy]

Thanks for your help asgallant. Thanks for your patience and considerations.