Thanks alooooooooot dear, it is working fine now. Thanks - arsh
On Feb 20, 6:12 pm, VizBoy <[email protected]> wrote: > 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 > > ... > > 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 -~----------~----~----~----~------~----~------~--~---
