Scatter chart with data points showing number of data per date/month/year. On zoom of the data point it should scatter into sub data points

29 views

Skip to first unread message

Ananya Ojha

unread,

Jun 10, 2014, 8:42:57 AM6/10/14

to google-visua...@googlegroups.com

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

<!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", {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>

</body>

</html>

This is my scatter chart. I want feature like the above given URL where datapoints are displaying count and on click of them they are being scattered to show sub data points. Suppose, same way I want to show data points in my chart where yearly data'll be shown as a single data point with counts on it(count = number of data point per year), then splitting into month upto millisecond. Please help..

Thank you

Ananya

unread,

Jun 10, 2014, 9:11:09 AM6/10/14

to google-visua...@googlegroups.com

Can I have scatter like with points like https://03216454500425590576.googlegroups.com/attach/e8ac2af35ac74a52/GeocodeData.html?part=0.1&view=1&vt=ANaJVrGiPDp5tiBapFq38_UEZjZltwwXYLRk1sPII4tKzlxxdeQwdpJramj5mwOmg7PU6OoXADnZbp0cdibQDa55PutQLnwNUPrSEEC8WWLTZAwEv1EyaCU where on zoom it should scatter on date and time basis.

--
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/XWJGcC-w4M8/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

Daniel LaLiberte

unread,

Aug 18, 2014, 10:50:28 AM8/18/14

to google-visua...@googlegroups.com

Ananya,

Sorry for the delayed response. Using explorer mode with timeofday should now be working. There were some bugs that got fixed in the meantime.

--
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.

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.

Daniel LaLiberte - 978-394-1058

dlaliberte@Google.com 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Reply all

Reply to author

Forward

0 new messages