Annotation Charts

111 views
Skip to first unread message

Shamoun Ilyas

unread,
Apr 14, 2016, 3:51:17 AM4/14/16
to Google Visualization API
I am trying to figure out if it is possible to make a stock price (chart type: line) & volume (chart type: column to area)- with the chart range filter at the bottom. Not been able to figure it as yet. Is it even possible? Any help would be appreciated. Thanks.

Daniel LaLiberte

unread,
Apr 14, 2016, 3:45:00 PM4/14/16
to Google Visualization API
The main chart in the AnnotationChart is actually just a ComboChart.  You can give it options under a 'chart' option.  You can target a different vertical axis for the volume chart, and arrange that it shows up mostly in the bottom area.  But you can't add a whole separate chart within the AnnotationChart, though that would be a good idea.

On Thu, Apr 14, 2016 at 3:51 AM, Shamoun Ilyas <sha...@gmail.com> wrote:
I am trying to figure out if it is possible to make a stock price (chart type: line) & volume (chart type: column to area)- with the chart range filter at the bottom. Not been able to figure it as yet. Is it even possible? Any help would be appreciated. Thanks.

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/8e1467a3-889b-4f62-aae2-19ea94cc5255%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Shamoun Ilyas

unread,
Apr 15, 2016, 12:58:07 AM4/15/16
to Google Visualization API
Thank you Daniel for you reply. Thanks i will try the volume chart on a different vertical axis. Ideally, I was looking for a whole separate chart within the AnnotationChart- something like the 'bind' feature you have in ChartWrapper. Thanks once again.


On Friday, 15 April 2016 00:45:00 UTC+5, Daniel LaLiberte wrote:
The main chart in the AnnotationChart is actually just a ComboChart.  You can give it options under a 'chart' option.  You can target a different vertical axis for the volume chart, and arrange that it shows up mostly in the bottom area.  But you can't add a whole separate chart within the AnnotationChart, though that would be a good idea.
On Thu, Apr 14, 2016 at 3:51 AM, Shamoun Ilyas <sha...@gmail.com> wrote:
I am trying to figure out if it is possible to make a stock price (chart type: line) & volume (chart type: column to area)- with the chart range filter at the bottom. Not been able to figure it as yet. Is it even possible? Any help would be appreciated. Thanks.

--
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 google-visualization-api+unsub...@googlegroups.com.



--

Shamoun Ilyas

unread,
Apr 15, 2016, 1:20:12 AM4/15/16
to Google Visualization API
Also, if you could advise- it is possible to remove the 1h & 1d zoom buttons from the chart and leave the remaining? Thanks

Daniel LaLiberte

unread,
Apr 15, 2016, 6:54:42 AM4/15/16
to Google Visualization API
Hi Shamoun,

As a matter of fact, the Dashboard 'bind' feature is used internally in AnnotationChart.  It was actually implemented as a Dashboard first, and then wrapped with a chart API.  And we have been thinking about how to do that kind of wrapping more easily using a ChartWrapper.

There are a couple of undocumented options regarding the zoom buttons, if you want to customize them:  https://groups.google.com/d/msg/google-visualization-api/pzZoRUn5oLA/RQs6RSeJXr4J

Enjoy.

On Fri, Apr 15, 2016 at 1:20 AM, Shamoun Ilyas <sha...@gmail.com> wrote:
Also, if you could advise- it is possible to remove the 1h & 1d zoom buttons from the chart and leave the remaining? Thanks


On Friday, 15 April 2016 09:58:07 UTC+5, Shamoun Ilyas wrote:
Thank you Daniel for you reply. Thanks i will try the volume chart on a different vertical axis. Ideally, I was looking for a whole separate chart within the AnnotationChart- something like the 'bind' feature you have in ChartWrapper. Thanks once again.

On Friday, 15 April 2016 00:45:00 UTC+5, Daniel LaLiberte wrote:
The main chart in the AnnotationChart is actually just a ComboChart.  You can give it options under a 'chart' option.  You can target a different vertical axis for the volume chart, and arrange that it shows up mostly in the bottom area.  But you can't add a whole separate chart within the AnnotationChart, though that would be a good idea.
On Thu, Apr 14, 2016 at 3:51 AM, Shamoun Ilyas <sha...@gmail.com> wrote:
I am trying to figure out if it is possible to make a stock price (chart type: line) & volume (chart type: column to area)- with the chart range filter at the bottom. Not been able to figure it as yet. Is it even possible? Any help would be appreciated. Thanks.

--
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 google-visualizati...@googlegroups.com.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

For more options, visit https://groups.google.com/d/optout.



--

Shamoun Ilyas

unread,
Apr 20, 2016, 9:10:27 AM4/20/16
to Google Visualization API
Daniel,

I wasnt able to access the undocument options re; Zoom Buttons that you suggest. Can you help me out there with the code.

