Convert Line Chart to Pie Chart !?

[cyb]

Hi,

i have the following code:

var data = new google.visualization.arrayToDataTable([

                    ['date','column1','column2'],

                    [20111001,2,3],

                    [20111002,5,6],

                    [20111003,8,9],

                    [20111004,11,12]  ]);

var dataView = new google.visualization.DataView(data);

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

chart.draw(dataView, options); 

 

This draws me a line chart but if i replace the LineChart with this: chart = new google.visualization.PieChart(document.getElementById('chart_div'));

i get this error: "Pie chart should have a first column of type string"

What is now the best an easiest way to convert the data from a line in a pie chart? I want switch between a pie and a line chart and all should use the same data-array. Or can i disable the check that the first value must be a string !?

And then i want select different values with dataView.setColumns(); so that i can determine which data is showing in my chart.

And second question can i convert the date- column to a real date !? 20111001 is Year 2011 Month: 10 and Day: 01 ?

Best regards cyb

             

[asgallant]

PieCharts use a string column to label the pie slices, which is why you get that error.  Also, they use only 1 data series (the second will be ignored).

You can convert those numbers into Date objects, either before you create the DataTable, while creating the DataTable, or after (in a DataView).  Here's an example DataView that converts those numbers to dates for you:

var dataView = new google.visualization.DataView(data);

dataView.setColumns([{

    type: 'date',

    label: data.getColumnLabel(0),

    calc: function (dt, row) {

        var dateString = dt.getValue(row, 0).toString();

        var year = dateString.substring(0, 4);

        var month = dateString.substring(4, 2); // javascript uses 0-indexed months (ie, January is 0 not 1), so you may need to subtract 1 from this if you haven't already accounted for it

        var day = dateString.substring(6, 2);

        return new Date(year, month, day);        

    }

}, 1, 2]);

You can also use a view to convert the dates into strings for the PieChart:

var pieView = new google.visualization.DataView(dataView);

pieView.setColumns([{

    type: 'string',

    label: dataView.getColumnLabel(0),

    calc: function (dt, row) {

        return dt.getFormattedValue(row, 0);        

    }

}, 1]);

[cyb]

Hi,

 

ok great this works, but i have another question :)

 

When i use the line chart example from my first post, i use the "dataView.setColumns(0,1);" to show or hide specific Columns..

At the moment is use the column ID´s 0,1 or whatever.. But can i use instead of the Column numbers the name of the columns ?

If i have this Data:

 

