Download libraries and customize charts

[Jose Miguel Ramírez Escobedo]

hello everybody, i have two cuestions, first can i have the libraries of google chart in my computer i mean can i download and use them or just can be used link them directly to google, second i`m trying to customize a barchart and linechart but the options don`t work, i read in the google group that for a dot notation i have to do somethin like this but it doesn`t work:

var options2 = {

            width:800,

            height:300,

            hAxis:{slantedTextAngle:90,maxTextLines:2,minTextSpacing:4},

            vAxis:{fontSize:5},

            backgroundColor:{stroke:'#DFA'}

          };

only width,height and slantedTextAngle work but for instance the other options for hAxis and the options with dot notation not

thank you

[asgallant]

According to the Terms of Service, you cannot download the API to local storage; you must link to Google's servers every time.

The options you use are almost exactly correct, you just need a few changes:

1) the font size is controlled by vAxis.textStyle.fontSize, not vAxis.fontSize

2) the default strokeWidth for the background is 0, so you need to set it to something larger

Your options should look something like this:

var options2 = {
    width: 800,
    height: 300,
    hAxis: {
        slantedTextAngle: 90,
        maxTextLines: 2,

        minTextSpacing: 5
    },
    vAxis: {
        textStyle: {
            fontSize: 5
        }
    },
    backgroundColor: {
        stroke: '#DFA',
        strokeWidth: 5
    }

};

As regard the hAxis.slantedTextAngle/maxTextLines/minTextSpacing options, from what I have observed, these are applied only when the API determines that they are needed.  First, the API tries to draw the axis values horizontally; if they are closer together than hAxis.minTextSpacing, the API splits individual labels into more lines, limited by hAxis.maxTextLines and the amount of available space; if they don't fit, it moves labels to different lines, limited by hAxis.maxAlternation and the amount of available space; if it still can't fit them all, then it draws them on an angle as determined by hAxis.slantedTextAngle.  I could be wrong about the exact order, but this seems to be the process.  I suspect that at each level, some options are given higher priority than others (ie, if you set slantedTextAngle to 90 and minTextSpacing to 100, you will probably get vertical labels that are closer than 100 pixels to each other, assuming your chart isn't so large that data points are 100+ pixels apart).

[Jose Miguel Ramírez Escobedo]

ok thank you for the answer, one more thing ok i have a lot of data, for instance i have  a value of 3000 and for example i have another value of 4 so when the bars are drown the value of 4 is not visible i mean is in the chart but how is a little i can`t see it, what can i do, use a option scale or make the height of the chart bigger, or make the range of the gridlines shorter, please

[asgallant]

If you have these two bars as parts of different data series (ie, they appear in different columns in the dataTable), you can assign each series to a separate y-axis using the series.[seriesIndex].targetAxisIndex option.  Like this:  http://jsfiddle.net/asgallant/gBawX/ 

[Jorge Dazzi]

In  this case, have one way to put label on top of bars?

sorry, for interrupting your question...

2012/7/17 asgallant <drew_g...@abtassoc.com>

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/yoUHFRpgS68J.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
JorgeDazzi
Cel  [ 8675 - 6504 ]

[asgallant]

No, you can't.

2012/7/17 asgallant <drew_g...@abtassoc.com>

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Jose Miguel Ramírez Escobedo]

no, it just one data serie, so that´s the problem there´s a big diference between the highest and the smallest value, and the highest is visible but not the smallest

[asgallant]

Ok then, if all of your data values are positive, you can set the vAxis.logScale option to true, which will scale the y-axis on a logarithmic basis.  Your data won't change, but small values will appear relatively larger than they would otherwise.

[Jose Miguel Ramírez Escobedo]

thank you again, and it works because i see a change in the width and heigh of each bar and also the numbers int the y-axis also change, but what i need is that for instance my lowest value is 1 so the bars are drown starting in the 1.0 but this is what i need to change i mean the value 1 match with the line of the x-axis so the user can´t know that this value is 1 because there are other values with 0 values so i would like that the value 1 has a height that can be visible and don´t confused with the 0 value

[asgallant]

Technically, you can't start the baseline at 0, because that would require the API to calculate log(0), which is undefined.  If you play around with the vAxis.baseline option, setting it to powers of 1/10 (ie, 0.1, 0.01, 0.001, etc), you can probably find one that is very close to what you need.  Assuming your largest values are between 1000 and 10000, this is probably what you want:

vAxis: {

    baseline: 0.01,

    logScale: true,

    viewWindow: {

        min: 0,

        max: 10000

    }

}

The "viewWindow" option forces the chart to use a specific minimum and maximum value for the axis.

[Jose Miguel Ramírez Escobedo]

thank you very much, this works for me, thank you asgallant

[API Developer]

Hey Asgallant,

Do you know if there is a way to include the 1's if I'm using a stacked column chart? It says I'm not allowed to use another baseline other than 0.

[asgallant]

It looks like you can't.  I'm not sure why that is, and there isn't any way around it that I can see.