Organizing graph options in Google Charts

Question

I'm creating a handful of pie charts using Google Charts. The majority of the graph options for the charts I'm creating are the same, except the titles. Is it possible to maintain a default set of options but write certain specific options for each graph (in this case, I just need to set a title).

Here's an example of the code I'm using:

var graphOptions = {
    is3D: true,
    pieSliceText: 'label',
    colors: ['#F9B641', '#FBCB75', '#FCE1B0', '#FFF8EB', '#FFFFFF'],
    backgroundColor: 'transparent',
    titleTextStyle: {
        color: '#FFF'
    },
    legend: {
        textStyle: {
        color: '#FFF'
        }
    },
    chartArea: {
        width: '90%',
        height: '80%'
    }
};

function pieChart1() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
        ['Gender', 'Number'],
        ['Male', 216],
        ['Female', 238]
    ]);
    // Create and draw the visualization.
    var chart = new google.visualization.PieChart(document.getElementById('pieChart1'));
    chart.draw(data, graphOptions);
}

function pieChart2() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
        ['Gender', 'Number'],
        ['Male', 116],
        ['Female', 98]
    ]);
    // Create and draw the visualization.
    var chart = new google.visualization.PieChart(document.getElementById('pieChart2'));
    chart.draw(data, graphOptions);
}

How would I go about setting the title option for each graph while still pulling the options from graphOptions?

Answer 1

Normally you'd do:

var options = { title: 'My Chat Title' };

In your case add title to your graphOptions object then do:

graphOptions.title = "The New Title";

for each graph.

Answer 2

As David explained, you can create an options object, and then edit properties of that object individually.

Here is a jsfiddle that shows it in action .

^{Note: you cannot see the titles because the BG and font color is white. Just do a ctrl + a to select everything and see them hidden there}

Basically, you create a variable both functions can access (in your case graphOptions ). In each function you set a new variable called options to equal graphOptions . You can then change the title property of the options variable to whatever you want without changing your default options template graphOptions , and use the options variable to draw the graph.

For your code, that means adding this code to each function:

var options = graphOptions;
options.title = "Pie Chart X"

You can change the title to whatever is appropriate, different for each graph. Then in the graph draw command, you change graphOptions to options to get

chart.draw(data, options);