Google Chart Tools

Saturday 23 July 2011

Simple Encoding Format


Simple Encoding Format

Simple encoding format lets you specify integer values from 0—61, inclusive, encoded by a single alphanumeric character. This results in the shortest data string URL of all the data formats. However, if you have a line or bar chart that is longer than 100 pixels along the data axis, you might want to use another format. This is because, with only 62 data values supported, the data granularity is much bigger than the display granularity, and values will be just little off (not much, but visible on larger charts).
Note that if you use the chds parameter with simple encoding, data element size on the chart won't be affected, but any data point marker values will be.
Syntax:
chd=s:
  <series_1>
    ,...,
  <series_n>
<series_1>
A string, where each character is a single data point, and series are delimited by a comma. Individual values within a series are not delimited. Here are the supported data characters, and their corresponding values:
  • A—Z, where A = 0, B = 1, and so on, to Z = 25
  • a—z, where a = 26, b = 27, and so on, to z = 51
  • 0(zero)—9, where 0 = 52 and 9 = 61
  • The underscore character (_) indicates a missing value
You can use the following tool to encode a single value, or the JavaScript code to scale and encode an entire URL string.
Plain Text

Encoded Text
Example:
Equivalent to the text-encoded string chd=t:1,19,27,53,61,-1|12,39,57,45,51,27Stacked bar chart with two series and six values each, simple encoding.
chd=s:BTb19_,Mn5tzb
Read More... Simple Encoding Format
Labels: | 0 comments

Custom Scaling


Text Format with Custom Scaling

Text format with custom scaling lets you specify arbitrary positive or negative floating point numbers, in combination with a scaling parameter that lets you specify a custom range for your chart. This chart is useful when you don't want to worry about limiting your data to a specific range, or don't want to scale the data manually to fit nicely inside a chart. This format will adjust the zero line for you, as necessary. The format of the data is the same as with basic text format.
For automatic scaling, specify chds=a.
Text formatting (whether simple or with custom parameters) results in the longest data string of all formats.
Syntax:
Text formatting with custom scaling requires two parameters:
chd=t:val,val,val|val,val,val
chds=<series_1_min>,<series_1_max>,...,<series_n_min>,<series_n_max>
chd=t:<data>
Same as plain data format: one or more comma-separated values per series, multiple series separated by a pipe character (|). The range of permitted values in each series is specified by the chds parameter.
chds
A set of one or more minimum and maximum permitted values for each data series, separated by commas. You must supply both a max and a min. If you supply fewer pairs than there are data series, the last pair is applied to all remaining data series. Note that this does not change the axis range; to change the axis range, you must set the chxr parameter. Valid values range from (+/-)9.999e(+/-)199. You can specify values in either standard or E notation.
<series_1_min>
The minimum allowable value in the first series. Lower values are marked as missing.
<series_1_max>
Maximum allowable value in the first series. Higher values are truncated to this value.

Example:
A bar chart with a min/max scale of -80—140. The -90, -60, and 140 values fall within the scale, so they are not truncated. Note that the zero line is adjusted for you, 80/(140 + 80) = 0.36 of the way up the y-axis.
Also note that the default y-axis range is still 0—100, despite thechds parameter, so the label values do not reflect the actual data values.
Bar chart with 5 values, text encoding with data scaling.
chd=t:30,-60,50,120,80,-90&
chds=-80,140
Read More... Custom Scaling
Labels: | 0 comments

Text Format with Automatic Scaling


You can configure some charts to scale automatically to fit their data. The chart will be scaled so that the largest value is at the top of the chart and the smallest (or zero, if all values are greater than zero) will be at the bottom.
Any marker values shown on the chart will display their actual values, not their scaled values.
This feature works only with text-formatted values, and does not work with all chart types. Experiment with your chart type to see whether it is supported.
Syntax
cht=t:val,val,val...
chds=a
Examples:

chd=t:5,30,50,80,200
chds=a
Note that pie you should not use values < 0 for pie charts.
Bar chart with 5 values, text encoding.
chd=t:-5,30,-30,50,80,200
chds=a
Read More... Text Format with Automatic Scaling
Labels: | 0 comments

Basic Text Format


Bar chart with 5 values, text encoding.
Basic text-formatted data lets you specify floating point values from 0—100, inclusive, as numbers. Values below zero are marked as missing; values above 100 are truncated to 100. The advantage of basic text format is that the values are easy to read and understand in the URL, and the default axis labels show the data values accurately. However, text formatting (whether simple or with custom parameters) results in the longest data string of all formats.
If your data includes values outside the specified range for text formatting, you can scale your data by converting it into percentages of the largest value in your data. Alternatively, you could use text formatting with custom scaling to handle the scaling for you.
Syntax:
chd=t:val,val,val|val,val,val...

