How to set/reset chart data

[Tong Sun]

Hi, 

Please take a look at the following jsfiddle:

http://jsfiddle.net/12r0ztoa/1/

http://jsfiddle.net/849tL2k8/1/

The only difference between the two is whether "var data" was initially empty or not. Yet, one is working while the other one isn't. Why is that? 

How to set/reset chart data using another data array?

Thanks

[Sergey Grabkovsky]

Hi Tong,

The reason for this is because arrayToDataTable attempts to infer the types of your data. So when you attempt to use it with just the header row, it infers the types of all the columns to be string (the default type). You can fix your first example by creating the DataTable via the DataTable constructor and using addColumn to add all the columns and specify their types. It's generally not advised to mix usage of arrayToDataTable and addRows.

You can "set/reset chart data" simply by calling chart.draw with a different DataTable and/or options, or even the same DataTable with modified data.

--
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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Tong Sun]

Thanks a lot for your ardent help, Sergey.

Now, somebody please see how best to handle the following situation. 

I need to do something like this:

http://jsfiddle.net/dlaliberte/4w0bxLx0/

I.e., change data when the pulldown select option changes. But instead of pulling data from external source each time, I'm going to pre-define all my data in the html page, like this:

        var data0 = [

          ['G1 - Ursa Major II Dwarf', 30000, 14.3, 30000, 14.3],

          ['G2 - Lg. Magellanic Cloud', 50000, 0.9, 50000, 0.9],

          ['G2 - Bootes I', 60000, 13.1, 60000, 13.1],

          ['G2 - Canis Major Dwarf', 8000, 23.3, 8000, 23.3],

          ['G3 - Sagittarius Dwarf', 24000, 4.5, 24000, 4.5]

        ];

Then use the pulldown select with options of "G1", "G2", and "G3". When it changed I'm going to use data0.filter() to pick the correct group, be it  "G1", "G2", or "G3", then chart them.

However, as I just learned, my above plan does not play well with how DataTable works. The  main problem is getting the data0.filter() result into DataTable, as I do need each value having its own tooltip. 

Is there any way to make my above plan still work? 

I've even tried to pre-define a header of 

       [

          ['Galaxy', 'V1', {label: 'T1', role: 'tooltip'}, 'V2', {label: 'T2', role: 'tooltip'}]

        ]

then call 

        var data = new google.visualization.arrayToDataTable(

          header1.concat(data0));

But that doesn't work either. 

Please help.

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

[Sergey Grabkovsky]

The first thing that you should do is pull out the 'G' values into their own column so that they're searchable and filterable. If you require that they show up as "G# - <name>", I would do it as a calculated column after you've generated your data. Here's a pretty simple example of what I think you're looking for: http://jsfiddle.net/12r0ztoa/5/

[Tong Sun]

On Fri, Feb 6, 2015 at 9:57 AM, 'Sergey Grabkovsky' via Google Visualization API <google-visua...@googlegroups.com> wrote:

The first thing that you should do is pull out the 'G' values into their own column so that they're searchable and filterable.

Sure, that's much much better. I use  "G# - <name>" because I never see a Google Charts example that have a spare column, yet I need to have that info in. 

 

Here's a pretty simple example of what I think you're looking for: http://jsfiddle.net/12r0ztoa/5/

Yes, YES! that is nice wonderful masterpiece that I can never come up with on my own. Thanks a million. I own you Sergey!

[Tong Sun]

On Fri, Feb 6, 2015 at 10:07 AM, Tong Sun <sunto...@gmail.com> wrote:

Here's a pretty simple example of what I think you're looking for: http://jsfiddle.net/12r0ztoa/5/

Yes, YES! that is nice wonderful masterpiece that I can never come up with on my own. Thanks a million. I own you Sergey!

