Your code is fine except that instead of rows: [rows] you need rows: rows
like so:
data = new google.visualization.DataTable({
cols: [
{id: 'datetime', label: 'Date', type: 'date'},
{id: 'volume', label: 'Volume', type: 'number'},
{id: 'price', label: 'Price', type: 'number'}
],
rows: rows // and not rows: [rows]
});
After that you can pass the data to the chart, same as before:
var chart = new google.visualization.AnnotatedTimeLine
(document.getElementById('div1'));
chart.draw(data, {displayAnnotations: true});
- VizBoy.
On Fri, Feb 20, 2009 at 12:05 PM, Arshad <[email protected]> wrote:
>
> Hi,
>
> As per your code, I have used this:
>
> /
>
> ************************************************************************************************/
> $(document).ready(function()
> {
> loadTimeLineAPI();
> });
>
> function loadTimeLine() {
> drawChart();
> }
>
> function loadTimeLineAPI() {
> var a = google.load("visualization", "1", {"callback": loadTimeLine,
> packages:["annotatedtimeline"]});
> }
>
> function drawChart() {
> var myJsonObject = getData();
> var rows = [];
> var data, row;
>
> var quotes = myJsonObject[0].quotes;
> if(myJsonObject.length>0)
> {
> for(var i=0; i<quotes.length; i++)
> {
> var quote = quotes[i];
> var dateString = quote.datetime;
> var dateElements = dateString.split('/');
> var cellsArray =
> [
> {v: new Date(dateElements[2],
> dateElements[0],dateElements[1])},
> {v: quote.volume}, {v: quote.price}
> ];
> row = {c: cellsArray};
> rows.push(row);
>
> data = new google.visualization.DataTable({
> cols: [
> {id: 'datetime', label: 'Date', type: 'date'},
> {id: 'volume', label: 'Volume', type: 'number'},
> {id: 'price', label: 'Price', type: 'number'}
> ],
> rows: [rows]
> });
> }
> var chart = new google.visualization.AnnotatedTimeLine
> (document.getElementById('div1'));
> chart.draw(data, {displayAnnotations: true});
> }
>
> function getData()
> {
> var data = [{
> "quotes":[
>
> {"datetime":"03/26/2008","volume":4.482362E7,"marketcap":
> 2.658073488E11,"price":28.56},
>
> {"datetime":"08/26/2008","volume":4.477303E7,"marketcap":
> 2.4898309011E11,"price":27.27},
>
> {"datetime":"09/16/2008","volume":1.116584E8,"marketcap":
> 2.3729631507E11,"price":25.99},
>
> {"datetime":"08/04/2008","volume":6.040522E7,"marketcap":
> 2.3081380704E11,"price":25.28},
>
> {"datetime":"07/11/2008","volume":6.810552E7,"marketcap":
> 2.3516064825E11,"price":25.25}]
> }];
> var p = eval(data);
> return p;
> }
> /
>
> ************************************************************************************************/
>
> everything is fine but now i need to pass the value of "rows.push
> (row)" to
>
> /
>
> ************************************************************************************************/
> data = new google.visualization.DataTable({
> cols: [
> {id: 'datetime', label: 'Date', type: 'date'},
> {id: 'volume', label: 'Volume', type: 'number'},
> {id: 'price', label: 'Price', type: 'number'}
> ],
> rows: [rows] // What should I do pass here?
> });
> /
>
> ************************************************************************************************/
>
> After that I need to pass the data variable to:
>
> /
>
> ************************************************************************************************/
> var chart = new google.visualization.AnnotatedTimeLine
> (document.getElementById('div1'));
> chart.draw(data, {displayAnnotations: true});
> /
>
> ************************************************************************************************/
>
> for creating the TimeLine chart.
>
> Please let me suggest here. That after creating the correct JSON
> format what variable I should pass?
>
> Thanks - arsh
>
>
>
>
>
> On Feb 20, 12:24 pm, VizBoy <[email protected]> wrote:
> > Arshad,
> >
> > You ignored a piece of my sample code that I sent you in my previous
> email
> > that parsed the date string. In the Visualization api we don't read dates
> by
> > strings, but rather we construct javascript Date objects by using new
> > Date(year, month, day).
> > In the code sample I sent you in the previous message, there is some code
> > that does that. You can read it again and use it.
> >
> > Furthermore, I'm very sorry, but I can't write your code for you. Even if
> > this is urgent... Please try to use the examples, play around with them,
> and
> > use debugging tools like Firefox's FireBug.
> >
> > Regards,
> > VizBoy.
> >
> > On Fri, Feb 20, 2009 at 8:43 AM, Arshad <[email protected]>
> wrote:
> >
> > > Hi,
> >
> > > Thanks dear for your reply, Dear I am using to this scenario, my JSON
> > > format is different from your’s. Please check the below example & let
> > > me know that how can I handle it. This is not working, please this is
> > > urgent.
> >
> > > /
> >
> > >
> ************************************************************************************************/
> > > $(document).ready(function()
> > > {
> > > loadTimeLineAPI();
> > > });
> >
> > > function loadTimeLine() {
> > > drawChart();
> > > }
> >
> > > function loadTimeLineAPI() {
> > > var a = google.load("visualization", "1", {"callback":
> loadTimeLine,
> > > packages:["annotatedtimeline"]});
> > > }
> >
> > > function drawChart() {
> > > var myJsonObject = getData();
> > > var rows = [];
> > > if(myJsonObject.length>0)
> > > {
> > > $.each(myJsonObject[0].quotes, function(a,b) {
> > > var dateString = b.datetime;
> > > var volume = b.volume;
> > > var price = b.price;
> > > var cellsArray =
> > > [
> > > {v: dateString},{v: volume}, {v:
> > > price}
> > > ];
> > > var row = {c: cellsArray};
> > > rows.push(row);
> > > });
> > > }
> >
> > > var chart = new google.visualization.AnnotatedTimeLine
> > > (document.getElementById('div1'));
> > > chart.draw(row, {displayAnnotations: true});
> > > }
> >
> > > function getData()
> > > {
> > > var data = [{
> > > "quotes":[
> >
> > > {"datetime":"03/26/2006","volume":531,"marketcap":8.73E11,"price":
> > > 128.56},
> >
> > > {"datetime":"08/26/2006","volume":131,"marketcap":8.301E11,"price":
> > > 227.27},
> >
> > > {"datetime":"09/16/2006","volume":231,"marketcap":8.637E11,"price":
> > > 325.99},
> >
> > > {"datetime":"08/04/2006","volume":331,"marketcap":8.384E11,"price":
> > > 425.28},
> >
> > > {"datetime":"07/11/2006","volume":531,"marketcap":8.065E11,"price":
> > > 425.25}]
> > > }];
> > > var p = eval(data);
> > > return p;
> > > }
> > > /
> >
> > >
> ************************************************************************************************/
> >
> > > Thanks
> > > - arsh
> >
> > > On Feb 19, 11:40 pm, VizBoy <[email protected]> wrote:
> > > > Hi,
> >
> > > > You need to format your data in a way that fits the Visualization
> API. It
> > > > does not matter that it's huge with hundreds of rows. It will still
> work
> > > > just fine if you format it correctly. In your case, instead of what
> you
> > > > wrote, it should be in the format you used below:
> >
> > > > var data = new google.visualization.DataTable({
> > > > cols: [
> > > > {label: 'Date', type: 'date'},
> > > > {label: 'Volume', type: 'number'},
> > > > {label: 'Price', type: 'number'}],
> > > > rows: [
> > > > {c:[{v: new Date(2008, 3 ,26)}, {v:
> > > > 4.482362E7}, {v:28.56}]},
> > > > {c:[{v: new Date(2008, 8, 26)}, {v:
> > > > 4.477303E7}, {v:27.27}]},
> > > > {c:[{v: new Date(2008, 9, 16)}, {v:
> > > > 1.116584E8}, {v:25.99}]},
> > > > {c:[{v: new Date(2008, 8, 4)}, {v:
> > > > 6.040522E7}, {v:25.28}]},
> > > > {c:[{v: new Date(2008, 7, 11)}, {v:
> > > > 6.810552E7}, {v:25.25}]}
> > > > ]
> > > > });
> >
> > > > Only with many more rows....
> > > > If you're asking how to do it automatically, you could do something
> like:
> > > > var rows = [];
> > > > var quotes = myJsonObject.quotes;
> > > > for (var i = 0; i < quotes.length; i++) {
> > > > var quote = quotes[i];
> > > > var dateString = quote.date;
> > > > var dateElements = dateString.split('/');
> > > > var cellsArray = [{v: new Date(dateElements[2], dateElements[0],
> > > > dateElements[1])},
> > > > {v: quote.volume}, {v: quote.price}];
> > > > var row = {c: cellsArray};
> > > > rows.push(row);
> >
> > > > }
> >
> > > > This code might need some fixing, because I wrote it without testing,
> but
> > > > this is the general idea. Somehow transform the data that you have
> into
> > > the
> > > > correct form of rows for our API.
> >
> > > > Regards,
> > > > VizBoy.
> >
> > > > On Thu, Feb 19, 2009 at 7:26 AM, Arshad <[email protected]>
> > > wrote:
> >
> > > > > My question is that I dont know that how many rows in JSON.. Please
> > > > > check the JSON below:
> > > > > Now my question is that how can I use to this huge JSON data using
> a
> > > > > variable, please let me know that how can I use it.
> >
> > > > > JSON:
> > > > > ----------------------------
> > > > > {"quotes":[{"volume":4.482362E7,"marketcap":2.658073488E11,"price":
> > > > > 28.56,"date":"03/26/2008"},{"volume":4.477303E7,"marketcap":
> > > > > 2.4898309011E11,"price":27.27,"date":"08/26/2008"},{"volume":
> > > > > 1.116584E8,"marketcap":2.3729631507E11,"price":
> > > > > 25.99,"date":"09/16/2008"},{"volume":6.040522E7,"marketcap":
> > > > > 2.3081380704E11,"price":25.28,"date":"08/04/2008"},{"volume":
> > > > > 6.810552E7,"marketcap":2.3516064825E11,"price":
> > > > > 25.25,"date":"07/11/2008"},{"volume":4.949439E7,"marketcap":
> > > > > 2.713915368E11,"price":29.16,"date":"04/02/2008"},{"volume":
> > > > >
> 5.196673E7,"marketcap":2.4003073E11,"price":26.23,"date":"07/30/2008"},
> > > > > {"volume":8.453531E7,"marketcap":2.663657676E11,"price":
> > > > > 28.62,"date":"03/13/2008"},{"volume":1.029828E8,"marketcap":
> > > > > 1.6270003017E11,"price":18.29,"date":"11/19/2008"},{"volume":
> > > > > 1.173847E8,"marketcap":2.53148925302E11,"price":
> > > > > 27.1999,"date":"02/29/2008"},{"volume":9.736064E7,"marketcap":
> > > > > 1.7888997303E11,"price":20.11,"date":"12/16/2008"},{"volume":
> > > > > 9.992337E7,"marketcap":2.5024818291E11,"price":
> > > > > 26.87,"date":"07/01/2008"},{"volume":7.846461E7,"marketcap":
> > > > > 2.5602242457E11,"price":27.49,"date":"06/06/2008"},{"volume":
> > > > > 5.335511E7,"marketcap":2.835907031793E11,"price":
> > > > > 30.4501,"date":"05/15/2008"},{"volume":9.810299E7,"marketcap":
> > > > > 2.92704521E11,"price":31.45,"date":"04/23/2008"},{"volume":
> > > > > 1.072016E8,"marketcap":2.4169073451E11,"price":
> > > > > 26.69,"date":"09/30/2008"},{"volume":7.60048E7,"marketcap":
> > > > > 2.635661919E11,"price":28.3,"date":"06/05/2008"},{"volume":
> > > > > 7.161478E7,"marketcap":2.738108142E11,"price":
> > > > > 29.4,"date":"05/01/2008"},{"volume":3.137194E7,"marketcap":
> > > > > 1.7986848606E11,"price":20.22,"date":"11/28/2008"},{"volume":
> > > > > 1.463643E8,"marketcap":2.2557198189E11,"price":
> > > > > 24.91,"date":"10/06/2008"},{"volume":5.779424E7,"marketcap":
> > > > > 2.5620869043E11,"price":27.51,"date":"06/30/2008"},{"volume":
> > > > > 6.958495E7,"marketcap":2.7260008611E11,"price":
> > > > > 29.27,"date":"05/08/2008"},{"volume":4.786377E7,"marketcap":
> > > > > 2.714846066E11,"price":29.17,"date":"03/24/2008"},{"volume":
> > > > > 4.964211E7,"marketcap":2.5482647763E11,"price":
> > > > > 27.91,"date":"08/14/2008"},{"volume":7.089988E7,"marketcap":
> > > > > 2.7734986554E11,"price":29.78,"date":"05/13/2008"},{"volume":
> > > > > 9.352937E7,"marketcap":2.766048021E11,"price":
> > > > > 29.7,"date":"05/06/2008"},{"volume":5.979924E7,"marketcap":
> > > > > 2.3536372E11,"price":25.72,"date":"07/31/2008"},{"volume":
> > > > > 8.094768E7,"marketcap":1.7675503551E11,"price":
> > > > > 19.87,"date":"12/03/2008"},{"volume":7.561489E7,"marketcap":
> > > > > 2.6785030668E11,"price":28.76,"date":"05/20/2008"},{"volume":
> > > > > 5.673429E7,"marketcap":2.3702330685E11,"price":
> > > > > 25.45,"date":"07/10/2008"},{"volume":5.203139E7,"marketcap":
> > > > > 2.6244859674E11,"price":28.18,"date":"05/28/2008"},{"volume":
> > > > > 5.219324E7,"marketcap":2.6514945171E11,"price":
> > > > > 28.47,"date":"05/22/2008"},{"volume":6.571854E7,"marketcap":
> > > > > 2.74554979302E11,"price":29.4999,"date":"04/01/2008"},{"volume":
> > > > > 6.825204E7,"marketcap":2.621776266E11,"price":
> > > > > 28.17,"date":"02/19/2008"},{"volume":5.71451E7,"marketcap":
> > > > > 2.6049280521E11,"price":27.97,"date":"06/23/2008"},{"volume":
> > > > > 1.089315E8,"marketcap":1.7453114226E11,"price":
> > > > > 19.62,"date":"11/18/2008"},{"volume":8.153331E7,"marketcap":
> > > > > 2.7930565707E11,"price":29.99,"date":"05/16/2008"},{"volume":
> > > > > 9.001423E7,"marketcap":1.805801319E11,"price":
> > > > > 20.3,"date":"11/12/2008"},{"volume":4.379627E7,"marketcap":
> > > > > 2.713915368E11,"price":29.16,"date":"04/04/2008"},{"volume":
> > > > > 5.712692E7,"marketcap":2.456048817E11,"price":
> > > > > 26.9,"date":"09/03/2008"},{"volume":9.727489E7,"marketcap":
> > > > > 1.7186247036E11,"price":19.32,"date":"11/17/2008"},{"volume":
> > > > > 8.332239E7,"marketcap":2.738113516E11,"price":
> > > > > 29.42,"date":"03/18/2008"},{"volume":3.804101E7,"marketcap":
> > > > > 2.5281781317E11,"price":27.69,"date":"08/18/2008"},{"volume":
> > > > > 6.192222E7,"marketcap":2.0121786126E11,"price":
> > > > > 22.62,"date":"11/03/2008"},{"volume":5.961479E7,"marketcap":
> > > > > 2.7436961178E11,"price":29.46,"date":"05/19/2008"},{"volume":
> > > > >
> 8.090675E7,"marketcap":2.3280144E11,"price":25.44,"date":"07/24/2008"},
> > > > > {"volume":8.877035E7,"marketcap":2.7204128853E11,"price":
> > > > > 29.21,"date":"05/07/2008"},{"volume":7.753418E7,"marketcap":
> > > > > 2.593855326E11,"price":27.87,"date":"03/07/2008"},{"volume":
> > > > > 1.541066E8,"marketcap":2.0211829128E11,"price":
> > > > > 22.32,"date":"10/23/2008"},{"volume":4.967654E7,"marketcap":
> > > > > 2.6505631878E11,"price":28.46,"date":"06/18/2008"},{"volume":
> >
> > ...
> >
> > read more »
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en
-~----------~----~----~----~------~----~------~--~---