<data>
Each series is one or more comma-separated values. Separate multiple series using a pipe character (|). Values are floating point numbers from 0—100, inclusive. Values less than zero, or the underscore character ( _ ) are considered null values. Values above 100 are truncated to 100.

Example:
A table with five values. The underscore is considered a null value, the -30 value falls below the minimum value, so it is dropped, and the 200 value is truncated to 100.

Read More... Basic Text Format
Labels: | 0 comments

Data Formats


Data for almost all charts is sent using the chd parameter. The data must be sent in one of the following formats:
  • Basic text format is essentially simple floating point numbers from 0—100, inclusive. This format is easy to read and write by hand.
  • Text format with automatic scaling scales the chart to fit your data.
  • Text format with custom scaling is similar to basic text format, but it lets you specify a custom range using a second URL parameter.
  • Simple encoding format lets you specify integer values from 0—61, inclusive, encoded by a single alphanumeric character. This encoding results in the shortest data string of any of the data formats (if any values are greater than 9).
  • Extended encoding format lets you specify integer values from 0—4095, inclusive, encoded by two alphanumeric characters. Extended encoding is best suited to a chart with a lot of data and a large data range.
The data values are scaled to fit the format used; see Data Scaling and Axis Scaling for an explanation of how the data is manipulated to fit the chart.
We provide a JavaScript snippet for encoding data into simple encoding or extended encoding formats. Alternatively, several Chart API Group members have contributed other libraries to help with formatting: search the Group archives or visit the related links page on the google-chart-api group site to find them.
Read More... Data Formats
Labels: | 0 comments

Optimizations


Now that you've learned the basics of making a chart, here are a few optimizations that you can use.

Improving Performance on Pages with Many Charts

If you have just a few charts on your page, the standard base URL https://chart.googleapis.com/chart should be fine. However, if you have many charts, you can add a number 0-9 and a dot just before chart.apis.google.com. If you specify a different number for each chart on your page, the browser will try to load more images simultaneously, rather than waiting to load them in sequence. However, you should only need this if you're loading perhaps five or more charts on a page. For example:

Using POST

URLs are limited to 2K in length, so if your chart has more data than that, you'll have to use POST instead of GET, as described here. GET is when you type your chart URL into your browser URL bar, or use it as the source of an <img> element in a web page. POST requires additional programming in another language, such as PHP or PERL.
Read More... Optimizations
Labels: | 0 comments

Glossary of Chart Terms


Here are a few important terms that we use in this documentation:
Series
A related set of data in a chart. What constitutes a series depends on the chart type: in a line chart, a series is a single line; in a pie chart, each entry is a slice, and all slices together are a series. In a bar chart, a series is all the bars from the same set of data; different series are either grouped side by side or stacked atop each other, depending on the bar chart type. The following chart demonstrates a grouped bar chart with two series, one in dark blue, one in light blue:
Bar chart showing two series: Cats and Dogs.
Axis labels
Numeric or text values along each axis. In the previous chart, it would be the labels "Jan," "Feb," "Mar," "0," "50," "100."

Chart Components

Here are some of the components of a chart:
Various regions of a chart.
Chart area
The area showing the series art. See "Chart Components" sidebar for more details.
Legend
A small area on the chart describing the series. In the chart above, it is the section that lists "Cats" and "Dogs".
Parameter
A key=value pair used in the URL. For example: chxt=x, where chxt is the parameter name and x is the parameter value.
GET and POST
Two methods of sending your Chart URL. GET is typically done either by typing a URL in the browser, or by making it the source of an <img> tag. POST requests are more complex to make, but can include much more data. The main reason to use POST instead of GET is that a POST request can take much more data than a GET request (16K characters vs 2K characters). POST is covered here.
Pipe character
The | character, often used as a parameter value delimiter—that is, a character to break up multiple values. Commas and ampersands (&) are also used as delimiters in the Chart URL.
Compound charts
A chart that is a combination of two different chart types: for example, a bar chart with a line, or a line chart with candlestick markers. See Compound Charts.
Read More... Glossary of Chart Terms
Labels: | 0 comments
Subscribe to: Posts (Atom)

About Me

My Photo
naguakkina
View my complete profile

About Me !

