Stay organized with collections Save and categorize content based on your preferences.
OverviewDimensions in the data are often displayed on axes, horizontal and vertical. Such is the case for: Area Chart, Bar Chart, Candlestick Chart, Column Chart, Combo Chart, Line Chart, Stepped Area Chart and Scatter Chart.
When you create a chart with axes you can customize some of their properties:
The major axis of a chart can be either discrete or continuous. When using a discrete axis, the data points of each series are evenly spaced across the axis, according to their row index. When using a continuous axis, the data points are positioned according to their domain value.
The labeling is also different. In a discrete axis, the names of the categories (specified in the domain column of the data) are used as labels. In a continuous axis, the labels are auto-generated: the chart shows evenly spaced grid lines, where each grid line is labeled according to the value it represents.
The following axes are always continuous:
In line, area, bar, column and candlestick charts (and combo charts containing only such series), you can control the type of the major axis:
string.number, date, datetime or timeofday.You can set the scale of an axis using the scaleType option. For example, to set the scale of the vertical axis to log scale, use the following option:
vAxis: {
scaleType: 'log'
}
The following line chart shows the growth of the world population in both linear (standard) scale and log scale.
If your data contains zero or negative values, you can plot the points using the scaleType: 'mirrorLog' option. In mirror log scale, the plotted value of a negative number is minus the log of the absolute value of the number. Values close to 0 are plotted on a linear scale.
The following example shows positive and negative Fibonacci numbers plotted in both mirror log scale and linear scale.
Number FormatsYou can control the formatting of label numbers with hAxis.format and vAxis.format. For instance, {hAxis: { format:'#,###%'} } displays the values "1,000%", "750%", and "50%" for values 10, 7.5, and 0.5. You can also supply any of the following presets:
{format: 'none'}: displays numbers with no formatting (e.g., 8000000){format: 'decimal'}: displays numbers with thousands separators (e.g., 8,000,000){format: 'scientific'}: displays numbers in scientific notation (e.g., 8e6){format: 'currency'}: displays numbers in the local currency (e.g., $8,000,000.00){format: 'percent'}: displays numbers as percentages (e.g., 800,000,000%){format: 'short'}: displays abbreviated numbers (e.g., 8M){format: 'long'}: displays numbers as full words (e.g., 8 million)In the chart below, you can select among the presets:
A complete web page for the above chart follows.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'GDP');
data.addRows([
['US', 16768100],
['China', 9181204],
['Japan', 4898532],
['Germany', 3730261],
['France', 2678455]
]);
var options = {
title: 'GDP of selected countries, in US $millions',
width: 500,
height: 300,
legend: 'none',
bar: {groupWidth: '95%'},
vAxis: { gridlines: { count: 4 } }
};
var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
chart.draw(data, options);
document.getElementById('format-select').onchange = function() {
options['vAxis']['format'] = this.value;
chart.draw(data, options);
};
};
</script>
</head>
<body>
<select id="format-select">
<option value="">none</option>
<option value="decimal" selected>decimal</option>
<option value="scientific">scientific</option>
<option value="percent">percent</option>
<option value="currency">currency</option>
<option value="short">short</option>
<option value="long">long</option>
</select>
<div id="number_format_chart">
</body>
</html>
When using a format that employs text (e.g., the long format, which will render 8,000,000 as "8 million", you can localize the strings into other languages by specifying a language code when you load the Google Charts library. For instance, to change "8 million" into the Russian "8 миллиона", call the library like so:
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
google.charts.setOnLoadCallback(drawMarkersMap);
</script>
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-07-10 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-10 UTC."],[],[]]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4