First, your column order is wrong; it should be ID, x, y, and BubbleCharts
do not support custom tooltips via the "tooltip" column role. Second, you
have a syntax error in the data.addRow call; the "vjdb" should be inside
the array as the first element (assuming you intended it as the ID):
data.addRow(["vjdb", new Date(d.getFullYear(), d.getMonth(), d.getDate()),
[d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()],
v.details]);
Third, creating Date objects from strings is unreliable at best (your
strings have to be in the right format, and even then different browsers
will create different dates given the same string). In your case, the
strings are not in the right format anyway, so the Date object you create
here is invalid:
var d = new Date(v.timestart);
Instead, you need to split your strings into their component pieces and
create your Dates from them:
// 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 = 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];
See working example: http://jsfiddle.net/asgallant/Rruj5/
On Friday, May 30, 2014 3:04:37 AM UTC-4, Ananya Ojha wrote:
>
> <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('date', 'Date');
> data.addColumn('timeofday', 'Time');
> data.addColumn({type: 'string', role: 'tooltip'});
> data.addColumn('string', 'ID');
>
> $.each(jdata, function(k,v) {
> var d = new Date(v.timestart);
> data.addRow("vjdb",[new Date(d.getFullYear(), d.getMonth(),
> d.getDate()), [d.getHours(), d.getMinutes(), d.getSeconds(),
> d.getMilliseconds()],v.details]);
> });
>
> 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="width: 900px; height: 500px;"></div>
> </body>
> </html>
> I applied ID column too. But, still chart is not coming.
>
>
> On Wed, May 28, 2014 at 1:02 AM, Andrew Gallant <[email protected]
> <javascript:>> wrote:
>
>> See the "Data Format" section of the BubbleChart documentation
>> <https://developers.google.com/chart/interactive/docs/gallery/bubblechart#Data_Format>.
>>
>> BubbleCharts require 3 columns: bubble ID (for labeling the bubble on the
>> chart), x-coordinate, y-coordinate. There is an optional 4th column for
>> bubble color and 5th column for bubble size.
>>
>>
>> On Tuesday, May 27, 2014 2:30:11 AM UTC-4, Ananya Ojha wrote:
>>
>>> This was a scatter chart. Trying to convert it into Bubble chart. But,
>>> some error is there(Data table should have at least 3 columns×
>>> Please help
>>>
>>>
>>> On Tue, May 27, 2014 at 11:57 AM, Andrew Gallant <[email protected]>
>>> wrote:
>>>
>>>> See the documentation for ScatterCharts
>>>> <https://developers.google.com/chart/interactive/docs/gallery/scatterchart>
>>>>
>>>> and BubbleCharts
>>>> <https://developers.google.com/chart/interactive/docs/gallery/bubblechart>.
>>>>
>>>> There is no "scatter bubble" chart, though ScatterCharts and BubbleCharts
>>>> are quite similar.
>>>>
>>>>
>>>> On Tuesday, May 27, 2014 2:21:08 AM UTC-4, Ananya Ojha wrote:
>>>>>
>>>>> How to prepare scatter bubble chart?
>>>>
>>>> --
>>>> 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/oyA8ST74dQg/unsubscribe.
>>>> To unsubscribe from this group and all its topics, 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.
>>>>
>>>
>>>
>>>
>>> --
>>> Warm Regards...
>>> Ananya Ojha
>>>
>> --
>> 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/oyA8ST74dQg/unsubscribe
>> .
>> To unsubscribe from this group and all its topics, send an email to
>> [email protected] <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
>
> --
> Warm Regards...
> Ananya Ojha
>
--
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.