Simple Encoding Format

Posted by naguakkina | Saturday 23 July 2011 | Labels:


Simple Encoding Format

Simple encoding format lets you specify integer values from 0—61, inclusive, encoded by a single alphanumeric character. This results in the shortest data string URL of all the data formats. However, if you have a line or bar chart that is longer than 100 pixels along the data axis, you might want to use another format. This is because, with only 62 data values supported, the data granularity is much bigger than the display granularity, and values will be just little off (not much, but visible on larger charts).
Note that if you use the chds parameter with simple encoding, data element size on the chart won't be affected, but any data point marker values will be.
Syntax:
chd=s:
  <series_1>
    ,...,
  <series_n>
<series_1>
A string, where each character is a single data point, and series are delimited by a comma. Individual values within a series are not delimited. Here are the supported data characters, and their corresponding values:
  • A—Z, where A = 0, B = 1, and so on, to Z = 25
  • a—z, where a = 26, b = 27, and so on, to z = 51
  • 0(zero)—9, where 0 = 52 and 9 = 61
  • The underscore character (_) indicates a missing value
You can use the following tool to encode a single value, or the JavaScript code to scale and encode an entire URL string.
Plain Text

Encoded Text
Example:
Equivalent to the text-encoded string chd=t:1,19,27,53,61,-1|12,39,57,45,51,27Stacked bar chart with two series and six values each, simple encoding.
chd=s:BTb19_,Mn5tzb


at 01:35 0 comments

Custom Scaling

Posted by naguakkina | | Labels:


Text Format with Custom Scaling

Text format with custom scaling lets you specify arbitrary positive or negative floating point numbers, in combination with a scaling parameter that lets you specify a custom range for your chart. This chart is useful when you don't want to worry about limiting your data to a specific range, or don't want to scale the data manually to fit nicely inside a chart. This format will adjust the zero line for you, as necessary. The format of the data is the same as with basic text format.
For automatic scaling, specify chds=a.
Text formatting (whether simple or with custom parameters) results in the longest data string of all formats.
Syntax:
Text formatting with custom scaling requires two parameters:
chd=t:val,val,val|val,val,val
chds=<series_1_min>,<series_1_max>,...,<series_n_min>,<series_n_max>
chd=t:<data>
Same as plain data format: one or more comma-separated values per series, multiple series separated by a pipe character (|). The range of permitted values in each series is specified by the chds parameter.
chds
A set of one or more minimum and maximum permitted values for each data series, separated by commas. You must supply both a max and a min. If you supply fewer pairs than there are data series, the last pair is applied to all remaining data series. Note that this does not change the axis range; to change the axis range, you must set the chxr parameter. Valid values range from (+/-)9.999e(+/-)199. You can specify values in either standard or E notation.
<series_1_min>
The minimum allowable value in the first series. Lower values are marked as missing.
<series_1_max>
Maximum allowable value in the first series. Higher values are truncated to this value.

Example:
A bar chart with a min/max scale of -80—140. The -90, -60, and 140 values fall within the scale, so they are not truncated. Note that the zero line is adjusted for you, 80/(140 + 80) = 0.36 of the way up the y-axis.
Also note that the default y-axis range is still 0—100, despite thechds parameter, so the label values do not reflect the actual data values.
Bar chart with 5 values, text encoding with data scaling.
chd=t:30,-60,50,120,80,-90&
chds=-80,140


at 01:34 0 comments

Text Format with Automatic Scaling

Posted by naguakkina | | Labels:


You can configure some charts to scale automatically to fit their data. The chart will be scaled so that the largest value is at the top of the chart and the smallest (or zero, if all values are greater than zero) will be at the bottom.
Any marker values shown on the chart will display their actual values, not their scaled values.
This feature works only with text-formatted values, and does not work with all chart types. Experiment with your chart type to see whether it is supported.
Syntax
cht=t:val,val,val...
chds=a
Examples:

chd=t:5,30,50,80,200
chds=a
Note that pie you should not use values < 0 for pie charts.
Bar chart with 5 values, text encoding.
chd=t:-5,30,-30,50,80,200
chds=a


at 01:33 0 comments

Basic Text Format

Posted by naguakkina | | Labels:


