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";> <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> 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 -- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
