Create Line Chart On The Fly

39 views
Skip to first unread message

cjm287

unread,
Jan 21, 2014, 2:28:26 PM1/21/14
to google-visua...@googlegroups.com
Have been searching for a long time no try to find a clickable chart that does what I want. 

I really need to do two things.

1. I need a chart that will allow me to graph a reverse y-axis. Seems like this is possible with Google line charts.

2. The biggest thing though, that I haven't been able to find, is the ability to create a line chart on the fly. I basically want a blank chart to load on my page based on a template that I'll make with given x and y axis values. Then as I click different data points along the chart a line is created.

Of course, I'd like to load past charts, and then be able to edit them in the same way. 

I currently use PHP and MySQL for a content management system. So upon submission of the form I would then send the data to a database. 

Can anyone find anything that may possibly put me in right direction with Google line charts?

Thanks.

asgallant

unread,
Jan 21, 2014, 6:16:43 PM1/21/14
to google-visua...@googlegroups.com
You can certainly graph a reverse Y-axis, and you can use AJAX to push data back to your server (the Visualization API won't do this for you, but it is easy enough to write AJAX functions using other libraries [jQuery, MooTools, etc]).

Adding points to a chart based on the user clicking is a bit trickier, but also doable.  One of the dev team put together a demonstration for this a few months back: http://jsfiddle.net/8Fsf4/

cjm287 .

unread,
Jan 21, 2014, 7:02:34 PM1/21/14
to google-visua...@googlegroups.com
This is great.  

Is there a way, do you think, to limit the line to be made:  can only click on x and y axis intersections? And only click from left to right, for instance?

Thanks so much.


--
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/XA8rssJ3Wwg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

asgallant

unread,
Jan 22, 2014, 4:07:56 PM1/22/14
to google-visua...@googlegroups.com
You can round off the points to whatever precision you want, and you can test the clicked point against the last row in the DataTable to see if it is to the right of the last point.  Here's a modified version of the fiddle that rounds values to 0.5 and only allows points to be added on the right: http://jsfiddle.net/asgallant/8Fsf4/3/


On Tuesday, January 21, 2014 7:02:34 PM UTC-5, cjm287 wrote:
This is great.  

Is there a way, do you think, to limit the line to be made:  can only click on x and y axis intersections? And only click from left to right, for instance?

Thanks so much.
On Tue, Jan 21, 2014 at 6:16 PM, asgallant <drew_g...@abtassoc.com> wrote:
You can certainly graph a reverse Y-axis, and you can use AJAX to push data back to your server (the Visualization API won't do this for you, but it is easy enough to write AJAX functions using other libraries [jQuery, MooTools, etc]).

Adding points to a chart based on the user clicking is a bit trickier, but also doable.  One of the dev team put together a demonstration for this a few months back: http://jsfiddle.net/8Fsf4/


On Tuesday, January 21, 2014 2:28:26 PM UTC-5, cjm287 wrote:
Have been searching for a long time no try to find a clickable chart that does what I want. 

I really need to do two things.

1. I need a chart that will allow me to graph a reverse y-axis. Seems like this is possible with Google line charts.

2. The biggest thing though, that I haven't been able to find, is the ability to create a line chart on the fly. I basically want a blank chart to load on my page based on a template that I'll make with given x and y axis values. Then as I click different data points along the chart a line is created.

Of course, I'd like to load past charts, and then be able to edit them in the same way. 

I currently use PHP and MySQL for a content management system. So upon submission of the form I would then send the data to a database. 

Can anyone find anything that may possibly put me in right direction with Google line charts?

Thanks.

--
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/XA8rssJ3Wwg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

cjm287 .

unread,
Jan 22, 2014, 8:32:10 PM1/22/14
to google-visua...@googlegroups.com
Ah, yes.  Thanks.

I appreciate this.

I made the chart a little more towards what I was looking for.  I reversed the y axis, formatted it, and rounded the numbers when clicked the way I need them.

1. Is there a way to make the data point be an 'X' or an 'O' instead of the given dot for the symbol?
I am searching the documentation, but am guessing not.

2. Is there a way to change the bottom hAxis labels be: 250, 500, 750, 1000, 1500, 2000, 3000, 4000, 6000, 8000

I'm assuming these are "discrete" column names?  

Here's what I have so far:







To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

asgallant

unread,
Jan 23, 2014, 10:56:02 AM1/23/14
to google-visua...@googlegroups.com
The hAxis labels are just numbers.  You are going to have odd label spacing if you use those values, but it will work, just specify the hAxis.ticks option:

hAxis: {
    ticks: [250, 500, 750, 1000, 1500, 2000, 3000, 4000, 6000, 8000],
    viewWindow: {
        max: 8000,
        min: 250
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

cjm287 .

unread,
Jan 24, 2014, 7:44:14 AM1/24/14
to google-visua...@googlegroups.com
asgallant  - Just wanted to thank you for doing that for me.  I appreciate it.  I see what you mean about the spacing.  Wouldn't be too bad though for my purposes.

I have to look more and more into the chart's capability.  

Not sure if it's ok of me to ask, but how equipped are you to work with these charts?  Seems like you know your stuff.  On a scale of 1-10 of programming capabilities, I'd say I'm a 5.  No formal training.  

Any interest in doing a project for me?  I'd be happy to compensate you.  If so, I can PM you to discuss the details.   Or would you know of someone who might be interested?

Either way, thanks again!


To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

asgallant

unread,
Jan 24, 2014, 10:52:45 AM1/24/14
to google-visua...@googlegroups.com
I am open to freelance work, though I would prefer to handle arrangements through guru.com (http://www.guru.com/freelancers/asgallant) rather than via email.
Reply all
Reply to author
Forward
0 new messages