I am unable to set the vAxes titles

[Steve Morris]

My UI has to show about 20 different charts and the front-end has to dynamically set the graph options according to the user's requests. The problem is that I do not get the vAxes titles.

I initially set "default" options:

var graphOptions = {

title: 'Performance',

seriesType: 'bars',

series: { vAxes: {0: {title:'t1'}, 1: {title:'t2'}} },

height:600,

width:1200,

chartArea: {top:50},

isStacked: false,

hAxis: { title:'', titleTextStyle: { bold: true, italic: false, }, slantedText: true, },

vAxis: { title:'', textPosition:"out", titleTextStyle: { bold: true, italic: false, }, viewWindow: { min: 0, }, },

};

And when the user chooses the options, I decide on the titles and type of each graph.

function graphIt(){

:

// dynamically set graphOptions according to the user requests

graphOptions.vAxis.title="Duration (Hours:Minutes)";

graphOptions.title="Duration of all Plans";

graphOptions.series.vAxes=[{title:'Could be anything'}, {title:'Number of Jobs'}];

graphOptions.series={3: {type: 'steppedArea', areaOpacity:0.05, targetAxisIndex:1}, 4: {type: 'steppedArea', areaOpacity:0.05, targetAxisIndex:1}};

graphOptions.hAxis.title="Plans (completed/aborted)";

graphOptions.title+=" over "+timeScale;

:

// dynamically get graphData according to the user requests

mainService.getGraphData(graphCallback, ......);

}

function graphCallback(data) {

var chart = new google.visualization.ComboChart(document.getElementById('chartDiv'));

graphData = new google.visualization.DataTable(data);

chart.draw(graphData, graphOptions);

:

}

As you can see, I get the graphOptions.vAxis.title on both the left and the right instead of the graphOptions.series.vAxes titles.

An additional problem is that, after refreshing the page, the legend is occasionally scrunched up and the hAxis title overwrites the hAxis text.

[Daniel LaLiberte]

Hi Steve,

We don't support any series.vAxes options.  I'm not sure why you thought there were such options, but perhaps you were thinking of the vAxes options, which work the same as how you used your series.vAxes but without the 'series' prefix.  E.g. 

graphOptions = {

  vAxes: { 0: { title: "vertical axis 0 title" } }

}

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Steve Morris]

Hi Daniel,

I thought it is that way because that is how it appears to be used in the example in the vAxes section on https://developers.google.com/chart/interactive/docs/gallery/combochart.

I did wonder why vAxes is under series :-{

Thanks

--

Daniel LaLiberte

dlali...@Google.com   5CC, Cambridge MA

[Daniel LaLiberte]

I see that now.  Thanks for pointing it out.   The mistake is in the nesting, since it is talking about how to associate a vAxis with a series.  Should be:

series: {
  2: {
    targetAxisIndex:1
  }},
vAxes: {
  1: {
    title:'Losses',
    textStyle: {color: 'red'}
  }
}

--
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/36eaf217-c982-4549-b6aa-a8326d64f32b%40googlegroups.com.

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

[Steve Morris]

Hi Daniel,

That now works ;-)

Can you also relate to the other problem I noted, that after refreshing the page the legend is occasionally scrunched up and the hAxis title overwrites the hAxis text - as shown in the second bitmap.

This is using the latest version of Chrome - Version 47.0.2526.106 and Win10

Thanks,

Steve

[Daniel LaLiberte]

The second problem sounds like you are rendering the chart when it is not yet displayed. If so, then the text measuring functionality thinks all your text has zero size.  We don't have a fix for that, but a workaround is simply to arrange that you only draw the chart when it is displayed. 

--

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/1783b0b8-768c-45a2-be5a-5b279b12deec%40googlegroups.com.

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

[Steve Morris]

Hi Daniel,

Please explain further. I thought that I just call chart.draw() and it renders the graph in the named <div>.

           var chart = new google.visualization.ComboChart(document.getElementById('chartDiv'));

          graphData = new google.visualization.DataTable(data);

          chart.draw(graphData, graphOptions);

What else is needed?

[Daniel LaLiberte]

The container element where the chart is drawn, your chartDiv, needs to be displayed at the time when you call the draw() method.

If you can point me at your actual page with the chart, I can try to see why it is displaying incorrectly.

On Wed, Dec 23, 2015 at 8:30 AM, Steve Morris <sdmo...@gmail.com> wrote:

Hi Daniel,

Please explain further. I thought that I just call chart.draw() and it renders the graph in the named <div>.

           var chart = new google.visualization.ComboChart(document.getElementById('chartDiv'));

          graphData = new google.visualization.DataTable(data);

          chart.draw(graphData, graphOptions);

What else is needed?


On Tuesday, December 22, 2015 at 7:29:27 PM UTC+2, Daniel LaLiberte wrote:

The second problem sounds like you are rendering the chart when it is not yet displayed. If so, then the text measuring functionality thinks all your text has zero size.  We don't have a fix for that, but a workaround is simply to arrange that you only draw the chart when it is displayed. 

On Tue, Dec 22, 2015 at 11:44 AM, Steve Morris <sdmo...@gmail.com> wrote:

Hi Daniel,

That now works ;-)

Can you also relate to the other problem I noted, that after refreshing the page the legend is occasionally scrunched up and the hAxis title overwrites the hAxis text - as shown in the second bitmap.

This is using the latest version of Chrome - Version 47.0.2526.106 and Win10

Thanks,

Steve

--
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/141a6f95-b37b-4ebd-ad62-c72d254487b2%40googlegroups.com.

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

[Steve Morris]

What I am trying to do is hide the graph and show a "in progress" indicator while the data is being prepared. The HTML (Jade notation) is

        div(id="tabView")
               div(id="chartDiv" ng-show="pbmainController.waitingForGraphCalls===0")
          div(ng-show="pbmainController.waitingForGraphCalls>0")
                  md-progress-circular(md-mode="indeterminate")

.

The Angular controller sets the waitingForGraphCalls flag before requesting data from the back end, which shows the "in progress" indicator and hides the graph.

        vm.waitingForGraphCalls=1;
        pbmainService.getGraphData(graphCallback, .....);

The controller receives the data in the callback, sets up the graph and clears the waitingForGraphCalls flag, hiding the "in progress" indicator and showing the graph. I also tried clearing the waitingForGraphCalls flag before calling draw() but that did not help.

        function graphCallback(data) {

                var chart = new google.visualization.ComboChart(document.getElementById('chartDiv'));
                graphData = new google.visualization.DataTable(data);
                chart.draw(graphData, graphOptions);

                vm.waitingForGraphCalls=0;
        }
Is that clear enough for you to see why it is displaying incorrectly?

[Daniel LaLiberte]

If you are trying to hide the graph while the data is being prepared, that sounds like the problem.  As I said, at the time you call chart.draw(graphData, graphOptions), the container element, your chartDiv, must be displayed.  It looks like your graphCallback function is going to call chart.draw() before it is visible.  Maybe instead you can get another callback when the container is made visible.  

--

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/5731b7f8-c9a5-4b7f-8027-14ad12346625%40googlegroups.com.

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