Also, I am trying to implement something similar to this thread

but that was done with the Annotated Timeline Chart. I was not able to replicate the desired effect with the AnnotationChart. Is it possible to do through an event handler like they have done?

Thanks again for your help.


On Friday, 15 April 2016 15:54:42 UTC+5, Daniel LaLiberte wrote:
Hi Shamoun,

As a matter of fact, the Dashboard 'bind' feature is used internally in AnnotationChart.  It was actually implemented as a Dashboard first, and then wrapped with a chart API.  And we have been thinking about how to do that kind of wrapping more easily using a ChartWrapper.

There are a couple of undocumented options regarding the zoom buttons, if you want to customize them:  https://groups.google.com/d/msg/google-visualization-api/pzZoRUn5oLA/RQs6RSeJXr4J

Enjoy.
On Fri, Apr 15, 2016 at 1:20 AM, Shamoun Ilyas <sha...@gmail.com> wrote:
Also, if you could advise- it is possible to remove the 1h & 1d zoom buttons from the chart and leave the remaining? Thanks


On Friday, 15 April 2016 09:58:07 UTC+5, Shamoun Ilyas wrote:
Thank you Daniel for you reply. Thanks i will try the volume chart on a different vertical axis. Ideally, I was looking for a whole separate chart within the AnnotationChart- something like the 'bind' feature you have in ChartWrapper. Thanks once again.

On Friday, 15 April 2016 00:45:00 UTC+5, Daniel LaLiberte wrote:
The main chart in the AnnotationChart is actually just a ComboChart.  You can give it options under a 'chart' option.  You can target a different vertical axis for the volume chart, and arrange that it shows up mostly in the bottom area.  But you can't add a whole separate chart within the AnnotationChart, though that would be a good idea.
On Thu, Apr 14, 2016 at 3:51 AM, Shamoun Ilyas <sha...@gmail.com> wrote:
I am trying to figure out if it is possible to make a stock price (chart type: line) & volume (chart type: column to area)- with the chart range filter at the bottom. Not been able to figure it as yet. Is it even possible? Any help would be appreciated. Thanks.

--
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 google-visualization-api+unsub...@googlegroups.com.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
Apr 20, 2016, 9:37:08 AM4/20/16
to Google Visualization API
Hi Shamoun,

Can you give us a link to your page so we can see what is going on?

The other thread you linked to discusses several things.  Which thing are you interested in?  The AnnotationChart should be a drop-in replacement for the AnnotatedTimeline, however, so try it.


On Wed, Apr 20, 2016 at 9:10 AM, Shamoun Ilyas <sha...@gmail.com> wrote:
Daniel,

I wasnt able to access the undocument options re; Zoom Buttons that you suggest. Can you help me out there with the code.

Also, I am trying to implement something similar to this thread

but that was done with the Annotated Timeline Chart. I was not able to replicate the desired effect with the AnnotationChart. Is it possible to do through an event handler like they have done?

Thanks again for your help.

On Friday, 15 April 2016 15:54:42 UTC+5, Daniel LaLiberte wrote:
Hi Shamoun,

As a matter of fact, the Dashboard 'bind' feature is used internally in AnnotationChart.  It was actually implemented as a Dashboard first, and then wrapped with a chart API.  And we have been thinking about how to do that kind of wrapping more easily using a ChartWrapper.

There are a couple of undocumented options regarding the zoom buttons, if you want to customize them:  https://groups.google.com/d/msg/google-visualization-api/pzZoRUn5oLA/RQs6RSeJXr4J

Enjoy.
On Fri, Apr 15, 2016 at 1:20 AM, Shamoun Ilyas <sha...@gmail.com> wrote:
Also, if you could advise- it is possible to remove the 1h & 1d zoom buttons from the chart and leave the remaining? Thanks


On Friday, 15 April 2016 09:58:07 UTC+5, Shamoun Ilyas wrote:
Thank you Daniel for you reply. Thanks i will try the volume chart on a different vertical axis. Ideally, I was looking for a whole separate chart within the AnnotationChart- something like the 'bind' feature you have in ChartWrapper. Thanks once again.

On Friday, 15 April 2016 00:45:00 UTC+5, Daniel LaLiberte wrote:
The main chart in the AnnotationChart is actually just a ComboChart.  You can give it options under a 'chart' option.  You can target a different vertical axis for the volume chart, and arrange that it shows up mostly in the bottom area.  But you can't add a whole separate chart within the AnnotationChart, though that would be a good idea.
On Thu, Apr 14, 2016 at 3:51 AM, Shamoun Ilyas <sha...@gmail.com> wrote:
I am trying to figure out if it is possible to make a stock price (chart type: line) & volume (chart type: column to area)- with the chart range filter at the bottom. Not been able to figure it as yet. Is it even possible? Any help would be appreciated. Thanks.

