Calendar Chart

The calendar.cellColor option lets you customize the border of the calendar day squares:

var options = {
  calendar: {
    cellColor: {
      stroke: 'red',      // Color the border of the squares.
      strokeOpacity: 0.5, // Make the borders half transparent.
      strokeWidth: 2      // ...and two pixels thick.
    }
  }
};
      

The size of the calendar day squares:

var options = { calendar: { cellSize: 10 } };
      

Controls the font style of the week labels at the top of the chart:

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
      

The distance between the right edge of the week labels and the left edge of the chart day squares.

The single-letter labels to use for Sunday through Saturday.

When the user focuses (say, by hovering) over a day square, calendar charts will highlight the square.

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
      

Style for the month labels, e.g.:

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
      

Months with data values are delineated from others using a border in this style.

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
      

The number of pixels between the bottom of the month labels and the top of the day squares:

var options = { calendar: { underMonthSpace: 12 } };

The number of pixels between the bottom-most year label and the bottom of the chart:

var options = { calendar: { underYearSpace: 2 } };

Months without data values are delineated from others using a border in this style.

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
      

An object that specifies a mapping between color column values and colors or a gradient scale. To specify properties of this object, you can use object literal notation, as shown here:

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}

Colors to assign to values in the visualization. An array of strings, where each element is an HTML color string, for example: colorAxis: {colors:['red','#004411']}. You must have at least two values; the gradient will include all your values, plus calculated intermediary values, with the first color as the smallest value, and the last color as the highest.

If present, specifies a maximum value for chart color data. Color data values of this value and higher will be rendered as the last color in the colorAxis.colors range.

If present, specifies a minimum value for chart color data. Color data values of this value and lower will be rendered as the first color in the colorAxis.colors range.

If present, controls how values are associated with colors. Each value is associated with the corresponding color in the colorAxis.colors array. These values apply to the chart color data. Coloring is done according to a gradient of the values specified here. Not specifying a value for this option is equivalent to specifying [minValue, maxValue].

Draws the chart inside an inline frame. (Note that on IE8, this option is ignored; all IE8 charts are drawn in i-frames.)

Height of the chart, in pixels.

Calendar charts use a striped diagonal pattern to indicate that there is no data for a particular day. Use the noDataPattern.backgroundColor and noDataPattern.color options to override the grayscale defaults, e.g.:

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
      

Set to false to use SVG-rendered (rather than HTML-rendered) tooltips. See Customizing Tooltip Content for more details.

Note: customization of the HTML tooltip content via the tooltip column data role is not supported by the Pie Chart and Bubble Chart visualizations.

Width of the chart, in pixels.

Draws the chart. The chart accepts further method calls only after the readyevent is fired. Extended description.

Returns an object containing the left, top, width, and height of chart element id. The format for id isn't yet documented (they're the return values of event handlers), but here are some examples:

var cli = chart.getChartLayoutInterface();

Height of the chart area

cli.getBoundingBox('chartarea').height

Width of the third bar in the first series of a bar or column chart

cli.getBoundingBox('bar#0#2').width

Bounding box of the fifth wedge of a pie chart

cli.getBoundingBox('slice#4')

Bounding box of the chart data of a vertical (e.g., column) chart:

cli.getBoundingBox('vAxis#0#gridline')

Bounding box of the chart data of a horizontal (e.g., bar) chart:

cli.getBoundingBox('hAxis#0#gridline')

Values are relative to the container of the chart. Call this after the chart is drawn.

Returns an array of the selected chart entities. Selectable entities are bars, legend entries and categories. A bar corresponds to a cell in the data table, a legend entry to a column (row index is null), and a category to a row (column index is null). For this chart, only one entity can be selected at any given moment. Extended description .

Selects the specified chart entities. Cancels any previous selection. Selectable entities are bars, legend entries and categories. A bar corresponds to a cell in the data table, a legend entry to a column (row index is null), and a category to a row (column index is null). For this chart, only one entity can be selected at a time. Extended description .

Clears the chart, and releases all of its allocated resources.

Fired when an error occurs when attempting to render the chart.

Fired when the user mouses over a visual entity. Passes back the row index and date value of the entity. If there is no data table element for the entity, the value returned for the row index is undefined.

Fired when the user mouses away from a visual entity. Passes back the row index and date value of the entity. If there is no data table element for the entity, the value returned for the row index is undefined.

The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the draw method, and call them only after the event was fired.

Fired when the user clicks a visual entity. To learn what has been selected, call getSelection().