Bar chart with 5 values, text encoding.
Basic text-formatted data lets you specify floating point values from 0—100, inclusive, as numbers. Values below zero are marked as missing; values above 100 are truncated to 100. The advantage of basic text format is that the values are easy to read and understand in the URL, and the default axis labels show the data values accurately. However, text formatting (whether simple or with custom parameters) results in the longest data string of all formats.
If your data includes values outside the specified range for text formatting, you can scale your data by converting it into percentages of the largest value in your data. Alternatively, you could use text formatting with custom scaling to handle the scaling for you.
Syntax:
chd=t:val,val,val|val,val,val...

<data>
Each series is one or more comma-separated values. Separate multiple series using a pipe character (|). Values are floating point numbers from 0—100, inclusive. Values less than zero, or the underscore character ( _ ) are considered null values. Values above 100 are truncated to 100.

Example:
A table with five values. The underscore is considered a null value, the -30 value falls below the minimum value, so it is dropped, and the 200 value is truncated to 100.


at 01:31 0 comments

Data Formats

Posted by naguakkina | | Labels:


Data for almost all charts is sent using the chd parameter. The data must be sent in one of the following formats:
  • Basic text format is essentially simple floating point numbers from 0—100, inclusive. This format is easy to read and write by hand.
  • Text format with automatic scaling scales the chart to fit your data.
  • Text format with custom scaling is similar to basic text format, but it lets you specify a custom range using a second URL parameter.
  • Simple encoding format lets you specify integer values from 0—61, inclusive, encoded by a single alphanumeric character. This encoding results in the shortest data string of any of the data formats (if any values are greater than 9).
  • Extended encoding format lets you specify integer values from 0—4095, inclusive, encoded by two alphanumeric characters. Extended encoding is best suited to a chart with a lot of data and a large data range.
The data values are scaled to fit the format used; see Data Scaling and Axis Scaling for an explanation of how the data is manipulated to fit the chart.
We provide a JavaScript snippet for encoding data into simple encoding or extended encoding formats. Alternatively, several Chart API Group members have contributed other libraries to help with formatting: search the Group archives or visit the related links page on the google-chart-api group site to find them.


at 01:27 0 comments

Optimizations

Posted by naguakkina | | Labels:


Now that you've learned the basics of making a chart, here are a few optimizations that you can use.

Improving Performance on Pages with Many Charts

If you have just a few charts on your page, the standard base URL https://chart.googleapis.com/chart should be fine. However, if you have many charts, you can add a number 0-9 and a dot just before chart.apis.google.com. If you specify a different number for each chart on your page, the browser will try to load more images simultaneously, rather than waiting to load them in sequence. However, you should only need this if you're loading perhaps five or more charts on a page. For example:

Using POST

URLs are limited to 2K in length, so if your chart has more data than that, you'll have to use POST instead of GET, as described here. GET is when you type your chart URL into your browser URL bar, or use it as the source of an <img> element in a web page. POST requires additional programming in another language, such as PHP or PERL.


at 01:24 0 comments

Glossary of Chart Terms

Posted by naguakkina | | Labels:


Here are a few important terms that we use in this documentation:
Series
A related set of data in a chart. What constitutes a series depends on the chart type: in a line chart, a series is a single line; in a pie chart, each entry is a slice, and all slices together are a series. In a bar chart, a series is all the bars from the same set of data; different series are either grouped side by side or stacked atop each other, depending on the bar chart type. The following chart demonstrates a grouped bar chart with two series, one in dark blue, one in light blue:
Bar chart showing two series: Cats and Dogs.
Axis labels
Numeric or text values along each axis. In the previous chart, it would be the labels "Jan," "Feb," "Mar," "0," "50," "100."

Chart Components

Here are some of the components of a chart:
Various regions of a chart.
Chart area
The area showing the series art. See "Chart Components" sidebar for more details.
Legend
A small area on the chart describing the series. In the chart above, it is the section that lists "Cats" and "Dogs".
Parameter
A key=value pair used in the URL. For example: chxt=x, where chxt is the parameter name and x is the parameter value.
GET and POST
Two methods of sending your Chart URL. GET is typically done either by typing a URL in the browser, or by making it the source of an <img> tag. POST requests are more complex to make, but can include much more data. The main reason to use POST instead of GET is that a POST request can take much more data than a GET request (16K characters vs 2K characters). POST is covered here.
Pipe character
The | character, often used as a parameter value delimiter—that is, a character to break up multiple values. Commas and ampersands (&) are also used as delimiters in the Chart URL.
Compound charts
A chart that is a combination of two different chart types: for example, a bar chart with a line, or a line chart with candlestick markers. See Compound Charts.


at 01:22 0 comments
Subscribe to: Posts (Atom)

Lorem ipsume

Followers

Lorem ipsume