Alpha Video Training
Results 1 to 3 of 3

Thread: learning curve on google charts

  1. #1
    Member
    Real Name
    Travis Irby
    Join Date
    Oct 2017
    Posts
    25

    Default learning curve on google charts

    i am counting my learning of using google charts
    i have a sql 2014 backend that i receive a query from and format in in xbasic to produce the array

    {dialog.object}._TimeLine =['Barbee B 2-1 #4SU','Pending',new Date(2017,12,1),new Date(2017,12,11)],
    ['Barbee B 2-1 #5SU','Pending',new Date(2017,12,1),new Date(2017,12,11)],
    ['Barbee B 2-6 #2SU','Pending',new Date(2017,12,17),new Date(2017,12,31)],
    ['Barbee B 2-6 #3SU','Pending',new Date(2017,12,17),new Date(2017,12,31)],
    ['Baree B 2-1 #6SU','Pending',new Date(2017,12,13),new Date(2017,12,27)],
    ['Baree B 2-1 #7SU','Pending',new Date(2017,12,13),new Date(2017,12,27)],
    ['BearKat 8-5 #1NC','Pending',new Date(2017,11,30),new Date(2017,12,15)],
    ['BearKat 8-5 #4NC','Pending',new Date(2017,12,1),new Date(2017,12,15)],
    ['Sugg B 133-135 #2MB','Pending',new Date(2017,12,29),new Date(2018,1,8)],
    ['Sugg B 133-135 #2RF','Pending',new Date(2017,12,29),new Date(2018,1,8)],
    ['Sugg D 105 #1NM','Pending',new Date(2017,12,1),new Date(2017,12,22)],
    ['Sugg D 105 #1NU','Pending',new Date(2017,12,1),new Date(2017,12,22)],
    ['Sugg D 105 #2NM','Pending',new Date(2017,12,1),new Date(2017,12,22)];

    i take this and plug into the foloowing code

    function doTimeline() {

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

    var container = document.getElementById('JobStaus');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Well' });
    dataTable.addColumn({ type: 'string', id: 'Status' });
    dataTable.addColumn({ type: 'date', id: 'StartDate' });
    dataTable.addColumn({ type: 'date', id: 'EndDate' });
    dataTable.addRows([
    {dialog.object}._TimeLine
    ]);

    chart.draw(dataTable);
    }
    }

    when i execute the code draws the chart, but only the first record in the table. it is not doing the a parse of the full table.
    what am i missing

  2. #2
    "Certified" Alphaholic iRadiate's Avatar
    Real Name
    Stephen
    Join Date
    Jan 2011
    Location
    London, ON
    Posts
    1,572

    Default Re: learning curve on google charts

    Travis, I am by no means an expert on Google charts and it took me quite a while to get it working correctly.
    In my case, I was getting the SQL data from a list control, so a bit different from what you are doing.

    If I recall correctly, I had to loop through the selected list rows to build an array, then convert the string array to a javascript object that Google can use:
    Code:
    var chartdataObj = eval ("(" + strdata + ")");
    Where strdata is the array, then
    Code:
    var data = google.visualization.arrayToDataTable(chartdataObj);
    Have a look at this thread as well ... https://www.alphasoftware.com/alphaf...ghlight=google

    Perhaps others may offer better help for you!
    Alpha Anywhere v12.4.6.0.2 Build 5943-5324 IIS v8.5 on Windows Server 2012 in Hyper-V

  3. #3
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,566

    Default Re: learning curve on google charts

    It's a small point of properly defining the various pieces involved.

    Your _Timeline dialog variable is improperly defined... and renders as just one item in an array.
    Then... in a sense... you're trying to properly define it in your .addRows method... by shoving _Timeline into an array.

    When building data... build it the way you want to use it... don't adjust it later inside a method... that just adds confusion.

    Your code should be...

    Code:
    	{dialog.object}._TimeLine = [['Barbee B 2-1 #4SU','Pending',new Date(2017,12,1),new Date(2017,12,11)],
    		['Barbee B 2-1 #5SU','Pending',new Date(2017,12,1),new Date(2017,12,11)],
    		['Barbee B 2-6 #2SU','Pending',new Date(2017,12,17),new Date(2017,12,31)],
    		['Barbee B 2-6 #3SU','Pending',new Date(2017,12,17),new Date(2017,12,31)],
    		['Baree B 2-1 #6SU','Pending',new Date(2017,12,13),new Date(2017,12,27)],
    		['Baree B 2-1 #7SU','Pending',new Date(2017,12,13),new Date(2017,12,27)],
    		['BearKat 8-5 #1NC','Pending',new Date(2017,11,30),new Date(2017,12,15)],
    		['BearKat 8-5 #4NC','Pending',new Date(2017,12,1),new Date(2017,12,15)],
    		['Sugg B 133-135 #2MB','Pending',new Date(2017,12,29),new Date(2018,1,8)],
    		['Sugg B 133-135 #2RF','Pending',new Date(2017,12,29),new Date(2018,1,8)],
    		['Sugg D 105 #1NM','Pending',new Date(2017,12,1),new Date(2017,12,22)],
    		['Sugg D 105 #1NU','Pending',new Date(2017,12,1),new Date(2017,12,22)],
    		['Sugg D 105 #2NM','Pending',new Date(2017,12,1),new Date(2017,12,22)]];
    Note the extra set of [] surrounding your data. Now you have an Array of Arrays... which is what you want.

    Then, your .addRows will be...

    Code:
    dataTable.addRows({dialog.object}._TimeLine);
    Just the data... don't mess with it.

Similar Threads

  1. google charts or new javascript charts(Rgrahp.net)
    By amitloh in forum Mobile & Browser Applications
    Replies: 1
    Last Post: 08-25-2017, 01:36 PM
  2. Google Charts
    By Pete119j in forum Application Server Version 11 - Web/Browser Applications
    Replies: 1
    Last Post: 03-15-2016, 09:30 AM
  3. Google Charts API
    By koga101 in forum Application Server Version 10 - Web/Browser Applications
    Replies: 8
    Last Post: 04-02-2011, 05:52 PM
  4. Alpha V Access - learning curve Xbasic
    By Denis Bernicky in forum Alpha Five Version 5
    Replies: 5
    Last Post: 11-25-2003, 01:21 PM
  5. Learning Curve Estimate
    By Kenneth in forum Alpha Five Version 5
    Replies: 13
    Last Post: 07-30-2003, 07:34 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •