Google drill down bubble chart

44 views

Skip to first unread message

Ananya Ojha

unread,

Jun 11, 2014, 9:14:16 AM6/11/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", {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>

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

Ananya

unread,

Jun 11, 2014, 10:04:04 AM6/11/14

to google-visua...@googlegroups.com

Please do the needful If any thing needs to be changed, please change. I'm new to google chart. So, not getting how to do this. Thank you

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