Scatter bubble chart

Ananya Ojha

unread,

May 27, 2014, 2:21:08 AM5/27/14

to google-visua...@googlegroups.com

How to prepare scatter bubble chart?

Andrew Gallant

unread,

May 27, 2014, 2:27:23 AM5/27/14

to google-visua...@googlegroups.com

See the documentation for ScatterCharts and BubbleCharts. There is no "scatter bubble" chart, though ScatterCharts and BubbleCharts are quite similar.

Ananya

unread,

May 27, 2014, 2:30:11 AM5/27/14

to google-visua...@googlegroups.com

This was a scatter chart. Trying to convert it into Bubble chart. But, some error is there(Data table should have at least 3 columns×

Please help

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/oyA8ST74dQg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
Warm Regards...
Ananya Ojha

google_chart.html

Andrew Gallant

unread,

May 27, 2014, 3:32:23 PM5/27/14

to google-visua...@googlegroups.com

See the "Data Format" section of the BubbleChart documentation. BubbleCharts require 3 columns: bubble ID (for labeling the bubble on the chart), x-coordinate, y-coordinate. There is an optional 4th column for bubble color and 5th column for bubble size.

On Tuesday, May 27, 2014 2:30:11 AM UTC-4, Ananya Ojha wrote:

This was a scatter chart. Trying to convert it into Bubble chart. But, some error is there(Data table should have at least 3 columns×
Please help

On Tue, May 27, 2014 at 11:57 AM, Andrew Gallant <asgall...@gmail.com> wrote:

See the documentation for ScatterCharts and BubbleCharts. There is no "scatter bubble" chart, though ScatterCharts and BubbleCharts are quite similar.

On Tuesday, May 27, 2014 2:21:08 AM UTC-4, Ananya Ojha wrote:
How to prepare scatter bubble chart?

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/oyA8ST74dQg/unsubscribe.

To unsubscribe from this group and all its topics, 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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Ananya

unread,

May 30, 2014, 3:04:37 AM5/30/14

to google-visua...@googlegroups.com

<html>

<head>

var jdata = [ { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 15:02:00" }, { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Renamed", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 14:58:47" }, { "file": "3fcdd1ee5efc6c9a400bae4ba25b137d", "type": "Printed", "pc": 0, "details": "C:\\pdf_commenting_new.pdf", "timestart": "2014-04-03 14:54:43" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Opened", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:57:39" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Renamed", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:55:44" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Created", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-02 20:18:23" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Opened", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:14" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Printed", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:45" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-02 20:20:56" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-03 14:55:21" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-02 20:27:32" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-03 13:08:36" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Created", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "d7668f16f4ce5cd589773d682899d30d", "type": "Created", "pc": 0, "details": "C:\\Globalization.pdf", "timestart": "2014-04-03 14:53:00" } ];

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

google.setOnLoadCallback(drawChart);

function drawChart() {

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

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

data.addColumn('timeofday', 'Time');

data.addColumn({type: 'string', role: 'tooltip'});

data.addColumn('string', 'ID');

$.each(jdata, function(k,v) {

var d = new Date(v.timestart);

data.addRow("vjdb",[new Date(d.getFullYear(), d.getMonth(), d.getDate()), [d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()],v.details]);

});

var options = {

title: 'Date vs. Time comparison',

// this is zoom option..

explorer: { actions: ['dragToZoom', 'rightClickToReset'] }

};

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

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

I applied ID column too. But, still chart is not coming.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Andrew Gallant

unread,

May 30, 2014, 10:01:56 AM5/30/14

to google-visua...@googlegroups.com

First, your column order is wrong; it should be ID, x, y, and BubbleCharts do not support custom tooltips via the "tooltip" column role. Second, you have a syntax error in the data.addRow call; the "vjdb" should be inside the array as the first element (assuming you intended it as the ID):

data.addRow(["vjdb", new Date(d.getFullYear(), d.getMonth(), d.getDate()), [d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()], v.details]);

Third, creating Date objects from strings is unreliable at best (your strings have to be in the right format, and even then different browsers will create different dates given the same string). In your case, the strings are not in the right format anyway, so the Date object you create here is invalid:

var d = new Date(v.timestart);

Instead, you need to split your strings into their component pieces and create your Dates from them:

// assumes your date strings are in the format "yyyy-MM-dd HH:mm:ss"
var dateTimeArr = v.timestart.split(' ');
var dateArr = dateTimeArr[0].split('-');
var timeArr = dateTimeArr[1].split(':');
var year = dateArr[0];
var month = dateArr[1] - 1; // subtract 1 to change to javascript's 0-indexed months
var day = dateArr[2];
var hours = timeArr[0];
var minutes = timeArr[1];
var seconds = timeArr[2];

See working example: http://jsfiddle.net/asgallant/Rruj5/

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
Warm Regards...
Ananya Ojha

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/oyA8ST74dQg/unsubscribe.
To unsubscribe from this group and all its topics, 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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Ananya

unread,

May 30, 2014, 10:12:48 AM5/30/14

to google-visua...@googlegroups.com

Thank you.. May I know how to count all the bubbles present in our bubblechart OR how to count number of data points in a scatter chart?

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Andrew Gallant

unread,

May 30, 2014, 11:35:10 AM5/30/14

to google-visua...@googlegroups.com

Call the #getNumberOfRows method of the DataTable; that will give you a count of the points:

var numberOfPoints = data.getNumberOfRows();

Ananya

unread,

May 30, 2014, 12:11:06 PM5/30/14

to google-visua...@googlegroups.com

Thank you

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Ananya

unread,

Jun 4, 2014, 2:37:01 AM6/4/14

to google-visua...@googlegroups.com

do the scatter data points get darker in normal scatter chart if they overlap and can we zoom in upto nano seconds?

Andrew Gallant

unread,

Jun 4, 2014, 8:04:35 PM6/4/14

to google-visua...@googlegroups.com

No, the points do not get darker if they overlap, and the smallest time resolution is milliseconds.

Warm Regards...
Ananya Ojha

Ananya

unread,

Jun 4, 2014, 11:55:15 PM6/4/14

to google-visua...@googlegroups.com

May I know how to differentiate the data points if they overlap. And how to zoom upto milliseconds?

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

Andrew Gallant

unread,

Jun 5, 2014, 12:49:42 AM6/5/14

to google-visua...@googlegroups.com

If your data is entered as "datetime" or "timeofday", you can zoom in to the millisecond level by using the explorer option or a ChartRangeFilter. There is no way to differentiate overlapping data points, except by using different sized points. If the points on the bottom is larger than the one on top, then you will be able to see both. With a BubbleChart, you have to set the values in the size column appropriately to make sure the points are visible.

Ananya

unread,

Jun 5, 2014, 2:52:06 AM6/5/14

to google-visua...@googlegroups.com

<html>

<head>

var jdata = [ { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 15:02:00" }, { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Renamed", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 14:58:47" }, { "file": "3fcdd1ee5efc6c9a400bae4ba25b137d", "type": "Printed", "pc": 0, "details": "C:\\pdf_commenting_new.pdf", "timestart": "2014-04-03 14:54:43" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Opened", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:57:39" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Renamed", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:55:44" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Created", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-02 20:18:23" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Opened", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:14" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Printed", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:45" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-02 20:20:56" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-03 14:55:21" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-02 20:27:32" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-03 13:08:36" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Created", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "d7668f16f4ce5cd589773d682899d30d", "type": "Created", "pc": 0, "details": "C:\\Globalization.pdf", "timestart": "2014-04-03 14:53:00" } ];

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

google.setOnLoadCallback(drawChart);

function drawChart() {

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

//data.addColumn('string', 'ID');

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

data.addColumn('timeofday', 'Time');

data.addColumn({type: 'string', role: 'tooltip'});

$.each(jdata, function(k,v) {

// assumes your date strings are in the format "yyyy-MM-dd HH:mm:ss"

var dateTimeArr = v.timestart.split(' ');

var dateArr = dateTimeArr[0].split('-');

var timeArr = dateTimeArr[1].split(':');

var year = parseInt(dateArr[0]);

var month = parseInt(dateArr[1]) - 1; // subtract 1 to change to javascript's 0-indexed months

var day = parseInt(dateArr[2]);

var hours = parseInt(timeArr[0]);

var minutes = parseInt(timeArr[1]);

var seconds = parseInt(timeArr[2]);

data.addRow([new Date(year, month, day), [hours, minutes, seconds],v.details]);

});

var numberOfPoints = data.getNumberOfRows();

var options = {

title: 'Date vs. Time comparison',

explorer: {

actions: ['dragToZoom', 'rightClickToReset']

}

};

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

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

Here is my code. I tried what you said. But, didn't get proper result . Can you please help me ?

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Ananya

unread,

Jun 5, 2014, 3:20:05 AM6/5/14

to google-visua...@googlegroups.com

You said: "We can differentiate data points by using different sized points. If the points on the bottom is larger than the one on top, then you will be able to see both. Is it possible with scatter chart?

Jon Orwant

unread,

Jun 5, 2014, 12:09:29 PM6/5/14

to google-visua...@googlegroups.com

Ananya,

I recommend using opacity rather than size to distinguish different data points. Try "dataOpacity: 0.5" in your options and see how that looks.

Jon

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-visualizati...@googlegroups.com.

Ananya

unread,

Jun 5, 2014, 12:16:43 PM6/5/14

to google-visua...@googlegroups.com

I have already tried with opacity. But, It's not that much distinguishable. That's why I asked you to help me by giving different size and color. Thank you

Andrew Gallant

unread,

Jun 5, 2014, 1:04:10 PM6/5/14

to google-visua...@googlegroups.com

ScatterCharts you can change point size by data series using the "series" option:

series: {
    0: {
        // first data series
        pointSize: 3
    },
    1: {
        // second data series
        pointSize: 5
    }
}

Warm Regards...
Ananya Ojha

--
Warm Regards...
Ananya Ojha

--

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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/oyA8ST74dQg/unsubscribe.
To unsubscribe from this group and all its topics, 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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
Warm Regards...
Ananya Ojha

Ananya

unread,

Jun 5, 2014, 1:14:33 PM6/5/14

to google-visua...@googlegroups.com

Can we assign those numbers dynamically? If yes, how?

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

Andrew Gallant

unread,

Jun 5, 2014, 1:59:35 PM6/5/14

to google-visua...@googlegroups.com

Something like this:

var pointSize1 = 3, pointSize2 = 5;

then in the options:

series: {
0: {
// first data series

pointSize: pointSize1

    },
    1: {
        // second data series

pointSize: pointSize2
}
}

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+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/oyA8ST74dQg/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
Warm Regards...
Ananya Ojha

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/oyA8ST74dQg/unsubscribe.

Ananya

unread,

Jun 5, 2014, 10:34:20 PM6/5/14

to google-visua...@googlegroups.com

If there are 1000 data points then how to assign different size to them? Do we need to write 1000 times ?

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

Andrew Gallant

unread,

Jun 6, 2014, 12:54:18 AM6/6/14

to google-visua...@googlegroups.com

The ScatterCharts assign point size by data series, so you would only have to assign it for the data series you want to change.

Ananya

unread,

Jun 9, 2014, 4:53:04 AM6/9/14

to google-visua...@googlegroups.com

Can we put all data points of a day into single bubble? CAn we do like : http://www.realestate.com.au/buy/in-melbourne,+vic/map-1

But, using bubble or scatter chart, no geo chart.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Andrew Gallant

unread,

Jun 9, 2014, 10:41:12 AM6/9/14

to google-visua...@googlegroups.com

You could do something like that by using the google.visualization.data.group function to group your data by (x, y) cooridinates and aggregate it.

...

Ananya

unread,

Jun 9, 2014, 12:45:38 PM6/9/14

to google-visua...@googlegroups.com

<html>

<head>

var jdata = [ { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 15:02:00" }, { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Renamed", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 14:58:47" }, { "file": "3fcdd1ee5efc6c9a400bae4ba25b137d", "type": "Printed", "pc": 0, "details": "C:\\pdf_commenting_new.pdf", "timestart": "2014-04-03 14:54:43" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Opened", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:57:39" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Renamed", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:55:44" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Created", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-02 20:18:23" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Opened", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:14" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Printed", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:45" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-02 20:20:56" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-03 14:55:21" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-02 20:27:32" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-03 13:08:36" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Created", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "d7668f16f4ce5cd589773d682899d30d", "type": "Created", "pc": 0, "details": "C:\\Globalization.pdf", "timestart": "2014-04-03 14:53:00" } ];

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

google.setOnLoadCallback(drawChart);

function drawChart() {

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

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

data.addColumn('timeofday', 'Time');

data.addColumn({type: 'string', role: 'tooltip'});

data.addColumn('string', 'ID');

$.each(jdata, function(k,v) {

var d = new Date(v.timestart);

var dateTimeArr = v.timestart.split(' ');
var dateArr = dateTimeArr[0].split('-');
var timeArr = dateTimeArr[1].split(':');
var year = dateArr[0];
var month = dateArr[1] - 1; // subtract 1 to change to javascript's 0-indexed months
var day = dateArr[2];
var hours = timeArr[0];
var minutes = timeArr[1];
var seconds = timeArr[2];

data.addRow(["vjdb", new Date(d.getFullYear(), d.getMonth(), d.getDate()), [d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()], v.details]);

});

var options = {

title: 'Date vs. Time comparison',

// this is zoom option..

explorer: { actions: ['dragToZoom', 'rightClickToReset'] }

};

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

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

I tried with this code. Can you please tell me how to implement google.visualization.data.group with this?

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Andrew Gallant

unread,

Jun 9, 2014, 5:20:03 PM6/9/14

to google-visua...@googlegroups.com

You could try something like this:

// group all data at the same (x, y) coordinates together
var groupedData = google.visualization.data.group(data, [1, 2], [{
    type: 'string',
    label: data.getColumnLabel(0),
    column: 0,
    aggregation: function (values) {
        // join the labels together
        return values.join(',');
    }
}, {
    type: 'number',
    label: 'Size',
    column: 2,
    // sum the y values together to get the size of the bubble, you can omit this column if you want to leave the bubbles the same size
    aggregation: google.visualization.data.sum
}]);
var view = new google.visualization.DataView(groupedData);
// rearrange the column order to make it fit the BubbleChart's needs
view.setColumns([2, 0, 1, 3]);
chart.draw(view, options);

...

Ananya

unread,

Jun 10, 2014, 1:26:43 AM6/10/14

to google-visua...@googlegroups.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>

Google Visualization API Sample

</title>

var jdata = [ { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 15:02:00" }, { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Renamed", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 14:58:47" }, { "file": "3fcdd1ee5efc6c9a400bae4ba25b137d", "type": "Printed", "pc": 0, "details": "C:\\pdf_commenting_new.pdf", "timestart": "2014-04-03 14:54:43" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Opened", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:57:39" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Renamed", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:55:44" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Created", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-02 20:18:23" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Opened", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:14" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Printed", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:45" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-02 20:20:56" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-03 14:55:21" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-02 20:27:32" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-03 13:08:36" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Created", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "d7668f16f4ce5cd589773d682899d30d", "type": "Created", "pc": 0, "details": "C:\\Globalization.pdf", "timestart": "2014-04-03 14:53:00" } ];

google.load('visualization', '1.1', {packages: ['corechart', 'controls']});

</script>

// group all data at the same (x, y) coordinates together

var groupedData = google.visualization.data.group(data, [1, 2], [{

type: 'string',

label: data.getColumnLabel(0),

column: 0,

aggregation: function (values) {

// join the labels together

return values.join(',');

}

}, {

type: 'number',

label: 'Size',

column: 2,

// sum the y values together to get the size of the bubble, you can omit this column if you want to leave the bubbles the same size

aggregation: google.visualization.data.sum

}]);

var view = new google.visualization.DataView(groupedData);

// rearrange the column order to make it fit the BubbleChart's needs

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

chart.draw(view, options);

</script>

</head>

<body>

</div>

</body>

</html>

This is my code. data is not defined error is coming. Please help.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

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

Andrew Gallant

unread,

Jun 10, 2014, 1:33:25 AM6/10/14

to google-visua...@googlegroups.com

That code should have been added to your drawChart function, like this:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('timeofday', 'Time');
    data.addColumn({type: 'string', role: 'tooltip'});
    data.addColumn('string', 'ID');

    $.each(jdata, function(k,v) {
        var d = new Date(v.timestart);
        var dateTimeArr = v.timestart.split(' ');
        var dateArr = dateTimeArr[0].split('-');
        var timeArr = dateTimeArr[1].split(':');
        var year = dateArr[0];
        var month = dateArr[1] - 1; // subtract 1 to change to javascript's 0-indexed months
        var day = dateArr[2];
        var hours = timeArr[0];
        var minutes = timeArr[1];
        var seconds = timeArr[2];
        data.addRow(["vjdb", new Date(d.getFullYear(), d.getMonth(), d.getDate()), [d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()], v.details]);
    });

    // group all data at the same (x, y) coordinates together
    var groupedData = google.visualization.data.group(data, [1, 2], [{
        type: 'string',
        label: data.getColumnLabel(0),
        column: 0,
        aggregation: function (values) {
            // join the labels together
            return values.join(',');
        }
    }, {
        type: 'number',
        label: 'Size',
        column: 2,
        // sum the y values together to get the size of the bubble, you can omit this column if you want to leave the bubbles the same size
        aggregation: google.visualization.data.sum
    }]);
    var view = new google.visualization.DataView(groupedData);
    // rearrange the column order to make it fit the BubbleChart's needs
    view.setColumns([2, 0, 1, 3]);

    var options = {
        title: 'Date vs. Time comparison',
        // this is zoom option..
        explorer: { actions: ['dragToZoom', 'rightClickToReset'] }
    };

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

chart.draw(view, options);
}

...

Ananya

unread,

Jun 10, 2014, 1:37:56 AM6/10/14

to google-visua...@googlegroups.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>

Google Visualization API Sample

</title>

var jdata = [ { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 15:02:00" }, { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Renamed", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 14:58:47" }, { "file": "3fcdd1ee5efc6c9a400bae4ba25b137d", "type": "Printed", "pc": 0, "details": "C:\\pdf_commenting_new.pdf", "timestart": "2014-04-03 14:54:43" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Opened", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:57:39" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Renamed", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:55:44" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Created", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-02 20:18:23" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Opened", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:14" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Printed", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:45" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-02 20:20:56" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-03 14:55:21" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-02 20:27:32" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-03 13:08:36" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Created", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "d7668f16f4ce5cd589773d682899d30d", "type": "Created", "pc": 0, "details": "C:\\Globalization.pdf", "timestart": "2014-04-03 14:53:00" } ];

google.load('visualization', '1.1', {packages: ['corechart', 'controls']});

</script>

// group all data at the same (x, y) coordinates together

</script>

</head>

<body>

</div>

</body>

</html>

I replaced my code with yous. But, still no output.

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/oyA8ST74dQg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Ananya

unread,

Jun 10, 2014, 7:29:33 AM6/10/14

to google-visua...@googlegroups.com

Getting error: Uncaught Error: Type mismatch. Value 020,18,23,0 does not match type number in column index 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> var jdata = [ { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 15:02:00" }, { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Renamed", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 14:58:47" }, { "file": "3fcdd1ee5efc6c9a400bae4ba25b137d", "type": "Printed", "pc": 0, "details": "C:\\pdf_commenting_new.pdf", "timestart": "2014-04-03 14:54:43" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Opened", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:57:39" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Renamed", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:55:44" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Created", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-02 20:18:23" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Opened", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:14" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Printed", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:45" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-02 20:20:56" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-03 14:55:21" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-02 20:27:32" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-03 13:08:36" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Created", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "d7668f16f4ce5cd589773d682899d30d", "type": "Created", "pc": 0, "details": "C:\\Globalization.pdf", "timestart": "2014-04-03 14:53:00" } ]; google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); // group all data at the same (x, y) coordinates together function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'ID'); data.addColumn('date', 'Date'); data.addColumn('timeofday', 'Time'); data.addColumn({type: 'string', role: 'tooltip'}); $.each(jdata, function(k,v) { var d = new Date(v.timestart); var dateTimeArr = v.timestart.split(' '); var dateArr = dateTimeArr[0].split('-'); var timeArr = dateTimeArr[1].split(':'); var year = dateArr[0]; var month = dateArr[1] - 1; // subtract 1 to change to javascript's 0-indexed months var day = dateArr[2]; var hours = timeArr[0]; var minutes = timeArr[1]; var seconds = timeArr[2]; data.addRow(["vjdb", new Date(d.getFullYear(), d.getMonth(), d.getDate()), [d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()], v.details]); }); // group all data at the same (x, y) coordinates together var groupedData = google.visualization.data.group(data, [1, 2], [{ type: 'string', label: data.getColumnLabel(0), column: 0, aggregation: function (values) { // join the labels together return values.join(','); } }, { type: 'number', label: 'Size', column: 2, // sum the y values together to get the size of the bubble, you can omit this column if you want to leave the bubbles the same size aggregation: google.visualization.data.sum }]); var view = new google.visualization.DataView(groupedData); // rearrange the column order to make it fit the BubbleChart's needs view.setColumns([2, 0, 1, 3]); var options = { title: 'Date vs. Time comparison', // this is zoom option.. explorer: { actions: ['dragToZoom', 'rightClickToReset'] } }; var chart = new google.visualization.BubbleChart(document.getElementById('chart_div')); chart.draw(view, options); } </script> </head> <body> <div id="chart_div"> </div> </body> </html>

Andrew Gallant

unread,

Jun 10, 2014, 1:01:53 PM6/10/14

to google-visua...@googlegroups.com

Sorry, I wasn't paying attention to your data types. Summing a "timeofday" data type is meaningless, so you probably should remove that column or use a different way to calculate it (google.visualization.data.count would work).

<blockq
...

Ananya

unread,

Jun 10, 2014, 1:08:43 PM6/10/14

to google-visua...@googlegroups.com

I want to sum up the total number of records per hour/day/month.year. How to do that?

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/oyA8ST74dQg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Andrew Gallant

unread,

Jun 10, 2014, 1:22:00 PM6/10/14

to google-visua...@googlegroups.com

To group data by hour, you would need to do this:

var groupedData = google.visualization.data.group(data, [{
    type: 'number',
    column: 1,
    label: 'hour',
    modifier: function (value) {
        return value[0];
    }
}], [{
    type: 'number',
    column: 2,
    label: 'count',
    aggregation: google.visualization.data.count
}]);

days would be:

var groupedData = google.visualization.data.group(data, [0], [{
    type: 'number',
    column: 2,
    label: 'count',
    aggregation: google.visualization.data.count
}]);

years would be:

var groupedData = google.visualization.data.group(data, [{
    type: 'number',
    column: 0,
    label: 'year',
    modifier: function (value) {
        return value.getFullYear();
    }
}], [{
    type: 'number',
    column: 2,
    label: 'count',
    aggregation: google.visualization.data.count
}]);

...

Ananya

unread,

Jun 10, 2014, 1:36:03 PM6/10/14

to google-visua...@googlegroups.com

I tried but, not getting exactly how to implement it. Can you please help me for implementing this along with the zoom feature like google map?

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/oyA8ST74dQg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Ananya

unread,

Jun 10, 2014, 2:02:28 PM6/10/14

to google-visua...@googlegroups.com

Im getting this error: Invalid column index 2. Should be an integer in the range [0-1].

Andrew Gallant

unread,

Jun 10, 2014, 4:33:51 PM6/10/14

to google-visua...@googlegroups.com

What DataTable are you grouping?

<div style="font-family:arial,sans-s
...

Ananya

unread,

Jun 10, 2014, 11:20:16 PM6/10/14

to google-visua...@googlegroups.com

I want to show the filea as bubbles and zoom it the way as in google map. I want to group those files per hour,day,month,year to show as a group.

--

Ananya

unread,

Jun 11, 2014, 3:22:13 AM6/11/14

to google-visua...@googlegroups.com

Please tell me how to take the date and time where I can sum up the number of files in the JSON. I tried. But, not getting how to do

Andrew Gallant

unread,

Jun 11, 2014, 4:01:27 PM6/11/14

to google-visua...@googlegroups.com

Is this what you are looking for? http://jsfiddle.net/asgallant/uEA95/

var jdata = [ { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 15:02:00" }, { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Renamed", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 14:58:47" }, { "file": "3fcdd1ee5efc6c9a400bae4ba25b137d", "type": "Printed", "pc": 0, "details": "C:\\pdf_commenting_new.pdf", "timestart": "2014-04-03 14:54:43" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Opened", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:57:39" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Renamed", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:55:44" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Created", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-02 20:18:23" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Opened", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:14" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Printed", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:45" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-02 20:20:56" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-03 14:55:21" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-02 20:27:32" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-03 13:08:36" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Created", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf&quot
...

Andrew Gallant

unread,

Jun 11, 2014, 4:10:23 PM6/11/14

to google-visua...@googlegroups.com

Here's a better example: http://jsfiddle.net/asgallant/uEA95/2/

...

Ananya

unread,

Jun 11, 2014, 9:57:13 PM6/11/14

to google-visua...@googlegroups.com

Thank you. This is close to what I'm looking for. May I know what are the numbers/? And how to do this with the JSON data that I have in the code?

http://www.realestate.com.au/buy/in-melbourne,+vic/map-1

Can we represent the bubble like this, where on click of the bubble the sub-bubble'sll be zoomed.

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/oyA8ST74dQg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Andrew Gallant

unread,

Jun 12, 2014, 12:10:13 AM6/12/14

to google-visua...@googlegroups.com

The sort answer is yes, that would be possible. You would need to create a "select" event handler that gets the selected data point, filters your DataTable to find the points that make it up, and redraws the chart with the filtered data (perhaps grouped again, if necessary). You'll have to parse your data to set the hAxis.viewWindow and vAxis.viewWindow options appropriately. Here's a skeleton of code you can use:

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

...

Ananya

unread,

Jun 12, 2014, 1:47:13 AM6/12/14

to google-visua...@googlegroups.com

Thank you.. One more doubt. When clicking on bubble, it's getting splitted, but bubbles are overlapping each other. Is there any way to make some space or arrange them in such a way so that they'll be distinct from each other. One more thing, after zoom when we are doing right click, that time it should get reset. Now on right click its not getting reset. When we are clicking the bubble which is having 1 data that time the close bubble is getting clicked.

Here is my code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>

Google Visualization API Sample

</title>

var jdata = [ { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 15:02:00" }, { "file": "1a24ae6b3e6fafe458ce680d9b472b85", "type": "Renamed", "pc": 0, "details": "C:\\Sandbox\\briefdocument.pdf", "timestart": "2014-04-03 14:58:47" }, { "file": "3fcdd1ee5efc6c9a400bae4ba25b137d", "type": "Printed", "pc": 0, "details": "C:\\pdf_commenting_new.pdf", "timestart": "2014-04-03 14:54:43" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Opened", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:57:39" }, { "file": "58dd597d395e898d2d573bf17b61d55e", "type": "Renamed", "pc": 0, "details": "C:\\PDFs\\WebConfig789.pdf", "timestart": "2014-04-03 14:55:44" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Created", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-02 20:18:23" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Opened", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:14" }, { "file": "738b2ed34cc03fc98089a178db08490d", "type": "Printed", "pc": 0, "details": "C:\\Autoship-chrg-stock-orders.pdf", "timestart": "2014-04-03 13:26:45" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-02 20:20:56" }, { "file": "be2a2db6fa5a6ba360f66abdbe903ba5", "type": "Opened", "pc": 0, "details": "C:\\LINQ+Introduction.pdf", "timestart": "2014-04-03 14:55:21" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-02 20:27:32" }, { "file": "bf491f0f97ecb717ea937cf3339ff119", "type": "Opened", "pc": 0, "details": "C:\\designerrenaming.pdf", "timestart": "2014-04-03 13:08:36" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Created", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "c1d481d512f70392cd03336fd77c56d4", "type": "Opened", "pc": 0, "details": "C:\\Sandbox\\Kentico Document Database.pdf", "timestart": "2014-04-03 14:57:31" }, { "file": "d7668f16f4ce5cd589773d682899d30d", "type": "Created", "pc": 0, "details": "C:\\Globalization.pdf", "timestart": "2014-04-03 14:53:00" } ];

function drawChart() {

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

data.addColumn('string', 'ID');

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

data.addColumn('timeofday', 'Time');

data.addColumn({type: 'string', role: 'tooltip'});

$.each(jdata, function(k,v) {

var dateTimeArr = v.timestart.match(/(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/);

var year = parseInt(dateTimeArr[1]);

var month = parseInt(dateTimeArr[2]) - 1; // subtract 1 to change to javascript's 0-indexed months

var day = parseInt(dateTimeArr[3]);

var hours = parseInt(dateTimeArr[4]);

var minutes = parseInt(dateTimeArr[5]);

var seconds = parseInt(dateTimeArr[6]);

data.addRow(["vjdb", new Date(year, month, day), [hours, minutes, seconds, 0], v.details]);

});

// group all data at the same (x, y) coordinates together

var groupedData = google.visualization.data.group(data, [1, {

type: 'timeofday',

label: data.getColumnLabel(2),

column: 2,

modifier: function (value) {

// round down time of day to hour

return [value[0], 0, 0, 0];

}

}], [{

type: 'number',

label: 'Size',

column: 0,

aggregation: google.visualization.data.count

}]);

var view = new google.visualization.DataView(groupedData);

// rearrange the column order to make it fit the BubbleChart's needs

view.setColumns([{

type: 'string',

sourceColumn: 2,

calc: 'stringify'

}, 0, 1, {

type: 'number',

calc: function (dt, row) {

return row;

}

}, 2]);

var options = {

title: 'Date vs. Time comparison',

// this is zoom option..

explorer: { actions: ['dragToZoom', 'rightClickToReset'] },

hAxis: {

viewWindow: {

min: new Date(2014, 3, 1),

max: new Date(2014, 3, 4)

}

},

vAxis: {

viewWindow: {

min: [10, 0, 0, 0],

max: [22, 0, 0, 0]

}

};

google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

</script>

</head>

<body>

</div>

</body>

</html>

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/oyA8ST74dQg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Ananya

unread,

Jun 12, 2014, 7:54:10 AM6/12/14

to google-visua...@googlegroups.com

Can we scatter the children bubble on click of the parent bubble? No need of click and scatter. An d onemore thing by default, bubble are comingon rught side. can we make it to center? PLease help

Thank you

Andrew Gallant

unread,

Jun 12, 2014, 3:33:43 PM6/12/14

to google-visua...@googlegroups.com

There is no way to detect a right-click on the chart, so you would have to have something else to zoom out again. To position the bubbles correctly, you have to parse the filtered data and set the hAxis.viewWindow and vAxis.viewWindow options appropriately.

...

Ananya

unread,

Jun 13, 2014, 7:39:18 AM6/13/14

to google-visua...@googlegroups.com

Can we zoom the bubble on mouse scroll up and zoom out it mouse scroll down? After zooming bubble, how to get back to previous?

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/oyA8ST74dQg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Andrew Gallant

unread,

Jun 13, 2014, 11:48:30 AM6/13/14

to google-visua...@googlegroups.com

The charts don't throw events for mouse wheel activity. It may be possible to set up a mouse wheel event handler on the container div and use it to drive a zoom mechanism on the chart, but it would likely be quite complex to implement.

...

Reply all

Reply to author

Forward