Alright, I can't resist the obligation to formally document this masterpiece, so I put my journey of learning Google Charts online at https://github.com/suntong001/lang/tree/master/lang/GoogleCharts. It's a step by step demo from group zero of Google Charts features that I need and was in searching for. For this one specifically, it is at

https://github.com/suntong001/lang/blob/master/lang/GoogleCharts/01cc/02cc12-Filtered.htm

      - each value having its own tooltip

      - change data/chart when the pulldown select option changes

      - pre-define data in the html page instead of pulling from external source each time

The live demo is at, 

http://htmlpreview.github.io/?https://github.com/suntong001/lang/blob/master/lang/GoogleCharts/01cc/02cc12-Filtered.htm

Thanks again Sergey!

[Sergey Grabkovsky]

You're very welcome, Tong! Thank you for choosing to use Google Charts =)

[Tong Sun]

Hi, 

I have a challenging issue to overcome -- how to properly size up a dynamic bar chart? I.e. to adjust its height automatically when the number of rows changes dramatically. 

Here is my problem, 

My bar chart have nearly hundred of rows, and I'm using Sergey's following trick to pick sections when I want. So the final chart may have 10 or 100 rows, depending on the situation, which doesn't work well under a fixed chart height. 

I saw controls for height of the chart, or chartArea, but what I really need is the height of each bar for the bar chart. I.e., regardless whether my bar chart has 10 or 100 rows, each bar in the chart will show same width. The total height of the chart will grow or shrink accordingly. How can it be done? 

PS. I tried to use `<div id="chart_div"></div>` so as to allow google bar chart to figure out the height automatically, but the graph looks really tiny -- https://jsfiddle.net/6g25g4b1/

Please help. 

Thanks

On Friday, February 6, 2015 at 10:07:50 AM UTC-5, Tong Sun wrote:

[Daniel LaLiberte]

Tong,

The height of each bar will be approximately the height of the chartArea divided by the number of bars, where the chartArea is the area that the bars are actually drawn within, inside the axis bounds.  You can set the chartArea.height, but keep in mind that the overall chart height is equal to the sum of the chartArea.height, the chartArea.top and the bottom area.   You can't currently set the bottom area (under the chartArea), because it just gets the leftover space.

--
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 http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/234d366c-e288-4b7a-989d-cc687b2a8887%40googlegroups.com.

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

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Tong Sun]

Thank you Daniel for the answer. 

Yes, I figured that's how things calculated as well, but is there any practical way to change the chartArea.height, when I'm flipping the number of bars from my bar chart between 10 and 100 using the javascript listed in http://jsfiddle.net/12r0ztoa/5/? 

I'm guessing, to use `<div id="chart_div"></div>` (without the height style), then somehow magically change the chartArea.height on the fly when changing the filter, but I'm actually without a clue how to do it as I am not a javascript developer. 

If it is even slightly possible, I can convert http://jsfiddle.net/12r0ztoa/5/ into a bar chart, just to give people an easy start for showing me how to do. 

Thanks

On Mon, Sep 7, 2015 at 3:00 PM, 'Daniel LaLiberte' via Google Visualization API <google-visua...@googlegroups.com> wrote:

Tong,

The height of each bar will be approximately the height of the chartArea divided by the number of bars, where the chartArea is the area that the bars are actually drawn within, inside the axis bounds.  You can set the chartArea.height, but keep in mind that the overall chart height is equal to the sum of the chartArea.height, the chartArea.top and the bottom area.   You can't currently set the bottom area (under the chartArea), because it just gets the leftover space.

--
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/qVIsp_uhNNY/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.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMwvg1YNFifh-F6tML2g3QsoAnr%3D6avqVpxq7F5PJyj7w%40mail.gmail.com.

[Tong Sun]

I did try to use `<div id="chart_div"></div>` (without the height style), then tried to change the height from within the options, in https://jsfiddle.net/km7tq1f4/, but none of the commented height settings has any effect that I want, some are even make the graph un-render-able, what have I done wrong?