var data = new google.visualization.arrayToDataTable([

                    ['date','New York,'Austin'],

                    [20111001,2,3],

                    [20111002,5,6],

                    [20111003,8,9],

                    [20111004,11,12]  ]);

 

 

var dataView = new google.visualization.DataView(data);

 

can i say dataView.setColumns('date','Austin'); ?? 

I have dynamic data, the headers are on every file different.. At the moment i have 'date', 'New Yowk', 'Austin' but it can be anything like 'A', 'B', 'C' and so on..

 

 

Best regards

cyb

[asgallant]

You can't refer to the columns by name, only by column index.  You can search through the DataTable to find the index of a column with a given name, if that helps:

var index, name = 'my column name';

for (var i = 0, count = data.getNumberOfColumns(); i < count; i++) {

    if (data.getColumnLabel(i) == name) {

        index = i;

        break;

[cyb]

Hi,

first thx for your answer`s this helped me alot :)

I have two other questions..

First:

how can i chance the color of every column in a line or bar chart ?

can i use the my "var dataView = new google.visualization.DataView(data);"

to set the color? I have found the setProperties() Option but this needs a rowIndex.. is there an option for my dataView opject that i can say i want that column 1 is red and column 2 is green ?

and second question:

I want implement a filtering on the X-Achis

i want that i can say show only values beteen value A and B. How can i do that ?

Best regards

cyb

[asgallant]

For coloring columns, you have two options: you can either color columns individually, or color data series.  Coloring data series is the easiest to do: you can set the colors option or the series.<series index>.color options to change the colors of the columns:

colors: ['#f39bc7', '#75a7e2']

and:

series: {

    0: {

        // options for the first data series

        color: '#f39bc7'

    },

    1: {

        // options for the second data series

        color: '#75a7e2'

    }

}

produce equivalent colors for a chart with two data series.  If you want to color each bar individually, then you need to use a "style" role column in the DataTable, and assign a color as the value:

var data = new google.visualization.arrayToDataTable([

    ['date', 'column1', {type: 'string', role: 'style'}, 'column2', {type: 'string', role: 'style'}],

    [20111001, 2, '#f39bc7', 3, '#75a7e2'],

    [20111002, 5, '#f7a3cf', 6, '#75a7e2'],

    [20111003, 8, '#fbbbd7', 9, '#75a7e2'],

    [20111004, 11, '#ffc3df', 12, '#75a7e2']

]);

[cyb]

Hi,

ok thx again :)

and what is with the filtering ?

i have created a little example but it doesn`t work. I want filter the X-Axis that it only shows values that are bigger then 12..
But i get this Error: "Invalid column index 3. Should be an integer in the range [0-2]."

I want a dynamic filtering on the X-Axis that i can say i want only show values between value A and B.. and A and B can be set dynamicly.

My Example: http://jsfiddle.net/stargate/H3LcK/2/

best regards

[asgallant]

That error stems from this:

dataView.getFilteredRows([{column:3, minValue: 12}])

The view only has 3 columns, via this:

dataView.setColumns([3,1,2]);

Column 3 in the DataTable becomes column 0 in the view, so you should filter like this:

dataView.getFilteredRows([{column:0, minValue: 12}])

example: http://jsfiddle.net/asgallant/H3LcK/3/

You might want to take a look at the controls available in the API that can filter data for you.

[cyb]

Hi,

and thx again this works, great :)

Yes i`m testing the controlls but the ChartRangeFilter did not work on mobile devices :( is there a chance that this will work on mobile devices in the next release or are there any plans !?

and i have another question. Can i enable Scatter Plots on a normal line chart ? I want see the dots on the line. so that a user sees where the values are..

Best regards

[asgallant]

Mobile usability is a known issue for the Visualization API.  The work-around is to include javascript that translates touch events into click events.  There is a good post on StackOverflow with an example: http://stackoverflow.com/a/1781750/613559

For showing the points, you can set the pointSize option on the LineChart to a value greater than the line width (set by the lineWidth option).  Default pointSize is 0, default lineWidth is 1.  These can also be set per data series, via the series option (like the colors above).

[cyb]

Hi,

ok this works, but can i customize this dots ? add some effects or opacity !?

and can i make the tooltips windows transparent ?

And the point with the mobile usability.. the most charts work with no problems on my mobile devices.. the only thing that is not working is the ChartRangeSlider.. all other controlls are working so far.

But will the mobile support extended in the near time ? On the google chart page is the following message "cross platform portability to ios and new Android releases," so i thought mobile support is an important thing !?

Best regards

[asgallant]

You can use the series.<series index>.dataOpacity option to change the opacity of data points.  What other effects do you want?

To make the tooltip windows transparent, I believe that you would have to enable HTML tooltips (via setting the tooltip.isHtml option to true), and build custom tooltips via the "tooltip" column role.

[cyb]

Hi,

another question:)

i use a dataView to show or hide columns in a lineChart with dataView.setColumns(0,1).
so now i want show colum 2 also with "dataView.setColumns(0,1,2) can i animate this ? i want that column2 is animated if i add this value. is this possible with a dataView?
Best regards

[asgallant]

New data series don't animate.  You have to add a temporary data series and then redraw with the new data series, something like this:

view.setColumns([0, 1, {

    type: 'number',

    label: data.getColumnLabel(2),

    calc: function () {return 0;}
}]);

google.visualization.events.addOneTimeListener(chart, 'ready', function () {

    view.setColumns([0, 1, 2]);

    chart.draw(view, options);
});

chart.draw(view, options);

[cyb]

Hi,

and what is the best way to change options dynamicly ? i want to change add or remove options dynamicly from a chart.

at the moment i do it like this:

var options = {

            title: 'New Values',

            animation:{

                duration: 1000,

                easing: 'in'

            },

            isStacked: false,

            pointSize: 3

        };

          options.istStacked=true;  //Set Stacket to true

       chart.draw(dataView, options); // redraw chart

     

is there a better way ? how can i set,add and remove options dynamicly ?

Am Montag, 24. März 2014 17:03:13 UTC+1 schrieb cyb:

[asgallant]

That is pretty much your only option for changing the options: change whatever needs to be changed and redraw the chart.

[cyb]

Hi,

first thx for your patience with me, your helped me alot :)

you have mentioned in an post how i can convert strings to date object like this:

dataView.setColumns([{

    type: 'date',

    label: data.getColumnLabel(0),

    calc: function (dt, row) {

        var dateString = dt.getValue(row, 0).toString();

        var year = dateString.substring(0, 4);

        var month = dateString.substring(4, 2); // javascript uses 0-indexed months (ie, January is 0 not 1), so you may need to subtract 1 from this if you haven't already accounted for it

        var day = dateString.substring(6, 2);

        return new Date(year, month, day);        

    }

}, 1, 2]);

But can i make this more flexible? the date string can also look like this "01-10-1980".. i want that a user can set a pattern in an input field so that it automatically parses the string to a date object.
Can i do this with the google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"}); this is from the examples.. ?




Am Montag, 24. März 2014 17:03:13 UTC+1 schrieb cyb:

[asgallant]

Do you want to change the way the dates are displayed or the way they are input?  Use the formatter and the hAxis.format option to change the way they are displayed.  Allowing your users to use different input formats is more challenging.

[cyb]

Hi,

i want implement a Date Filter for the X-Axis so i think i need  the Date-Strings as a Date object.

If i have something like this:

var data = new google.visualization.arrayToDataTable([

                    ['date','column1','column2'],

                    [20111001,2,3],

                    [20111002,5,6],

                    [20111003,8,9],

                    [20111004,11,12]  ]);

or this..

var data = new google.visualization.arrayToDataTable([

                    ['date','column1','column2'],

                    [2011-10-01,2,3],

                    [2011-10-02,5,6],

                    [2011-10-03,8,9],

                 [2011-10-04,11,12]  ]); 

 

i must parse this values to Date Object so i need first a parser for that, or is there an other way to implement a Date Filter.. and yes the users can upload different Date Formats

I want then implement the Date Filter like this : view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2011, 10, 2),maxValue :new Date(2011,10,4)}]));

So i must first parse the date string in a Date Object..

or can i use the D3 parser for that ? (https://github.com/mbostock/d3/wiki/Time-Formatting)

var format = d3.time.format("%Y-%m-%d");
format.parse("2011-01-01"); // returns a Date
format(new Date(2011, 0, 1)); // returns a string

the user should only define the parser-pattern like "%Y-%m-%d" and he must say in which column are the date strings.

or has google charts something similar ?

Best regards

Am Montag, 24. März 2014 17:03:13 UTC+1 schrieb cyb:

[asgallant]

The Visualization API does not have any date-string input parsing tools like the d3 parser you linked to.  If that parser works for you, go ahead and use it.

[cyb]

Hi,

there are so many different ways i can do things in google charts.

I think if i do date parsing and formatting i should do it directly in the dataTable and not the view, so that the view that i create later has immediately the right format !?

How can i do this:

var dataView = new google.visualization.DataView(data);

dataView.setColumns([{

    type: 'date',

    label: data.getColumnLabel(0),

    calc: function (dt, row) {

        var dateString = dt.getValue(row, 0).toString();

        var year = dateString.substring(0, 4);

        var month = dateString.substring(4, 2); // javascript uses 0-indexed months (ie, January is 0 not 1), so you may need to subtract 1 from this if you haven't already accounted for it

        var day = dateString.substring(6, 2);

        return new Date(year, month, day);        

    }

}, 1, 2]);

with a dataTable ? I need a dynamicly way that i can say for example parse  column 0 and 1 to a Date Object..

and then i think i can use a formatter(Date Formatter) to formate the the dates directly in the DataTable.. so that all DataViews has then Date Objects and the right format.

The Formatters did change the data directly in the DataTable ?

and what is the different between the setFormattedValue option from a DataTable and the formatters that google offers ?

and last question, a pie chart needs a string object for the first column, what is if the first column is a date object can a pie chart handle this ?

 

Am Montag, 24. März 2014 17:03:13 UTC+1 schrieb cyb:

[asgallant]

There are two different approaches you can take with your dates.  Either you can add a new column to your DataTable and populate it with dates (then you can format those dates), or you can use a DataView to calculate the dates.  In the view, you can call on a formatter to format the dates if you want to:

var dataView = new google.visualization.DataView(data);

dataView.setColumns([{

    type: 'date',

    label: data.getColumnLabel(0),

    calc: function (dt, row) {

        var dateString = dt.getValue(row, 0).toString();

        var year = dateString.substring(0, 4);

        var month = dateString.substring(4, 2); // javascript uses 0-indexed months (ie, January is 0 not 1), so you may need to subtract 1 from this if you haven't already accounted for it

        var day = dateString.substring(6, 2);

        var date = new Date(year, month, day);

        var formatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy'});

        return {v: date, f: formatter.formatValue(date)};

    }

}, 1, 2]);

The formatters do change the formatted values stored in the DataTable (most of them, anyway); they call the #setFormattedValue method in the background, so there's not much difference, except the formatters tend to handle formatting aspects that can be difficult to handle (especially localization).

PieCharts cannot use dates.

[cyb]

Hi,

i want not add new columns.. is there no way that i can take the 'date'  column from the DataTable and parse it to a column with type =date ? i thought i can overwrite values in a DataTable?

data = new google.visualization.arrayToDataTable([

                    ['date','New York','Austin','San Francisco','Country','Popularity'],

                    ['20111001',2,3,15,'Germany',200],

                    ['20111002',5,6,19,'Brazil',400],

                    ['20111003',8,9,23,'United States',300],

                    ['20111004',11,12,35,'RU',700]

                ];)

at the moment i have this data, and the "date" colum is parsed to a number..

can i not write a calc function that does the same as your code with the dataView ?

and second questions:

yout have set "return {v: date, f: formatter.formatValue(date)};" for what is v:date ? for the formatted value? because you have already set the type to date with "dataView.setColumns([{

    type: 'date',...."

[asgallant]

You cannot overwrite the contents of a column with a different data type.  You could insert a new column, fill it with dates, and then delete the old column:

data.insertColumn(1, 'date', 'date');
for (var i = 0; i < data.getNumberOfRows(); i++) {
    var dateString = data.getValue(row, 0).toString();

    var year = dateString.substring(0, 4);

    var month = dateString.substring(4, 2); // javascript uses 0-indexed months (ie, January is 0 not 1), so you may need to subtract 1 from this if you haven't already accounted for it

    var day = dateString.substring(6, 2);

    data.setValue(1, i, new Date(year, month, day));

}
data.removeColumn(0);

You can then format the date column with a DateFormatter.

[asgallant]

Sorry, skipped the last part of your question:

The object returned to the view has "v" and "f" properties: the "v" property is the value of the cell, the "f" property is the formatted value of the cell.  In this case, date refers to the date object created two lines up (var date = new Date(year, month, day);).

On Monday, April 7, 2014 5:57:01 PM UTC-4, cyb wrote:

[cyb]

HI,

but if i do this:

ou cannot overwrite the contents of a column with a different data type.  You could insert a new column, fill it with dates, and then delete the old column:

data.insertColumn(1, 'date', 'date');
for (var i = 0; i < data.getNumberOfRows(); i++) {
    var dateString = data.getValue(row, 0).toString();

    var year = dateString.substring(0, 4);

    var month = dateString.substring(4, 2); // javascript uses 0-indexed months (ie, January is 0 not 1), so you may need to subtract 1 from this if you haven't already accounted for it

    var day = dateString.substring(6, 2);

    data.setValue(1, i, new Date(year, month, day));

}
data.removeColumn(0);

You can then format the date column with a DateFormatter.

then the new Colum is on index 1 ? but the index must be the same, can i remove the old column for example 0 and set the new date colum also to column 0 ?

[asgallant]

When you call:

data.removeColumn(0);

column 0 (the date strings) is removed, and all of the other columns shift down 1 index, so the new date column takes the index 0 position.