1) How to change scatter chart's data point's color?
2) How to change overlapped data point's color so they can be distinguished
easier?
3) How to zoom this chart up to nano seconds?
Here is the code:
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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);
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>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Please help..
--
You received this message because you are subscribed to the Google Groups
"Google Chart 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-chart-api.
For more options, visit https://groups.google.com/d/optout.
