Dynamically setting options for Google charts

jlsa...@gmail.com

unread,

Jul 25, 2013, 11:39:00 PM7/25/13

to google-visua...@googlegroups.com

Does anyone know how to dynamically set the chart options? I have tried a number of different ways without success.

thank you in advance!

function drawChart() {

// Create the data table.

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

data.addColumn('string', 'Topping');

data.addColumn('number', 'Slices');

data.addRows(<?php echo $data; ?>);

data.addRows([

['Mushrooms', 3],

['Onions', 1],

['Olives', 1],

['Zucchini', 1],

['Pepperoni', 2]

]);

// Set chart options I want to set these on the fly not statically

var options = {'title': 'Pizza I Ate',

'width':500,

'height':300};

// Instantiate and draw our chart, passing in some options.

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

chart.draw(data, options);

}

asgallant

unread,

Jul 26, 2013, 12:18:24 AM7/26/13

to google-visua...@googlegroups.com

The way you go about this is going to depend on how you are generating the options. I can help you figure out the javascript if you can give me an idea of how you want it to work.

jlsa...@gmail.com

unread,

Jul 26, 2013, 12:34:36 AM7/26/13

to google-visua...@googlegroups.com

I appreciate the response. Basically, I would prefer to generate the options in php and then put the values into a js variable. However, I am open to any option that works!

jlsa...@gmail.com

unread,

Jul 26, 2013, 12:36:56 AM7/26/13

to google-visua...@googlegroups.com

For example,

var options = {'title': $Title,

'width': $Width,

'height':$Height};

On Thursday, July 25, 2013 10:18:24 PM UTC-6, asgallant wrote:

asgallant

unread,

Jul 26, 2013, 12:52:55 AM7/26/13

to google-visua...@googlegroups.com

Ahh, that is much easier that what I thought you wanted >;o)

var options = {
    title: '<?php echo $Title; ?>',
    width: <?php echo $Width; ?>,
    height: <?php echo $Height; ?>,
}

jlsa...@gmail.com

unread,

Jul 26, 2013, 12:58:10 AM7/26/13

to google-visua...@googlegroups.com

I thought I tried that. However, I will double check that.

Bluestreak2k5

unread,

Jul 26, 2013, 2:01:53 PM7/26/13

to google-visua...@googlegroups.com

var options = {
title: '<?php echo $Title; ?>',

will only work if your in an HTML file or a PHP file, it won't work in a seperate JS file.

If you want this to work with a JS file that your loading, you could do something like this:

<html>

var options = {
    title: '<?php echo $Title; ?>',
    width: <?php echo $Width; ?>,
    height: <?php echo $Height; ?>,
}

</script>

Also you can write <?= $Title ?> instead of <?php echo $Title ?> its a shortcode for printing something.

Reply all

Reply to author

Forward