+ Start a Discussion
ShikibuShikibu 

Google visualizations bar chart

I am trying to use google visualizations for the first time. I installed parts of the code share project referenced here. I am producing a bar chart, but I have to specify the vertical height in pixels. I'd like to calculate the vertical height based on the number of bars; otherwise google makes the text larger or smaller to fit, and it's always the wrong size.

 

But if I try to use an apex variable, when I try to save the VF page salesforce complains that "Error: Literal value is required for attribute height in <c:BarChart>".

 

Looking at the Google api docs, I don't see a way to tell Google to determine an appropriate size for the height. 

 

Is it possible to specify a calculated height for the barchart, based on the number of rows? The code seems to insist on a predetermined integer pixel count.

 

Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard
I meant to change the VF bar chart component height attribute.  E.g. the original component from the bar chart is:
 

<apex:component > <apex:attribute name="jsondata" description="This is the chart data" type="string" required="true" /> <apex:attribute name="title" description="This is the chart title" type="string" required="true" /> <apex:attribute name="height" description="This is the chart height" type="integer" default="250" />

 

If you change this to:
 

<apex:component > <apex:attribute name="jsondata" description="This is the chart data" type="string" required="true" /> <apex:attribute name="title" description="This is the chart title" type="string" required="true" /> <apex:attribute name="height" description="This is the chart height" type="integer" />

 

I.e. remove the default for the height attribute, you can then pass an apex variable into it from your page.

All Answers

bob_buzzardbob_buzzard
This is because the height attribute has a default value in the bar chart component - if you remove that, you can pass a variable in.   I guess using a variable means that VF is unable to tell if it should use the default or not until its too late.
ShikibuShikibu

I had tried making the following change in the component. The result was a bar chart of zero height.

 

 



original:
chart.draw(data, {width: {!width}, height: {!height},

modified:
chart.draw(data, {width: {!width},

 

 

 

bob_buzzardbob_buzzard
I meant to change the VF bar chart component height attribute.  E.g. the original component from the bar chart is:
 

<apex:component > <apex:attribute name="jsondata" description="This is the chart data" type="string" required="true" /> <apex:attribute name="title" description="This is the chart title" type="string" required="true" /> <apex:attribute name="height" description="This is the chart height" type="integer" default="250" />

 

If you change this to:
 

<apex:component > <apex:attribute name="jsondata" description="This is the chart data" type="string" required="true" /> <apex:attribute name="title" description="This is the chart title" type="string" required="true" /> <apex:attribute name="height" description="This is the chart height" type="integer" />

 

I.e. remove the default for the height attribute, you can then pass an apex variable into it from your page.
This was selected as the best answer