Re: adding chart editor to chart

[asgallant]

First, you should be aware that the ChartEditor's don't work all that great, they're missing a lot of the features of the current charts, they discard all of the options you had previously set for a chart, and they don't handle charts with continuous axes very well (they convert them to strings, which defeats the purpose).  If none of this bothers you, then the key to integrating them with Dashboards is to bind the wrapper returned by the editor's #getChartWrapper method to your controls in the dashboard and redraw the dashboard.

On Thursday, October 18, 2012 3:49:43 PM UTC-4, Tribblehunter wrote:

Hi.

Newbie to google visualization so please bear with me.

I am trying to add chart editor to a chart with dashboard but am unable to understand how to.

I am looking for some pointers and a nudge in the right direction as i do not want someone to do the hard work (i find learning by doing works the best for me!).

Any advice or direction greatly appreciated.

[Tribblehunter]

Thank you for your prompt advice.

This is for a simple chart to analyse data from a csv file (recorded data from engine tests). Just experimenting with things at present. 

But looking into it deeper it might be I create something simpler for the user. All i really need to do is assign the right axis for engine revs. 

Learning as i go along. Will look up binding and see what else I learn.

Thanks again.

[Tribblehunter]

it seems I am unable to use the editor with a dashboard. 

Can anyone confirm this?

[asgallant]

You can use them together, see an example here: http://jsfiddle.net/asgallant/ZmVcZ/

BTW, it seems I was wrong earlier about the chartEditor converting continuous axis types to strings - they don't convert to strings, but there is definitely some funky behavior going on there.  I'm still working on figuring out what is actually happening.

[asgallant]

Solved the problem with the weird axis.  Turns out the chartEditor sets the viewWindowMode of the hAxis to 'pretty', which screws up continuous axes.  See fix: http://jsfiddle.net/asgallant/ZmVcZ/1/

[Tribblehunter]

Thank you  a thousand times. You have given me a real boost by explaining that. 

Would have taken me ages to figure it out and would have probably given up and re-designed.

Now have to figure out how to get file selected from local (csv) into chart. 

Am guessing i need to use options on editor.opendialog(chart,dataSourceInput_??) to enable user to select file. am going to search for other threads on this. 

[asgallant]

Do you want to read a file that is local to the server or local to the client?  The former is easy, the latter requires that the client have an HTML5 capable browser (there's a tutorial on how to enable it here).

[Tribblehunter]

Thanks again asgallant. 

I am taking a file into the browser (local file) via either drag andd drop or file select <input type="file/>. it is in csv format. i am then planning to use jquery-csv to parse it and turn it into a 2d array. then update data to chart. Similar to this demo using flot graphs. http://jquery-csv.googlecode.com/git/examples/flot.html.

Just working out the kinks- got the data to appear on screen in html table............ but failing on the csv parse. but will persevere... tomorrow. lol

[asgallant]

Good luck with that.

[Tribblehunter]

lol. sounds like i will need it!

gave up on jquery but have got the data into an array (shown by alert on screen)

but chart throws up 'table has no columns'.

using arrayToDataTable(thearray).

and now its midnight here so i think i had better quit. 

Thanks again for all the advice. I am a marine engineer by day so if you ever need advice in that direction mail  me.

[Tribblehunter]

So far so good. 

Now sends data to google charts, but throws back 'not an array'.

going to ask on stackoverflow. 

[asgallant]

Post your code here, I'll take a look.

[Tribblehunter]

many thanks asgallant. it is appreciated. 

http://jsfiddle.net/edT7T/ .

this throws up some other data into the table which chrome doesn't. now i am wondering if that is why and that data is not showing up in chrome. 

no rush though as its really a side project with no time limits.

[asgallant]

The problem with the extra stuff is that you set the fiddle to load Mootools (upper left box), which also uses the $ variable.  Change that to jQuery and the extra stuff goes away.  The chart doesn't draw because the variable "data" is created and populated inside the "printTable" function, which means it isn't in scope for use in the drawChart function.  You have to declare the variable in the same scope as the functions in order to have the functions be able to access it.

[Tribblehunter]

Thank you again for your guidance asgallant. 

My misunderstanding of variables. Now i understand better. 

Have tried to implement it but am having a problem with getting the return value. But I do not want to bother you any more with it as i feel i have taken up enough of your time. 

I will persevere and am sure i can solve it. And through the struggle will gain more understanding.

[asgallant]

Don't feel bad about asking questions here!  You're not wasting my time; I actually *like* helping others learn.  So please, ask away.

If you update your jsfiddle with the newest version of your code, I can help you along with this more easily.  Also, putting the javascript in the javascript window instead of in the HTML gives you syntax highlighting, which can help when coding and debugging.

[Tribblehunter]

ok. will do. 

have found out problem though. Parser is changing file and google does not accept it. compared to 'code built' file in chart and looks same in console but google not accepting it. 

looks like its going to be build my own parser time. lol.

[Tribblehunter]

http://jsfiddle.net/edT7T/5/

updated and shows error with parser in console. 

am working on my own one now as this will only use certain files for importing. but some of them are in some strange format!!

more things to learn. lol

[asgallant]

You are passing the chartData function to the drawChart function instead of passing the data.  If you change the "console.log(parsed);" line to "drawChart(parsed);" and delete the other drawChart line, then it works with no errors.  I put that fix in and made another minor change (from using the document.ready event to using the google.setOnLoadCallback function) and cleaned up the console.log's, with the result here: http://jsfiddle.net/asgallant/edT7T/7/

[Tribblehunter]

Thank you very much. I can see where I went wrong. Am still getting to grips with javascript and programming in general. 

Am at the start of a concept project creating tools for marine industry and looking at html5 web/phone app development to enable multi platform development.

First app in use on google play https://play.google.com/store/apps/details?id=appinventor.ai_test.MEICA_freetrial built with app inventor, and other ideas in build. 

Thank you agian for all your help.

[asgallant]

You're welcome, and good luck with your app development.