--
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 google-visualizati...@googlegroups.com.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/518a4381-ca45-49a3-99a9-de2182dcadef%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Shamoun Ilyas

unread,
Apr 20, 2016, 10:18:14 AM4/20/16
to Google Visualization API
here you go


1. Need to get rid of the 1h, 1d & 5d buttons
2. I want the values to be a % of the first y-axis value of the graph. So when we access the 'rangechanger', the first value should dynamically change to 1.

Thanks for your help
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
Apr 20, 2016, 10:27:19 AM4/20/16
to Google Visualization API
Here is your code working: https://jsfiddle.net/dlaliberte/4gdzcLLm/1/
You have to change the jsfiddle hidden feature under the javascript configuration button so that it doesn't run onload.
Your requested features are probably doable, and I'll update in an hour.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/dadfd891-4570-4785-8c04-7fd75d9e9470%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Daniel LaLiberte

unread,
Apr 20, 2016, 11:58:57 AM4/20/16
to Google Visualization API
Here is the change of the zoom buttons:  https://jsfiddle.net/dlaliberte/4gdzcLLm/2/

To get the scaling you want relative to the first y-axis value, you would have to recompute the data yourself.  But then that would not work correctly with the range selector, which assumes the data is static.  

Others have requested a similar feature, where multiple series are all rescaled to be relative to the first value, so you can see the changes relative to that common starting point. It would be a useful feature to support, but it is not possible today, not without changing the data yourself.

Shamoun Ilyas

unread,
Apr 20, 2016, 12:55:53 PM4/20/16
to Google Visualization API
thank you daniel for the solution re: the zoom buttons.

Yes, i have read on the group that others have requested similar feature before. I saw this old thread, where an event handler was used to get the desired result in Annotation Timeline chart. Thought maybe a similar work around could be done in the AnnotationChart

Recomputing the data would only work correctly if somehow i could query back my MySQL database based on my range selector. I don't if a date parameter can be passed from range selector to the database?

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
Apr 20, 2016, 1:54:49 PM4/20/16
to Google Visualization API
It would be better, faster anyway, if you could do the recomputation in the browser, probably by generating a DataView.  For each changerange event, generate the new data and call draw() on the chart again.  If this ends up being slow, I have some ideas on how to speed it up.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
--



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/886a552b-4e8a-442f-a6f1-271eec3b390a%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Shamoun Ilyas

unread,
Apr 21, 2016, 12:37:02 AM4/21/16
to Google Visualization API
That is what i am trying to do with little luck. Going back to the database is inefficient.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
--



--

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--
Message has been deleted

Shamoun Ilyas

unread,
Apr 21, 2016, 3:01:52 PM4/21/16
to Google Visualization API
i tried using the following bit of code, to achieve the desired results

function rangechange_handler(e) {
//find start & end date
var start = e.start;
var end = e.end;
document.getElementById("s1").innerHTML = start;
// price of stock 1 on start date
var b1 = data.getValue(data.getFilteredRows([{column: 0, minValue: start}])[0], 1);
// price of stock 2 on start date
var b2 = data.getValue(data.getFilteredRows([{ column: 0, minValue: start}])[0], 2);
// create a view
var view = new google.visualization.DataView(data);
// Set column values
view.setColumns([0, {
type: 'number',
label: '<?php echo $SymbolID; ?>',
calc: function(dataTable, rownum) {
return Math.round(dataTable.getValue(rownum,1)*100/b1)/100;
}},
{
type: 'number',
label: '<?php echo $SymbolID1; ?>',
calc: function(dataTable, rownum) {
return Math.round(dataTable.getValue(rownum,2)*100/b2)/100;
}}]);
var ready = google.visualization.events.addListener(chart, 'ready', function () {
            chart.setVisibleChartRange(start, end);
            google.visualization.events.removeListener(ready);
});
chart.draw(view, options);

}

this i 'think' is working.. but is causing the page to freeze. I suspect because of the re-calculation under setColumn. I get the following error:

"maximum call stack size exceeded"

any thoughts?

Daniel LaLiberte

unread,
Apr 22, 2016, 10:00:35 AM4/22/16
to Google Visualization API
There may be some timing issues, so in your event handler, perhaps you should do the chart.draw() call in a timeout.   

But I would not be surprised if drawing also triggers rangechange, which would result in an infinite loop if your rangechange handler always calls draw.  Perhaps this event should be surpressed on draw() because it is not particularly useful.  As a workaround, you'll have to use a flag to tell whether the handler is being called the first time (in which case, don't draw()), or subsequent times.

I see that your 'ready' event handler is removing the handler, which is good, otherwise you will be adding a new handler each time.  You might want to use addOneTimeListener to do that for you.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
--



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/431297bf-fa57-4fc1-8f48-5deb58609735%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--
Reply all
Reply to author
Forward
0 new messages