Change scatter chart's data point's color, chnge overlapped data point's color, zoom up to nanosecond level

Ananya Ojha

unread,

Jun 4, 2014, 3:51:59 AM6/4/14

to google-c...@googlegroups.com

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>

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>

</body>

</html>

Please help..

Daniel LaLiberte

unread,

Jun 4, 2014, 10:37:08 AM6/4/14

to google-c...@googlegroups.com

On Wednesday, June 4, 2014 3:51:59 AM UTC-4, Ananya Ojha wrote:

1) How to change scatter chart's data point's color?

You can change the color of all the data points by using the 'colors' option, with one color. e.g. colors: ['red']

2) How to change overlapped data point's color so they can be distinguished easier?

The best way to make overlapping points distinguishable might be to use the dataOpacity option. This seemed to work well: dataOpacity: 0.3

You can also make the point size smaller, or change its shape. See: https://developers.google.com/chart/interactive/docs/gallery/scatterchart

3) How to zoom this chart up to nano seconds?

The 'nano' level is smaller than the timeofday values will support. If you mean 'milli' seconds, it should work, but there are some bugs in the timeofday axis when used with the explorer mode. I have fixes that should be available in a few weeks.

Ananya Ojha

unread,

Jun 5, 2014, 5:40:48 AM6/5/14

to google-c...@googlegroups.com

How to zoom upto millisecond.. PLease give me some idea. And can you please tell me how to change individual data point's size and color in scatter chart?

Daniel LaLiberte

unread,

Jun 5, 2014, 8:36:41 AM6/5/14

to google-c...@googlegroups.com

Ananya,

Can you read my embedded comments, which are:

You can change the color of all the data points by using the 'colors' option, with one color. e.g. colors: ['red']

The best way to make overlapping points distinguishable might be to use the dataOpacity option. This seemed to work well: dataOpacity: 0.3

You can also make the point size smaller, or change its shape. See: https://developers.google.com/chart/interactive/docs/gallery/scatterchart

re zooming to milliseconds: there are some bugs in the timeofday axis when used with the explorer mode. I have fixes that should be available in a few weeks.

--
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 google-chart-a...@googlegroups.com.
To post to this group, send email to google-c...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-chart-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

Ananya Ojha

unread,

Jun 5, 2014, 10:21:59 AM6/5/14

to google-c...@googlegroups.com

I have changed color of data points. but, i'm asking can I make distinct data point's size as different size?

Daniel LaLiberte

unread,

Jun 5, 2014, 11:31:34 AM6/5/14

to google-c...@googlegroups.com

I believe you are asking if you can make each point in the scatter chart have a different size. If so, then no, the scatter chart assumes they are all the same size. However, the bubble chart is almost the same kind of chart, but it allows you to set the color and size of each point from data. So it sounds like you really want to use the bubble chart.

--
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 google-chart-a...@googlegroups.com.
To post to this group, send email to google-c...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.

Ananya

unread,

Jun 5, 2014, 12:19:43 PM6/5/14

to google-c...@googlegroups.com

So, can you please help me with the same requirement in bubble chart. Thank you

You received this message because you are subscribed to a topic in the Google Groups "Google Chart API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-chart-api/3-DFnwIettg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-chart-a...@googlegroups.com.

To post to this group, send email to google-c...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.

--
Warm Regards...
Ananya Ojha

Reply all

Reply to author

Forward