Re: Google Chart - date type.

[asgallant]

The arrayToDataTable method doesn't handle dates properly; your dates are being input as strings.  To fix this, you will have to manually construct the DataTable (or use the json format).

Here's one way you could do it manually:

var obj = [
    [new Date(2012,10,2),15,14],
    //....
];
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Buy');
data.addColumn('number', 'Sell');
data.addRows(obj);

Note that the format for the date is as a Date object and not a string when using this method.

On Tuesday, November 27, 2012 5:37:44 AM UTC-5, Dragomir Haralambiev wrote:

I'm trying to test the Google Chart, but I receive follow error:
"One or more participants failed to draw().
The filter cannot operate on a column of type string. Column type must be one of: number, date, datetime or timeofday. Column role must be domain, and correlate to a continuous axis."

What am I doing wrong?
 

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

         google.load('visualization', '1.0', {'packages':['controls']});
        google.setOnLoadCallback(drawDashboard);
   
      function drawDashboard() {
 var obj = [["Date","buy","sell"],["Date(2012,10,2)",15,14],["Date(2012,10,3)",55,51],["Date(2012,10,4)",53,49]];
        var dataa = google.visualization.arrayToDataTable(obj);
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'ChartRangeFilter',
          'containerId': 'filter_div',
          'options': {
     'filterColumnIndex': 0,
     'ui': {
      'chartType': 'LineChart',
      'chartOptions': {
        'chartArea': {'width': '90%'},
        'hAxis': {'baselineColor': 'none'}
      },
      'chartView': { 'columns': [0, 1] },
      'minRangeSize': 86400000
    }
          },
        });

        var lineChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart_div',
          'options': {
                title: 'Title',
          }
        });

        dashboard.bind(donutRangeSlider, lineChart);
        dashboard.draw(dataa);
      }   
</script>

Best regards,

Dragomir

[Dragomir Haralambiev]

Hi.

Thanks for your replay.

You right if obj is generate from javascript.

What I do if obj is generate from AJAX like this:

            var jsonData = $.ajax({

                url: "js/chart.pl",

                dataType: "json",

contentType: "application/json",

                async: false

            }).responseText;

            var obj = jQuery.parseJSON(jsonData);

Best regards,

Fragomir

[asgallant]

Can you modify the server-side code?  If so, then the best method might be to build the DataTable as a JSON object (structure linked to in the post above), which you can feed directly to the DataTable constructor.  There are examples of this in PHP on the forum here; doing it in perl would probably be similar.

[Dragomir Haralambiev]

I modify the server-side code. Here is new code:

            var jsonData = $.ajax({

                url: "js/chart.pl",

                dataType: "json",

contentType: "application/json",

                async: false

            }).responseText;

            var obj = jQuery.parseJSON(jsonData);

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

data.addColumn('date', 'Date');

data.addColumn('number', 'Buy');

data.addColumn('number', 'Sell');

data.addRows(obj); 

Server send:

[["Date(2012,10,28)",15,14],["Date(2012,10,29)",55,51],["Date(2012,10,30)",53,49]]

I receive follow Error:

Type mismatch. Value Date(2012,10,28) does not match type date in column index 0

How to convert Date(2012,10,28) to date type?

Best regards,

Dragomir

[asgallant]

If you modify your server code to send the data like this:

{
    "cols": [
        {"label": "Date", "type": "date"},
        {"label": "Buy", "type": "number"},
        {"label": "Sell", "type": "number"},
    ],
    "rows": [

        ["Date(2012,10,28)",15,14],
        ["Date(2012,10,29)",55,51],
        ["Date(2012,10,30)",53,49]
    ]
}​​

and then create the DataTable like this:

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

You don't have to worry about converting the dates from strings to Date objects.

[Dragomir Haralambiev]

I modify server program. Server send:

{

    "cols": [

        {

            "label": "Date",

            "type": "date"

        },

        {

            "label": "Buy",

            "type": "number"

        },

        {

            "label": "Sell",

            "type": "number"

        }

    ],

    "rows": [

        [

            "Date(2012,10,28)",

            15.41,

            14.08

        ],

        [

            "Date(2012,10,29)",

            55.88,

            51.3

        ],

        [

            "Date(2012,10,30)",

            53.72,

            49.21

        ],

        [

            "Date(2012,10,31)",

            0,

            0

        ]

    ]

}

I receive follow error:

Timestamp: 28.11.2012 11:31:01

Error: TypeError: e[m].c is undefined

Source File: https://www.google.com/uds/api/visualization/1.0/351cbc565e06280bb093b00ce39323d9/format+en,default,controls.I.js

Line: 143

[asgallant]

D'oh!  My mistake.  I only posted half of the changes that you would need.  Each row of data has to be formatted as an object with a property "c" that is set to an array of objects, each one with value ("v") and (optional) formatted value ("f") properties, like this:

{
    "cols": [
        {"label": "Date", "type": "date"},
        {"label": "Buy", "type": "number"},
        {"label": "Sell", "type": "number"},
    ],
    "rows": [

        {"c": [{"v": "Date(2012,10,28)"}, {"v": 15}, {"v": 14}]},
        {"c": [{"v": "Date(2012,10,29)"}, {"v": 55}, {"v": 51}]},
        {"c": [{"v": "Date(2012,10,30)"}, {"v": 53}, {"v": 49}]}
    ]

[Dragomir Haralambiev]

Yes it's working fine!!!

THANKS!

[asgallant]

You're welcome.

[Carlos El Carlitos]

Someone know why if you change the order of date type, dont works? says: All series on a given axis must be of the same data type
For example i put de col date at last

{
    "cols": [

        {"label": "Buy", "type": "number"},
        {"label": "Sell", "type": "number"},

        {"label": "Date", "type": "date"},

    ],
    "rows": [
        {"c": [{"v": 15}, {"v": 14}, {"v": "Date(2012,10,28)"}]},

        {"c": [{"v": 55}, {"v": 51}, {"v": "Date(2012,10,29)"}]},

        {"c": [{"v": 53}, {"v": 49}, {"v": "Date(2012,10,30)"}]}

    ]

[asgallant]

It would be easier to say for certain if you posted the rest of your javascript so I could see how you are using the data, but at a guess, you are trying to draw a chart with that data set, correct?

If so, the reason you see that error message is because the chart is using the first column ("Buy") as the domain axis, and the second and third columns ("Sell" and "Date") as the data series.  Since "number" and "date" types are quite different, they cannot be graphed on the same y-axis - you would have to use a second y-axis to chart this data.  I suspect, however, that your intention is to use the "Date" series as the domain axis and chart the "Buy" and "Sell" series.  If so, then you need to move the "Date" series to the first column.  If you need the data to be structured like this for some other purpose, you can use a DataView to reorder the columns instead of rearranging them in the DataTable:

var view = new google.visualization.DataView(data);
view.setColumns([2, 0, 1]);

and then use the view to draw the chart instead of the DataTable.