Deprecated
This visualization has been replaced with a new version; please use that instead. For easy migration, please refer to the release notes page.
Overview
A scatter chart that is rendered within the browser using SVG or VML. Displays tips when clicking on points.
A scatter chart is used to map correlation between sets of numbers.
By: Google
Example
Code it yourself on the Visualization Playground
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["scatterchart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, titleX: 'Age', titleY: 'Weight', legend: 'none', pointSize: 5}); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Loading
The google.load
package name is "scatterchart"
google.load("visualization", "1", {packages: ["scatterchart"]});
The visualization's class name is google.visualization.ScatterChart
var visualization = new google.visualization.ScatterChart(container);
Data Format
Two or more columns are required, all must be numeric. The values in the first column are used for the X-axis. The values in following columns are used for the Y-axis. Each column is displayed with a separate color.
The minimum and maximum numbers shown on the X axis are the minimum and maximum X values in the data table. To force extra space to be shown below or above these values, add a row with an X value below the minimum or above the maximum data value, and do not specify a Y value in the row. You can add a row for minimum, maximum, or both values this way.
Configuration Options
Name | Type | Default | Description |
---|---|---|---|
axisColor | string or Object | default color | The color of the axis. Possible values are as those of the backgroundColor configuration option. |
axisBackgroundColor | string or Object | default color | The border around axis background. Possible values are as those of the backgroundColor configuration option. |
axisFontSize | number | automatic | Font size of the chart axis text, in pixels. |
backgroundColor | string or Object | default color | The background color for the main area of the chart.
May be one of the following options:
|
borderColor | string or Object | default color | The border around chart elements. Possible values are as those of the backgroundColor configuration option. |
colors | Array of strings | Default colors | The colors to use for the chart elements. An array of strings. Each element is a string that is a color supported by HTML, for example 'red' or '#00cc00'. |
enableTooltip | boolean | true | If set to true, tooltips are shown when the user clicks on a data point. |
focusBorderColor | string or Object | default color | The border around chart elements that are in focus (pointed by the mouse). Possible values are as those of the backgroundColor configuration option. |
height | number | Container's height | Height of the chart in pixels. |
legend | string | 'right' | Position and type of legend. Can be one of the following:
|
legendBackgroundColor | string or Object | default color | The background color for the legend area of the chart. Possible values are as those of the backgroundColor configuration option. |
legendFontSize | number | automatic | The size of the legend font, in pixels. |
legendTextColor | string or Object | default color | The legend text color. Possible values are as those of the backgroundColor configuration option. |
lineSize | number | 0 | Line width in pixels. Use positive values to show a line between all points of the same data column. |
logScale | boolean | false | If true, the Y axis should be scaled logarithmically. |
logScaleX | boolean | false | If true, the X axis should be scaled logarithmically. |
max | number | automatic | Specifies the highest Y axis grid line. The actual grid line will be the greater of two values: the max option value, or the highest data value, rounded up to the next higher grid mark. |
min | number | automatic | Specifies the lowest Y axis grid line. The actual grid line will be the lower of two values: the min option value, or the lowest data value, rounded down to the next lower grid mark. |
pointSize | number | 3 | Size of displayed points in pixels. |
title | string | no title | Text to display above the chart. |
titleX | string | no title | Text to display below the horizontal axis. |
titleY | string | no title | Text to display by the vertical axis. |
titleColor | string or Object | default color | The color for the chart's title. Possible values are as those of the backgroundColor configuration option. |
titleFontSize | number | automatic | The font size for the chart title, in pixels. |
tooltipFontSize |
number | 11 | The font size of the tooltip text. This might be reduced, if the tooltip is too small to hold the text in the specified font. |
tooltipHeight |
number | 60 | The height of the tooltip, in pixels. The tooltip height is fixed; it will never grow or shrink to fit the length or font size of the text. But anything greater than 1/3 the chart height will be cropped. |
tooltipWidth | number | 120 | The width of the tooltip, in pixels. The tooltip width is fixed; it will never grow or shrink to fit the length or font size of the text. But anything greater than the chart width will be cropped. |
width | number | Container's width | Width of the chart in pixels. |
Methods
Method | Return Type | Description |
---|---|---|
draw(data, options) |
none | Draws the chart. |
getSelection() |
Array of selection elements | Standard getSelection() implementation.
Selected elements are column and cell elements.
Only one column or cell can be selected at a time by the user. |
setSelection() |
none | Standard setSelection() implementation, but supports selection of only one element.
Treats every selection entry as a column or cell selection.
Note that the label column and the first numeric column (the x axis value column) cannot be selected. |
Events
Name | Description | Properties |
---|---|---|
onmouseover |
Fired when the user mouses over a point, and passes in the row and column indexes of the corresponding cell. | row, column |
onmouseout |
Fired when the user mouses away from a point, and passes in the row and column indexes of the corresponding cell. | row, column |
ready |
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 |
None |
select |
Fired when the user clicks a point or legend. When a point is selected, the
corresponding cell in the data table is selected; when a legend is selected,
the corresponding column in the data table is selected. To learn what has been
selected, call getSelection() . |
None |
Data Policy
All code and data are processed and rendered in the browser. No data is sent to any server.