CODEWITHSUNDEEP
chartsgoogle-visualization
Dwayne Charrington
Dwayne Charrington

Reputation: 6622

Google Charts Line Chart Padding Issue

I have a Google Chart in my application and I have removed the axis lines, however because I am using a background image on my chart for faux axis / grid lines I need to add some padding to the chart image itself.

I found the chma property in the Google Charts documentation, but it didn't seem to work the way I wanted it too.

Take a look at the following chart example:

alt text

Notice the space between the graph image and the x axis (the bottom dates) is really tight, like almost overlappying? Is there a way to increase the spacing between the X axis and the chart image? Because I've removed the axis lines so there are just lines for the data showing, but I would also like to add some padding to the left hand side to the move the data lines over a little bit.

Here's the code I am using in my application.

http://chart.apis.google.com/chart?chs=1000x265&cht=lc:nda&chma=0,0,0,0|10,0&chco=ffff00,cc34cc,339900,f17d09&chf=bg,s,65432100&chds=0.5,4.0&chd=t:1.0,3.4,4.0,1.8,2.3,2.9,3.8,1.3|4.0,2.0,2.8,1.4,3.9,3.4,1.0,1.6|3.4,1.3,3.9,1.8,2.2,3.6,1.4,1.6|0.7,1.3,2.6,4.0,3.1,0.5,3.9,1.8&chxt=y,x&chxp=1,0,24.6,49,73.5,97.9&chxs=1,525252,12,0,lt|2,525252,12,0,lt&chx=1,525252,12&chxl=0:|0.5|1.0|1.5|2.0|2.5|3.0|3.5|4.0|1:|0000|0600|1200|1800|2400|

Is this possible and if so, how? Thank you.

Upvotes: 3

Views: 4237

Answers (2)

nerdess
nerdess

Reputation: 10920

If you're using the Javascript API for Google Pie charts (https://www.google.com/jsapi) you can use the parameter "chartArea" and its properties to get rid of the padding, see http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html

Upvotes: 1

seanyboy
seanyboy

Reputation: 5693

The example you gave us had no margin defined. 

http://chart.apis.google.com/chart?chs=1000x265&cht=lc:nda&chma=50,50,50,50&chco=ffff00,cc34cc,339900,f17d09&chf=bg,s,65432100&chds=0.5,4.0&chd=t:1.0,3.4,4.0,1.8,2.3,2.9,3.8,1.3|4.0,2.0,2.8,1.4,3.9,3.4,1.0,1.6|3.4,1.3,3.9,1.8,2.2,3.6,1.4,1.6|0.7,1.3,2.6,4.0,3.1,0.5,3.9,1.8&chxt=y,x&chxp=1,0,24.6,49,73.5,97.9&chxs=1,525252,12,0,lt|2,525252,12,0,lt&chx=1,525252,12&chxl=0:|0.5|1.0|1.5|2.0|2.5|3.0|3.5|4.0|1:|0000|0600|1200|1800|2400|

I've got rid of the legend padding, and upped the margin to 50 in the example you gave. This margin gives a lot of space around the chart for your image.

Is this what you're looking for.

The "chma" command has two sections. These sections are separated by a pipe symbol. The first section is the margin to the main chart, and the second section is the size of the legend (The bit which says what the different colours are). 

chma=0,0,0,0

has no legend sizing and a 0 size margin. 

chma=10,10,10,10

has no legend sizing and a margin of 10 units. 

chma=0,0,0,0|10,0

has no margin padding, a legend width of 10 and a legend height of 0.

Here's an example of an image with a legend sized 80,20

alt text

Upvotes: 0

Related Questions