<!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'});
console.log(jdata[0].timestart);
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(["", 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, [{
// type: 'number',
// column: 1,
// label: 'hour',
// modifier: function (value) {
// console.log(value[0]);
// return value[0];
// }
// }], [{
// type: 'number',
// column: 2,
// label: 'count',
// 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([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(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="height: 800px; width: 1005;">
</div>
</body>
</html>
This is my code. Is it possible to draw a drill down bubble chart ? If yes,
then I want to do like this: files'll group by hour, then date, then month,
then year. I want a count onthe bubble too i.e. how many files(file: json
having a key file) it contain. If we click on yaerly grouped bubble then it
should be scattered to monthly basis. then again to day and so non upto
hour.
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.
