نمودار میله

این سند انواع مختلفی از نمودارهای میله ای را که می توانید با استفاده از Chart API ایجاد کنید، شرح می دهد.

فهرست مطالب

بررسی اجمالی

انواع نمودارهای میله ای وجود دارد که می توانید ایجاد کنید، از جمله نسخه های عمودی، افقی، گروه بندی شده، انباشته و همپوشانی هر کدام.

نمودارهای میله ای برای مقایسه کنار هم و مشخص کردن روندها در تعداد کمی از نقاط داده گسسته خوب هستند. هنگامی که شما فقط چند نقطه داده در یک سری دارید، آنها جایگزین خوبی برای نمودارهای خطی هستند.

سه روش کلی برای نمایش چند سری در نمودار میله ای وجود دارد:

گروه بندی شده است
انباشته
همپوشانی دارند
Grouped chart
Stacked chart
Overlapped chart
cht=bvg
chd=t:5,5,5|10,10,10|15,15,15
cht=bvs
chd=t:5,5,5|10,10,10|15,15,15

cht=bvo
chd=t:5,5,5|10,10,10|15,15,15

با استفاده از پارامتر chbh می توانید عرض و فاصله نوار را کنترل کنید. اگر chbh مشخص نکنید، ممکن است برخی از نوارها بریده شوند.

توجه داشته باشید که به طور پیش فرض، تمام سری ها به یک رنگ نمایش داده می شوند. اگر رنگ های مختلف را برای سری های مختلف مشخص نکنید، تشخیص اینکه چندین سری در نمودار شما وجود دارد دشوار خواهد بود. برای جزئیات بیشتر به سری رنگ ها مراجعه کنید.

نمودارهای میله ای حداقل یک محور را به طور پیش فرض نمایش می دهند. اگر می‌خواهید هر محور پیش‌فرضی را مخفی کنید، از پارامتر chxs استفاده کنید و برای مقدار < axis_or_tick > یک خط زیر مشخص کنید.

اگر از قالب متن ساده در نمودارهای پشته‌ای استفاده می‌کنید، باید مراقب باشید که نمودار هر چیزی بالاتر از 100 را به عنوان ارتفاع کل پشته برش می‌دهد، مگر اینکه مقیاس‌بندی سفارشی را اضافه کنید، همانطور که در اینجا نشان داده شده است:

بدون مقیاس‌بندی، سه میله میانی از ۱۰۰ فراتر می‌رود و در نمودار داده‌های قالب‌بندی شده متنی ساده برش داده می‌شود. Horizontal bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue
cht=bhs
chco=4D89F9,C6D9FD
chd=t:10,50,60,80,40|
50,60,100,40,20
اگر می‌خواهیم طول نوار پشته‌ای کامل را نشان دهیم، باید از یک طرح رمزگذاری متفاوت استفاده کنیم یا از قالب‌بندی متن با مقیاس‌بندی سفارشی استفاده کنیم. حداکثر مقدار مقیاس باید نسبت به کل ارتفاع میله پشته‌ای باشد. این مثال تا 160 (حداکثر مقدار جمع شده) می رود. Horizontal bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue
cht=bhs
chco=4D89F9,C6D9FD
chd=t:10,50,60,80,40|
50,60,100,40,20
chds=0,160

انواع نمودار ( cht )

انواع مختلفی از نمودار میله ای وجود دارد که می توانید ایجاد کنید. یک نمودار میله ای با نحو زیر مشخص کنید:

نحو

cht=<chart_type>

جایی که < chart_type > یکی از انواع زیر است:

نوع نمودار شرح مثال

bhs

نمودار میله ای افقی با میله های انباشته.

مثال اول (همه نوارها به رنگ آبی تیره) دارای یک سری داده است.

مثال دوم (نوارهایی به رنگ آبی تیره و کم رنگ) دارای دو سری است. (همچنین برای نشان دادن مقدار نوار جمع شده، که از 100 بیشتر است، مقیاس بندی شده است).

همانطور که می بینید، چندین سری انباشته شده اند. اگر رنگ‌های سری مختلف را مشخص نکنید، همه رنگ‌ها یکسان خواهند بود (و نوارها روی هم به نظر نمی‌رسند). همچنین می توانید برای هر نوار در یک سری یک رنگ مشخص کنید.

Horizontal bar chart with two data sets: both are colored in blue
cht=bhs
chco=4D89F9


Horizontal bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue
cht=bhs
chco=4D89F9,C6D9FD
chd=t:10,50,60,80,40|
50,60,100,40,20
chds=0,160

bvs

نمودار میله ای عمودی با میله های انباشته.

این مثال دارای دو سری است و از قالب متن با مقیاس بندی سفارشی استفاده می کند تا اطمینان حاصل شود که تمام مقادیر انباشته به طور کامل قابل مشاهده هستند.

توجه داشته باشید که اگر خط صفر را در نمودار bvs با استفاده از پارامتر chp جابجا کنید، اگر میله ای کمتر از این مقدار باشد زیر خط صفر و اگر بزرگتر از این مقدار باشد بالای خط صفر نمایش داده می شود. .

Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue cht=bvs
chco=4D89F9,C6D9FD
chd=t:10,50,60,80,40|
50,60,100,40,20
chds=0,160

bvo نمودار میله‌ای عمودی که در آن میله‌ها در مقابل یکدیگر قرار می‌گیرند، نه روی هم. ارتفاع هر میله مقدار مجزای آن است، نه مقدار مجموع آن. میله ها بر اساس ارتفاع برای شما مرتب می شوند تا همه میله ها قابل مشاهده باشند.

bvo stacked chart
cht=bvo
chd=t:
10,50,60,80,40
50,60,100,40,20
30,30,75,20,60

bhg

نمودارهای میله ای افقی با میله های گروه بندی شده.

نمودار بالا از مقادیر پیش‌فرض فاصله گروهی استفاده می‌کند. نمودار پایینی از پارامتر chbh برای تغییر پهنای نوار پیش‌فرض و فاصله گروه‌ها برای واضح‌تر کردن گروه‌ها استفاده می‌کند.

Horizontal bar chart with two data sets: one data set is colored in dark blue the second is adjacent in pale blue
cht=bhg
chco=4D89D9,C6D9FD

Horizontal bar chart with two data sets: one data set is colored in dark blue the second is adjacent in pale blue
cht=bhg
chco=4D89D9,C6D9FD
chbh=15,4,15

bvg

نمودار میله ای عمودی با میله های گروه بندی شده.

Vertical bar chart with two data sets: one data set is colored in dark blue the second is adjacent in pale blue
cht=bvg
chco=4D89F9,C6D9FD
chbh=15,4,15

بازگشت به بالا

سری رنگ ها chco

با استفاده از پارامتر chco می توانید رنگ تک تک میله ها، سری های فردی یا چند سری را مشخص کنید. اگر برای هر سری رنگ متفاوتی را مشخص نکنید، همه سری ها یک رنگ خواهند بود.

نحو

chco=<series_1_color>, ..., <series_n_color>

    or

chco=<series_1_bar_1>|<series_1_bar_2>|...|<series_1_bar_n>,<series_2>,...,<series_n>
<color>
یک عدد هگزادسیمال با فرمت RRGGBB برای اعمال به یک نوار سری یا فردی. برای اعمال رنگ به کل سری، باید با کاما محدود شود. برای اعمال رنگ به یک نوار جداگانه، باید آن را با لوله مشخص کرد. می توانید این دو فرمت را با هم ترکیب کنید. برای نمونه به جدول زیر مراجعه کنید. هر زمان که مقادیر رنگ کمتری نسبت به نقاط داده یا سری داشته باشید، رنگ ها دوباره در لیست چرخه می شوند و از اولین رنگ در آن گروه شروع می شوند.

مثال ها

شرح مثال
یک رنگ در هر سری، با رنگ های محدود شده با کاما.

Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue

cht=bvs
chco=4D89F9,C6D9FD

یک رنگ به ازای هر مقدار، با رنگ‌های محدود شده با لوله.

Vertical bar chart with two data sets: one data set is colored in dark blue the second is stacked in pale blue

cht=bvs
chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE

ترکیبی از رنگ های سری و رنگ های نوار جداگانه.

این مثال نمودار میله ای را با دو سری نشان می دهد. سری اول تمام مشکی ( 000000, ) و با کاما محدود شده است. سری دوم به صورت لوله جدا شده است و رنگ متفاوتی را برای هر نقطه اختصاص می دهد ( FF0000|00FF00|0000FF ).

Horizontal bar chart with one data point in red, the second in green, and the third in blue

chco=000000,FF0000|00FF00|0000FF
chd=s:FOE,elo

این مثال تنظیم رنگ های مختلف برای هر نوار در نمودار چند سری را نشان می دهد. Horizontal bar chart with one data point in red, the second in green, and the third in blue
chco=
FF0000|00FF00|0000FF,FFC6A5|DEF3BD|C6EFF7
همچنین می توانید پرها را برای رنگ آمیزی یک سری با رنگ های یکدست، راه راه یا گرادیان مشخص کنید. پرهای جامد مانند استفاده از chco به نظر می رسند، اما راه راه ها یا گرادیان ها جلوه های منحصر به فردی ایجاد می کنند. Gradient bar fills
chd=
t:10,40,60,80,30,20
chf=
b0,lg,0,FFE7C6,0,76A4FB,1

striped fills
chd=t:
40,40,60,80
30,50,55,86
chf=
b0,ls,0,FFE7C6,.3,76A4FB,.1
b1,ls,0,FF0000,.3,FFBFBF,.1

بازگشت به بالا

برچسب های نوار

نمودارهای میله‌ای از برچسب‌های محور استاندارد پشتیبانی می‌کنند، اما برچسب‌ها در امتداد پایه میله‌ها به جای پخش شدن در امتداد نمودار میله‌ای، به میله‌های جداگانه اختصاص داده می‌شوند. (برای پخش یکنواخت برچسب ها، از پارامتر chxp همانطور که در زیر توضیح داده شده است استفاده کنید.) اگر برچسب های محور را مشخص کنید اما برچسب های سفارشی را در امتداد محور نوار مشخص نکنید، برچسب های نوار شماره شاخص هر نوار یا گروه میله ها خواهد بود. می توانید برچسب های محور را با استفاده از پارامتر chxl سفارشی کنید.

شرح مثال
نمودار میله ای با استفاده از برچسب های پیش فرض محور x. Bar chart without custom labels
chxt=x,y
نمودار میله ای با استفاده از برچسب های سفارشی محور x.

Bar chart without custom labels
chxt=x,y
chxl=0:|Jan|Feb|Mar|Apr|May

اگر تعداد برچسب‌ها و نوارهای متفاوتی دارید و می‌خواهید بین برچسب‌ها فاصله یکنواخت (به جای زیر هر نوار) ​​قرار دهید، از پارامتر chxp با نحو < axis_index >,0 استفاده کنید که در آن axis_index شاخص محوری است که باید برچسب‌گذاری شود، و 0 نشان می دهد که آنها باید به طور مساوی فاصله داشته باشند. (این به این دلیل است که یک 0 منفرد مکان اولین برچسب را نشان می دهد و هیچ مقدار دیگری نشان می دهد که برچسب ها باید بطور خودکار در سراسر محور قرار گیرند.)

  • نمودار بالا: سه برچسب نمودار به پنج میله اعمال می شود. برچسب ها در زیر سه میله اول تراز شده اند.
  • نمودار پایین: همان سه برچسب روی پنج میله اعمال می‌شود، اما chxp=0,0 باعث می‌شود که برچسب‌ها به طور مساوی در سراسر محور x قرار بگیرند (شاخص محور 0).

Bar chart without custom labels
chd=s:cEj9U
chxt=x,y
chxl=0:|2001|2002|2003


Bar chart without custom labels
chd=s:cEj9U
chxt=x,y
chxl=0:|2001|2002|2003
chxp=0,0

بازگشت به بالا

عرض و فاصله میله chbh

شما می توانید به صورت اختیاری مقادیر سفارشی را برای عرض نوار و فاصله بین نوارها و گروه ها مشخص کنید. شما فقط می توانید یک مجموعه از مقادیر عرض را برای همه نوارها مشخص کنید. اگر chbh مشخص نکنید، همه میله‌ها 23 پیکسل عرض خواهند داشت، به این معنی که اگر کل نوار + عرض فاصله بیشتر از عرض نمودار باشد، میله‌های انتهایی را می‌توان برش داد.

نحو

chbh=
  <bar_width_or_scale>,<space_between_bars>,<space_between_groups>
< bar_width_or_scale >
عرض نوار. با وارد کردن یکی از مقادیر زیر می توانید عرض و فاصله را به طور مطلق یا نسبی مشخص کنید. مقدار پیش فرض 23 پیکسل، مقدار مطلق است.
  • عرض - عرض نوار، بر حسب پیکسل. تمام مقادیر فاصله نیز مقادیر مطلق، بر حسب پیکسل هستند. اگر نمودار به اندازه کافی پهن نباشد، میله ها را می توان برش داد.
  • a - space_between_bars و space_between_groups در واحدهای مطلق (یا مقادیر مطلق پیش فرض، اگر مشخص نشده باشد) داده می شود. اندازه میله ها به گونه ای تغییر می کند که همه میله ها در نمودار قرار گیرند.
  • r - space_between_bars و space_between_groups در واحدهای نسبی (یا مقادیر نسبی پیش‌فرض، اگر مشخص نشده باشد) داده می‌شوند. دو برابر عرض میله است. اگر نمودار به اندازه کافی پهن نباشد، میله ها را می توان برش داد.
< space_between_bars >
[ اختیاری ] فاصله بین نوارها در همان گروه. اگر اندازه مطلق باشد، این عرض بر حسب پیکسل است. اگر اندازه نسبی است، این یک مقدار ممیز شناور است که در آن 1.0 عرض میله است. مقدار پیش فرض 4 پیکسل برای مقادیر مطلق یا 4/23 برای مقادیر نسبی است.
<فضای_بین_گروه ها>
[ اختیاری ] فاصله بین گروه های نوار در همان گروه. اگر اندازه مطلق باشد، این عرض بر حسب پیکسل است. اگر اندازه نسبی است، این یک مقدار ممیز شناور است که در آن 1.0 عرض میله است. مقدار پیش فرض 8 پیکسل برای مقادیر مطلق یا 8/23 برای مقادیر نسبی است.

شما نمی توانید پارامترهای اختیاری میانی را حذف کنید. شما باید با یک مقدار اعلام شده پایان دهید. به عنوان مثال: chbh=10,5,10 معتبر است, chbh=10,,10 نیست, chbh=10,5, نیست.

شرح مثال

این نمودار از مقدار a برای تغییر اندازه مقادیر به طور خودکار استفاده می کند.

نمودار اول هیچ فاصله گروهی را مشخص نمی کند، بنابراین گروه ها مشخص نیستند. نمودار دوم مقداری فاصله (15 پیکسل) بین گروه ها اضافه می کند.

Vertical grouped bar chart in blue and black, bars and spaces are automatically sized

chbh=a




chbh=a,5,15

این نمودار از مقدار r برای تعیین اندازه های نسبت به عرض میله استفاده می کند. در این نمودار، فاصله بین میله ها 0.5x عرض میله و بین گروه ها 1.5x عرض میله است.

Vertical grouped bar chart in blue and black, bars are automatically sized, spaces expressed as percentage of chart width

chbh=r,0.5,1.5

نمودار اول دارای پنج مقدار در هر سری است، اما نمودار آنقدر کوچک است که نمی تواند تمام میله های دارای مقادیر پیش فرض را در خود جای دهد:

10 * 23 پیکسل برای نوارها +
5 * 4 پیکسل برای فاصله +
4 * 8 پیکسل برای فاصله گروهی
282 پیکسل -- بیشتر از عرض نمودار 190 پیکسلی

...بنابراین برخی از میله ها بریده شده اند.

نمودار دوم مقادیر مطلق میله و فاصله را مشخص می کند تا با تمام میله های نمودار مطابقت داشته باشد.

Vertical grouped bar chart in blue and black, bars have the default width

chbh
حذف شده است
chs=190x125
دو سری، پنج مقدار/سری


Vertical grouped bar chart in blue and black, bars are automatically sized

chbh=10,5,10

بازگشت به بالا

خط صفر chp

می توانید با استفاده از پارامتر chp یا با استفاده از رمزگذاری متن با مقیاس داده، یک خط صفر سفارشی برای نمودار خود تعیین کنید. این خطوط صفر به دو روش مختلف کار می کنند:

  • مقیاس‌بندی داده - وقتی از داده‌های قالب متنی با پارامتر مقیاس‌گذاری chds استفاده می‌کنید، خط صفر را به اندازه‌ای که لازم است برای نشان دادن همه مقادیر منفی فشار می‌دهد.
  • پارامتر chp - همچنین می توانید با استفاده از پارامتر chp خط صفر را به صورت دستی، در هر قالب داده، به هر مکانی منتقل کنید. این در واقع یک خط صفر مصنوعی ایجاد می کند و میله ها را به عنوان تفاوت بین مقدار داده و مقدار صفر دلخواه شما دوباره ترسیم می کند (یعنی میله ها از خط صفر شما به مقدار نوار کشیده می شوند). این را نمی توان در ترکیب با chds استفاده کرد.

نحو

chp=
  <zero_value_series_1>,
   ...,
  <zero_value_series_n>
<zero_value_series_1 >
یک مقدار ممیز شناور از 0.0 تا 1.0، شامل، که در آن 0.0 پایین محور و 1.0 بالای محور است. میله‌ها برای نشان دادن تفاوت بین این و مقدارشان دوباره ترسیم می‌شوند.
شرح مثال

در اینجا سه ​​نسخه از نمودار میله ای با داده های یکسان وجود دارد:

  • اولین نمودار نموداری را نشان می دهد که هیچ خط صفر مشخصی ندارد.
  • دوم نمودار را با خط صفر 0.2 نشان می دهد، یا خط صفر 0.2 فاصله از محور y رانده می شود. توجه داشته باشید که مقدار 20 ناپدید شده است زیرا دقیقاً روی خط صفر جدید قرار دارد.
  • سوم نمودار را با خط صفر 0.5 نشان می دهد. اکنون مقدار 20 دوباره به عنوان یک مقدار منفی ظاهر شده است، همانطور که مقدار 40 (که کمتر از 50 است). این به این دلیل است که میله‌ها از محل خط صفر جدید به مقدار داده واقعی کشیده می‌شوند، بنابراین مقادیر کمتر از 50 در نمودار به سمت پایین می‌روند و مقادیر بیشتر از 50 به سمت بالا کشیده می‌شوند.

Vertical bar chart with zero line half way up the chart
chd=t:20,40,60,80,95
خط صفر مشخص نشده است.


Vertical bar chart with zero line half way up the chart
chd=t:20,40,60,80,95
chp=0.2


Vertical bar chart with zero line half way up the chart
chd=t:20,40,60,80,95
chp=0.5

این مثال تنظیم یک خط صفر را با استفاده از داده های قالب بندی شده متنی با مقیاس بندی سفارشی ( chds ) نشان می دهد. شما نمی توانید chds و chp با هم استفاده کنید.

این مثال دارای مقادیری از 60- تا 120 است. این مقیاس روی 80- تا 140 تنظیم شده است تا در بالا و زیر میله ها فاصله ایجاد شود.

Horizontal bar chart with two data sets: both are colored in red
chd=t:30,-60,50,120,80
chds=-80,140

بازگشت به بالا

نمودارهای مرکب

می توانید خطوط، شمعدان ها و نشانگرهای شکل را به نمودار میله ای اضافه کنید تا یک نمودار ترکیبی ایجاد کنید. برای جزئیات بیشتر به نمودارهای مرکب مراجعه کنید.

نشانگرها در نوارهای خاص (فقط cht=bvg )

به‌طور پیش‌فرض، وقتی یک نشانگر chm را روی یک نمودار عمودی گروه‌بندی شده ترسیم می‌کنید، نشانگر روی همان سری که داده‌های خود را از آن استخراج می‌کند، ترسیم می‌شود. اگر داده‌ها یک سری پنهان هستند، رفتار پیش‌فرض این است که نشانگر را روی گروه نوار قرار دهید.

با این حال، با نمودارهای میله ای گروه بندی شده عمودی (نوع bvg ) می توانید یک سری مکان متفاوت از سری داده های نشانگر را مشخص کنید. برای انجام این کار، پارامتر < series_index > (پارامتر سوم) را با استفاده از نحو زیر مشخص کنید: < data_series_index >:< placement_series_index > .

توجه داشته باشید که اگر یک سری مکان پنهان یا ناموجود را مشخص کنید، نشانگر به صورت افقی روی گروه قرار می گیرد.

بهترین راه برای استفاده از این ویژگی این است که از یک سری پنهان برای داده های نشانگر استفاده کنید و نشانگر را روی یک سری قابل مشاهده قرار دهید.

مثال‌های زیر رفتار پیش‌فرض را نشان می‌دهند که هم سری داده‌ها و هم سری‌های قرارگیری یکسان هستند، و هم نحو پیشرفته، که یک داده و سری مکان متفاوت را مشخص می‌کند.

سری داده های پنهان، قرار دادن نشانگر پیش فرض سری داده های پنهان، قرار دادن نشانگر پیشرفته

chd=t2: // First two series are visible
10,20,30,40,50 // Red bars
20,40,60,80,100 // Blue bars
20,20,20,20,20 // Hidden: black circle data
30,30,30,30,30 // Hidden: black square data
chm=
o,000000, 2 ,,10 // Circle markers
s,000000, 3 ,,10 // Square markers

در این مثال، نحو پایه مشخص می‌کند که داده‌های نشانگر و محل قرارگیری باید روی یک سری باشد. از آنجایی که این یک سری پنهان است، قرار دادن پیش فرض به صورت عمودی بر روی هر گروه متمرکز است.

chd=t2: // First two series are visible
10,20,30,40,50 // Red bars
20,40,60,80,100 // Blue bars
20,20,20,20,20 // Hidden: black circle data
30,30,30,30,30 // Hidden: black square data
chm=
o,000000, 2:0 ,,10 // Circle markers
o,000000, 3:1 ,,10 // Square markers

در این مثال، نحو پیشرفته، منبع داده و سری مکان‌های متفاوتی را برای نشانگرها مشخص می‌کند. حلقه ها از داده های سری 2 پنهان استفاده می کنند و در سری 0 قرار می گیرند. مربع ها از داده های سری 3 پنهان استفاده می کنند و در سری 1 قرار می گیرند.

مثال زیر نشان می دهد که چگونه می توان چندین نوع نشانگر مختلف را به نوارهای جداگانه در نمودار میله ای گروه بندی شده اضافه کرد. توجه داشته باشید که دایره سیاه چگونه در مرکز گروه ها قرار می گیرد، زیرا یک سری پنهان را به عنوان سری قرار دادن مشخص می کند.


chd=t4: // First four series are rendered as bars. Remaining data is hidden.
5,10,15,20,25,30 // Purple bar
10,20,30,40,50,60 // Blue bar
30,40,50,60,70,80 // Olive bar
5,5,5,5,5,5 // Black bar
0,15,25,30,45,55 // Hidden data: Purple circle, blue error bar start
15,30,40,45,55,65 // Hidden data: Blue error bar end
20,35,45,50,55,65 // Hidden data: Yellow error bar start
40,45,55,80,75,85 // Hidden data: Yellow error bar end
chm= // Markers:
o,D000D0,4:0,,10 // Purple circle: data series 4, placement series 0 (purple)
E,00D0D0,4:1,,1:10 // Blue error bars: data series 4, placement series 1 (blue)
E,D0D000,6:2,,1:10 // Yellow error bars: data series 6, placement series 2 (olive)
o,000000,3:4,,10 // Black circle: data series 3, placement 4 (hidden placement series, centered in group)

بازگشت به بالا

ویژگی های استاندارد

بقیه ویژگی های این صفحه ویژگی های نمودار تصویر استاندارد هستند.

عنوان نمودار chtt , chts [ همه نمودارها ]

می توانید متن عنوان، رنگ و اندازه قلم را برای نمودار خود مشخص کنید.

نحو

chtt=<chart_title>
chts=<color>,<font_size>,<opt_alignment>

chtt - عنوان نمودار را مشخص می کند.

< چارت_عنوان >
عنوانی که باید برای نمودار نشان داده شود. شما نمی توانید مشخص کنید که کجا ظاهر شود، اما می توانید به صورت اختیاری اندازه و رنگ فونت را مشخص کنید. برای نشان دادن فاصله ها از علامت + و برای نشان دادن شکستگی ها از کاراکتر لوله ( | ) استفاده کنید.

chts [ اختیاری ] - رنگ ها و اندازه قلم برای پارامتر chtt .

<رنگ >
رنگ عنوان، در قالب هگزادسیمال RRGGBB . رنگ پیش فرض مشکی است.
<font_size >
اندازه قلم عنوان، بر حسب امتیاز.
< opt_alignment >
[ اختیاری ] تراز عنوان. یکی از مقادیر رشته حساس به حروف بزرگ زیر را انتخاب کنید: "l" (چپ)، "c" (مرکز) "r" (راست). پیش فرض "c" است.

مثال ها

شرح مثال

نموداری با عنوان، با استفاده از رنگ و اندازه فونت پیش‌فرض.

یک فاصله با علامت مثبت ( + ) مشخص کنید.

از یک کاراکتر لوله ( | ) برای اجبار شکستن خط استفاده کنید.

chts در اینجا مشخص نشده است.

Vertical bar chart with title
chtt=Site+visitors+by+month|
January+to+July

نموداری با عنوان آبی، تراز راست، 20 نقطه‌ای.

Vertical bar chart with blue, 20 pixel, title
chtt=Site+visitors
chts=FF0000,20,r

بازگشت به بالا

متن و سبک افسانه نمودار chdl , chdlp , chdls [ همه نمودارها ]

افسانه یک بخش جانبی از نمودار است که شرح متنی کوچکی از هر سری ارائه می دهد. می توانید متن مربوط به هر سری را در این افسانه مشخص کنید و مشخص کنید که در کجای نمودار باید ظاهر شود.

همچنین chma مراجعه کنید تا یاد بگیرید که چگونه حاشیه ها را در اطراف افسانه خود تنظیم کنید.

نکته ای در مورد مقادیر رشته: فقط کاراکترهای ایمن URL در رشته های برچسب مجاز هستند. برای ایمن بودن، باید رشته‌های حاوی نویسه‌هایی را که در مجموعه کاراکتر 0-9a-zA-Z نیستند، URL-encode کنید. می‌توانید یک رمزگذار URL را در اسناد تجسم Google بیابید.

نحو

chdl=<data_series_1_label>|...|<data_series_n_label>
chdlp=<opt_position>|<opt_label_order>
chdls=<color>,<size>

chdl - متن هر سری، برای نمایش در افسانه.

< data_series_label >
متن برای ورودی های افسانه. هر برچسب برای سری مربوطه در آرایه chd اعمال می شود. از علامت + برای فاصله استفاده کنید. اگر این پارامتر را مشخص نکنید، نمودار یک افسانه دریافت نمی کند. هیچ راهی برای تعیین شکست خط در یک برچسب وجود ندارد. افسانه معمولاً برای نگه داشتن متن افسانه شما گسترش می یابد و ناحیه نمودار کوچک می شود تا افسانه را در خود جای دهد.

chdlp - [ اختیاری ] موقعیت افسانه و ترتیب ورودی های افسانه. می توانید < position > و/یا < label_order > را مشخص کنید. اگر هر دو را مشخص کردید، آنها را با یک کاراکتر نوار جدا کنید. اگر می‌خواهید ورودی‌های افسانه خالی در chdl در افسانه حذف شوند، می‌توانید یک 's' به هر مقدار اضافه کنید. مثال‌ها: chdlp=bv ، chdlp=r ، chdlp=bv|r ، chdlp=bvs|r

< opt_position >
[ اختیاری ] موقعیت افسانه را در نمودار مشخص می کند. برای تعیین بالشتک اضافی بین افسانه و ناحیه نمودار یا حاشیه تصویر، از پارامتر chma استفاده کنید. یکی از مقادیر زیر را انتخاب کنید:
  • b - افسانه در پایین نمودار، نوشته های افسانه در یک ردیف افقی.
  • bv - افسانه در پایین نمودار، ورودی های افسانه در یک ستون عمودی.
  • t - افسانه در بالای نمودار، ورودی های افسانه در یک ردیف افقی.
  • tv - افسانه در بالای نمودار، ورودی های افسانه در یک ستون عمودی.
  • r - [ پیش‌فرض ] افسانه در سمت راست نمودار، ورودی‌های افسانه در یک ستون عمودی.
  • l - افسانه در سمت چپ نمودار، ورودی های افسانه در یک ستون عمودی.
< opt_label_order >
[ اختیاری ] ترتیب نشان داده شدن برچسب ها در افسانه. یکی از مقادیر زیر را انتخاب کنید:
  • l - [ پیش‌فرض برای افسانه‌های عمودی ] برچسب‌ها را به ترتیبی که به chdl داده شده است نمایش دهید.
  • r - برچسب ها را به ترتیب معکوس مطابق با chdl نمایش دهید. این در نمودارهای میله ای انباشته برای نشان دادن افسانه مفید است
    به همان ترتیبی که میله ها ظاهر می شوند.
  • a - [ پیش‌فرض برای افسانه‌های افقی ] مرتب‌سازی خودکار: تقریباً به معنای مرتب‌سازی بر اساس طول، ابتدا کوتاه‌ترین، همانطور که در بلوک‌های 10 پیکسلی اندازه‌گیری می‌شود. هنگامی که دو عنصر دارای طول یکسان هستند (به بلوک های 10 پیکسلی تقسیم می شوند)، عنصری که ابتدا لیست شده است ابتدا ظاهر می شود.
  • 0,1,2... - سفارش لیبل سفارشی. این فهرستی از شاخص‌های برچسب مبتنی بر صفر از chdl است که با کاما از هم جدا شده‌اند.

chdls - [ اختیاری ] رنگ و اندازه قلم متن افسانه را مشخص می کند.

< رنگ >
رنگ متن افسانه، در قالب هگزادسیمال RRGGBB .
< اندازه >
اندازه نقطه متن افسانه.

مثال ها

شرح مثال

دو نمونه از افسانه ها متن افسانه را به همان ترتیب سری داده های خود مشخص کنید.

Red, blue, and green line chart with matching legends

chdl=NASDAQ|FTSE100|DOW
chco=FF0000,00FF00,0000FF

Venn diagram with two smaller circles enclosed by a larger circle


chdl=First|Second|Third
chco=ff0000,00ff00,0000ff

نمودار اول ورودی‌های افسانه افقی را نشان می‌دهد ( chdlp=t ، طرح‌بندی پیش‌فرض افقی است)، و نمودار دوم ورودی‌های افسانه عمودی پایین ( chdlp=bv ) را نشان می‌دهد.

Venn diagram with two smaller circles enclosed by a larger circle
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=t


Venn diagram with two smaller circles enclosed by a larger circle
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=bv

این مثال تغییر اندازه فونت را نشان می دهد.

Venn diagram with two smaller circles enclosed by a larger circle
chdls=0000CC,14

بازگشت به بالا

حاشیه های نمودار chma [ همه نمودارها ]

می توانید اندازه حاشیه های نمودار را بر حسب پیکسل مشخص کنید. حاشیه ها از اندازه نمودار مشخص شده ( chs ) به سمت داخل محاسبه می شوند. افزایش اندازه حاشیه، اندازه کل نمودار را افزایش نمی دهد، بلکه در صورت لزوم، منطقه نمودار را کوچک می کند.

حاشیه ها به طور پیش فرض هر چیزی است که پس از محاسبه اندازه نمودار باقی می ماند. این مقدار پیش فرض بسته به نوع نمودار متفاوت است. حاشیه هایی که شما مشخص می کنید حداقل مقدار هستند. اگر ناحیه نمودار جایی برای حاشیه باقی بگذارد، اندازه حاشیه همان چیزی است که باقی مانده است. شما نمی توانید حاشیه ها را کوچکتر از آنچه برای هر افسانه و برچسب لازم است فشار دهید. در اینجا نموداری وجود دارد که بخش های اصلی یک نمودار را نشان می دهد:

حاشیه نمودار، ناحیه افسانه و ناحیه نمودار

حاشیه های نمودار شامل برچسب های محور و ناحیه افسانه است. اندازه ناحیه افسانه به طور خودکار تغییر می‌کند تا دقیقاً با متن مطابقت داشته باشد، مگر اینکه با استفاده از chma عرض بزرگ‌تری را مشخص کنید، در این صورت اندازه حاشیه را گسترده‌تر می‌کند و ناحیه نمودار را کوچک‌تر می‌کند. شما نمی توانید یک افسانه را با تعیین اندازه بسیار کوچک برش دهید، اما می توانید کاری کنید که فضای بیشتری از آنچه نیاز دارد اشغال کند.

نکته: در نمودار میله‌ای، اگر میله‌ها اندازه ثابتی داشته باشند (پیش‌فرض)، پهنای ناحیه نمودار را نمی‌توان کاهش داد. شما باید اندازه نوار کوچکتر یا قابل تغییر اندازه را با استفاده از chbh مشخص کنید.

نحو

chma=
  <left_margin>,<right_margin>,<top_margin>,<bottom_margin>|<opt_legend_width>,<opt_legend_height>
< margin_left >، < right_margin >، < top_margin >، < bottom_margin >
حداقل اندازه حاشیه در اطراف منطقه نمودار، بر حسب پیکسل. برای جلوگیری از برخورد برچسب‌های محور با مرزهای نمودار، این مقدار را افزایش دهید تا مقداری بالشتک اضافه شود.
< opt_legend_width >، < opt_legend_height >
[ اختیاری ] عرض حاشیه اطراف افسانه، بر حسب پیکسل. از این برای جلوگیری از برخورد افسانه در ناحیه نمودار یا لبه های تصویر استفاده کنید.

مثال ها

شرح مثال

در این مثال، نمودار دارای حداقل حاشیه 30 پیکسل در هر طرف است. از آنجایی که پهنای افسانه نمودار بیش از 30 پیکسل است، حاشیه سمت راست به عرض نمودار نمودار تنظیم می شود و با حاشیه های دیگر متفاوت است.

برچسب های محور خارج از منطقه طرح هستند و بنابراین در فضای حاشیه ترسیم می شوند.

Line chart with gray background and margins on each side.
chma=30,30,30,30

برای اضافه کردن حاشیه در اطراف افسانه، مقداری را برای پارامترهای < opt_legend_width > و < opt_legend_height > تنظیم کنید.

در این مثال، پهنای افسانه تقریباً 60 پیکسل است. اگر < opt_legend_width > روی 80 پیکسل تنظیم کنید، حاشیه به 20 پیکسل در خارج از افسانه افزایش می یابد.

Line chart with gray background and margins on each side.
chma=20,20,20,30|80,20

بازگشت به بالا

سبک‌ها و برچسب‌های محور [ خط، نوار، Google-o-meter، Radar، Scatter ]

می توانید مشخص کنید که کدام محورها در نمودار نمایش داده شوند و به آنها برچسب ها و موقعیت ها، محدوده ها و سبک های سفارشی بدهید.

همه نمودارها خطوط محور را به طور پیش فرض نشان نمی دهند. با استفاده از پارامتر chxt می توانید دقیقا مشخص کنید که نمودار شما چه محورهایی را نشان دهد. خطوط محور پیش فرض اعداد را نشان نمی دهند. برای نمایش اعداد باید یک محور در پارامتر chxt مشخص کنید.

می‌توانید انتخاب کنید که محورهای شما اعدادی را نشان دهند که مقادیر داده‌ها را منعکس می‌کنند، یا می‌توانید محورهای سفارشی را مشخص کنید. پیش‌فرض نمایش مقادیر عددی است، با مقادیری که از 0 تا 100 مقیاس شده‌اند. با این حال، می‌توانید آن محدوده را با استفاده از chxr برای نمایش هر محدوده تغییر دهید، و می‌توانید مقادیر (مثلاً برای نشان دادن نمادهای ارز یا اعشار) با استفاده از chxs استایل دهید.

اگر انتخاب می کنید از مقادیر سفارشی استفاده کنید، به عنوان مثال: "Mon, Tues, Wed"، می توانید از پارامتر chxl استفاده کنید. برای قرار دادن این برچسب ها در مکان های خاص در امتداد محور، از پارامتر chxp استفاده کنید.

در نهایت، می‌توانید از پارامترهای chxs و chxtc برای تعیین رنگ، اندازه، تراز و سایر ویژگی‌های برچسب‌های محور سفارشی و عددی استفاده کنید.

نکته ای در مورد مقادیر رشته: فقط کاراکترهای ایمن URL در رشته های برچسب مجاز هستند. برای ایمن بودن، باید رشته‌های حاوی نویسه‌هایی را که در مجموعه کاراکتر 0-9a-zA-Z نیستند، URL-encode کنید. می‌توانید یک رمزگذار URL را در اسناد تجسم Google بیابید.

این بخش موضوعات زیر را پوشش می دهد:


محورهای قابل مشاهده chxt

نمودارهای میله ای، خطی، رادار و پراکنده به طور پیش فرض یک یا دو خط محور را نشان می دهند، اما این خطوط شامل مقادیر نمی شوند. برای نمایش مقادیر در خطوط محور خود، یا برای تغییر اینکه کدام محور نشان داده می شود، باید از پارامتر chxt استفاده کنید. به‌طور پیش‌فرض، مقادیر محورها از 0 تا 100 متغیر است، مگر اینکه آنها را به‌صراحت با استفاده از ویژگی chxr مقیاس کنید. برای پنهان کردن تمام خطوط محور در نمودار خطی، :nda بعد از مقدار نوع نمودار در پارامتر cht مشخص کنید (مثال: cht= lc:nda ).

به طور پیش‌فرض، محورهای بالا و پایین علامت‌های تیک را با مقادیر نشان نمی‌دهند، در حالی که محورهای چپ و راست آن‌ها را نشان می‌دهند. می توانید این رفتار را با استفاده از پارامتر chxs تغییر دهید.

نحو

chxt=
  <axis_1>
    ,...,
  <axis_n>
< محور >
محوری برای نشان دادن در نمودار. محورهای موجود عبارتند از:
  • x - محور x پایین
  • t - محور x بالا [ توسط Google-o-Meter پشتیبانی نمی‌شود ]
  • y - محور y چپ
  • r - محور y راست [ توسط Google-o-Meter پشتیبانی نمی‌شود ]

می توانید چندین محور از یک نوع را مشخص کنید، به عنوان مثال: cht=x,x,y . با این کار دو مجموعه از محورهای x در امتداد پایین نمودار قرار می گیرند. این هنگام افزودن برچسب های سفارشی در امتداد محوری که مقادیر عددی را نشان می دهد مفید است (به مثال زیر مراجعه کنید). محورها از داخل به بیرون کشیده می شوند، بنابراین اگر x,x دارید، x اول به درونی ترین کپی، x بعدی به کپی رو به بیرون بعدی اشاره دارد و غیره.

مثال ها

شرح مثال

این مثال نمودار خطی را با محور x، محور y، محور بالا (t) و محور راست (r) نشان می‌دهد.

از آنجایی که هیچ برچسبی مشخص نشده است، نمودار به طور پیش فرض محدوده 0 تا 100 را برای همه محورها تعیین می کند.

توجه داشته باشید که به‌طور پیش‌فرض، محورهای بالا و پایین علامت‌های تیک را روی برچسب‌ها نشان نمی‌دهند.

Line chart with the labels: 0, 20, 40, 60, 80, and 100 on the left and right and labels: 0, 25, 50, 75, and 100 above and below
chxt=x,y,r,t

می‌توانید چندین مجموعه از برچسب‌ها را برای هر محور با اضافه کردن یک مقدار بیش از یک بار اضافه کنید. این مثال دو مجموعه x و دو مجموعه محور y را نشان می دهد. این به ویژه هنگام استفاده از برچسب های محور پیش فرض، همانطور که در اینجا نشان داده شده است، مفید نیست. اما با استفاده از پارامتر chxl می‌توانید برچسب‌های سفارشی را برای هر کپی از هر محور مشخص کنید.

chxt=x,x,y,y


chxt=x,x,y,y
chxl=
1:|یخ زدن|گرم|
3:|کم|بالا

این مثال نمودار میله‌ای افقی را با محور x، محور y، محور t بالا و محور راست نشان می‌دهد.

برچسب‌های محور حذف شده‌اند، بنابراین نمودار API محدوده 0 تا 100 را برای محور x و برای محور t نمایش می‌دهد.

محدوده برای محور y و برای محور r با تعداد میله ها تعیین می شود. در این مورد، پنج نوار وجود دارد، بنابراین Chart API محدوده 0 تا 4 را نمایش می دهد. برچسب اول در مرکز میله اول، برچسب دوم در مرکز پایه نوار دوم و غیره قرار دارد. .

Line chart with the labels: 0, 20, 40, 60, 80, and 100 on the left and right and labels: 0, 25, 50, 75, and 100 above and below
chxt=x,y,r,t

می توانید محورهای پیش فرض را در نمودار خطی با تعیین :nda بعد از نوع نمودار سرکوب کنید. Line chart with hidden axes
cht=lc:nda

بازگشت به بالا

Axis Range chxr

با استفاده از پارامتر chxr می توانید محدوده مقادیری را که در هر محور به طور مستقل ظاهر می شوند مشخص کنید. توجه داشته باشید که این کار مقیاس عناصر نمودار را تغییر نمی دهد، فقط مقیاس برچسب های محور را تغییر می دهد. اگر می‌خواهید اعداد محورها مقادیر واقعی داده‌ها را توصیف کنند، < start_val > و < end_val > را به ترتیب روی مقادیر پایین‌تر و بالای محدوده قالب داده‌تان تنظیم کنید. برای اطلاعات بیشتر به Axis Scaling مراجعه کنید.

اگر می خواهید محدوده آن را مشخص کنید، باید با استفاده از پارامتر chxt یک محور را قابل مشاهده کنید.

برای تعیین مقادیر محور سفارشی، از پارامتر chxl استفاده کنید.

نحو

محدوده های برچسب چند محور را با استفاده از کاراکتر لوله ( | ) جدا کنید.

chxr=
  <axis_index>,<start_val>,<end_val>,<opt_step>
    |...|
  <axis_index>,<start_val>,<end_val>,<opt_step>
<axis_index >
برچسب ها را روی کدام محور اعمال کنیم. این یک شاخص مبتنی بر صفر در آرایه محوری است که توسط chxt مشخص شده است. به عنوان مثال، محور r در chxt=x,r,y 1 خواهد بود.
< start_val >
عددی که مقدار کم را برای این محور تعریف می کند.
< end_val >
عددی که مقدار بالایی را برای این محور تعیین می کند.
< opt_step >
[ اختیاری ] مرحله شمارش بین تیک ها روی محور. هیچ مقدار مرحله پیش فرض وجود ندارد. این مرحله برای نشان دادن مجموعه ای از برچسب ها با فاصله خوب محاسبه می شود.

مثال ها

شرح مثال

این مثال محورهای y چپ و راست ( y و r ) و یک محور x ( x ) را نشان می دهد.

هر محور یک محدوده تعریف شده دارد. از آنجایی که هیچ برچسب یا موقعیتی مشخص نشده است، مقادیر از محدوده داده شده گرفته می شوند و به طور مساوی در آن محدوده قرار می گیرند. در نمودار خطی، مقادیر به طور مساوی در امتداد محور x پخش می شوند.

جهت محور برای محور r معکوس می شود (شاخص 2 )، زیرا اولین مقدار ( 1000 ) بزرگتر از آخرین مقدار ( 0 ) است.


chxt=x,y,r
chxr=
0,0,500|
1,0,200|
2,1000,0

در این مثال مقادیری برای محور x مشخص شده است.

برچسب های محور به طور مساوی در امتداد محور قرار گرفته اند. مقدار پنج ( 5 ) برای پارامتر < opt_step > مشخص شده است.

Bar chart with 200, 300, and 400 on the x-axis chxt=x
chxr=0,10,50,5

بازگشت به بالا

برچسب های محور سفارشی chxl

با استفاده از پارامتر chxl می‌توانید برچسب‌های محور رشته‌ای سفارشی را در هر محوری مشخص کنید. می توانید هر تعداد برچسب را که دوست دارید مشخص کنید. اگر یک محور را نمایش دهید (با استفاده از پارامتر chxt ) و برچسب های سفارشی را مشخص نکنید، برچسب های استاندارد و عددی اعمال می شوند. برای تعیین محدوده عددی سفارشی، به جای آن از پارامتر chxr استفاده کنید.

To set specific locations along the axis for your labels, use the chxp parameter.

نحو

Specify one parameter set for each axis that you want to label. Separate multiple sets of labels using the pipe character ( | ).

chxl=
  <axis_index>:|<label_1>|...|<label_n>
    |...|
  <axis_index>:|<label_1>|...|<label_n>
<axis_index >
Which axis to apply labels to. This is an index into the chxt parameter array. For example, if you have chxt=x,x,y,y then index 0 would be the first x-axis, 1 would be the second x-axis.
<label_1> | ... |< label_n >
One or more labels to place along this axis. These can be string or number values; strings do not need to be in quotes. label_1 is displayed at the lowest position on the axis, and label_n is displayed at the highest position. Additional labels are spaced evenly between them. Indicate spaces with a + mark. There is no way to specify a line break in a label. Separate labels with a pipe character. Note: Do not place a pipe after the final label in the chxl parameter.

مثال ها

شرح مثال

This chart shows how to add custom labels to two axes. Note how the values are evenly spaced, and how the last chxl value does not end with a pipe.

Line chart with 0 and 100 on the left, A, B, and C on the right, Jan,July, Jan, July, and Jan on the x-axis and 2005, 2006 and 2007 below
chxt=x,y
chxl=
0:|Jan|Feb|March|April|May|
1:|Min|Mid|Max

This example includes axis labels on the left and right y-axes ( y and r ). It also includes two sets of values for the x-axis ( x ). You could consider adding tick marks on the y-axis using chxs .

Line chart with 0 and 100 on the left, A, B, and C on the right, Jan,July, Jan, July, and Jan on the x-axis and 2005, 2006 and 2007 below
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
1:|0|50|100|
2:|A|B|C|
3:|2005|2006|2007

This example includes axis labels on the left and right y-axes ( y and r ). It also includes two sets of values for the x-axis ( x ). Note the empty labels for the lower x-axis set, used to space the values apart.

This example uses default values for the axis labels on the left y-axis.

Bar chart with 0 and 100 on the left, A, B, and C on the right, Jan, July,Jan, July, and Jan on the x-axis and 2005, 2006 and 2007 below
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
2:|A|B|C|
3:|2005||2006||2007

If you want to add a generic label to describe a whole axis (for example, to label one axis "cost" and another "student"), use the chxt property to add an additional axis on each side, then use chxl to add a single custom label to each side, and chxp to space it in the middle of the axis.


chxt=x,x,y,y
chxl=1:|Martinis|3:|Score
chxp=1,50|3,50

بازگشت به بالا

Axis Label Positions chxp

You can specify which axis labels to show, whether using the default labels or custom labels specified using chxl . If you do not specify exact positions using this parameter, labels will be spaced evenly and at a default step value along the axes. If you do not specify chxl , then the tick mark labels will be the default values (typically data values, or the bar numbers in bar charts).

نحو

Separate multiple positioning sets using the pipe character ( | ).

chxp=
  <axis_1_index>,<label_1_position>,...,<label_n_position>
    |...|
  <axis_m_index>,<label_1_position>,...,<label_n_position>
<axis_index >
The axis for which you are specifying positions. This is an index into the chxt parameter array. For example, if you have chxt=x,x,y,y then index 0 would be the first x-axis, 1 would be the second x-axis, and so on.
< label_1_position >,...,< label_n_position >
The position of the label along the axis. This is a comma-separated list of numeric values, where each value sets the position of the corresponding label in the chxl array: the first entry applies to the first label, and so on. The position is a value in the range for that axis . Note that this will always be 0—100 unless you have specified a custom range using chxr . You must have as many positions as you have labels for that axis.

مثال ها

شرح مثال

This example includes r-axis labels at specified positions on the chart. The label text is specified using the chxl parameter.

Labels with a specified position of 0 are placed at the bottom of the y- or r-axis, or at the left of the x- or t-axis.

Labels with a specified position of 100 are placed at the top of the y- or r-axis, or at the right of the x- or t-axis.

Line chart with min, average, and max on the right, 20, 40, 60, 80, and 100 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y,r
chxl=2:|min|average|max
chxp=2,10,35,75

This example demonstrates showing the default label values, but only at specified locations.

chxp=1,10,35,75 - The y-axis should show only three labels: 10, 35, and 75. Because no custom label text is specified, these axis values are shown. Note how you don't have to space labels evenly apart when you use chxp . If chxp had not been specified here, the default label value distance on the y-axis would be every 20 units, as shown in the second graph.

Line chart with 10, 35, and 75 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y
chxp=1,10,35,75

Line chart with default axis positions.
chxt=x,y
chxp not specified

بازگشت به بالا

Axis Label Styles chxs

You can specify the font size, color, and alignment for axis labels, both custom labels and default label values. All labels on the same axis have the same format. If you have multiple copies of an axis, you can format each one differently. You can also specify the format of a label string, for example to show currency symbols or trailing zeroes.

By default, the top and bottom axes do not show tick marks by the values, while the left and right axes do show them.

نحو

Values for multiple axes should be separated using a pipe character ( | ).

chxs=
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
   |...|
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
< axis_index >
The axis to which this applies. This is a zero-based index into the chxt parameter.
< opt_format_string >
[ Optional ] This is an optional format string that, if used, follows immediately after the axis index number without an intervening comma. It starts with a literal letter N followed by the following values, all optional: The formatting string syntax is as follows:
N< preceding_text >*< number_type >< decimal_places >zs< x or y >*< following_text >
Here is the meaning of each element:
  • <preceding_text> - Literal text to precede each value.
  • *...* - An optional block wrapped in literal asterisks, in which you can specify formatting details for numbers. The following values are supported, and are all optional:
    • <number_type> - The number format, for numeric values. Choose one of the following:
      • f - [ Default ] Floating point format. Consider specifying precision as well with the < decimal_places > value.
      • p - Percentage format. A % sign is appended automatically. Note: When using this format, data values from 0.0 — 1.0 map to 0 — 100% (for example, 0.43 will be shown as 43%).
      • e - Scientific notation format.
      • c< CUR > - Format the number in the currency specified, with the appropriate currency marker. Replace < CUR > with a three-letter currency code. Example: cEUR for Euros. You can find a list of codes on the ISO web site , although not all symbols are supported.
    • <decimal_places> - An integer specifying how many decimal places to show. The value is rounded (not truncated) to this length. Default is 2.
    • z - Display trailing zeros. Default is no .
    • s - Display group separators. Default is no .
    • x or y -Display the data from the x- or y-coordinate, as specified. The meaning of x data varies by chart type: experiment with your chart to determine what it means. Default is 'y' .
  • < following_text > - Literal text to follow each value.
< opt_label_color >
The color to apply to the axis text (but not axis line), in RRGGBB hexadecimal format . Axis line color is specified separately using opt_axis_color . Default is gray.
< opt_font_size >
[ Optional ] specifies the font size in pixels. This parameter is optional.
< opt_alignment >
[ Optional ] Label alignment. For top or bottom axes, this describes how the label aligns to the tick mark above or below it; for left or right axes, this describes how the aligns inside its bounding box, which touches the axis. Specify one of the following numbers:
  • -1 - Top or bottom : labels are to the right of the ticks; Left or right : labels are left-aligned in their area. Default for r-axis labels.
  • 0 - Top or bottom : labels are centered on the ticks; Left or right : labels are centered in their area. Default for x- and t-axis labels.
  • 1 - Top or bottom : labels are to the left of the ticks; Left or right : labels are right-aligned in their area. Default for y-axis labels.
< opt_axis_or_tick >
[ Optional; not supported in Google-o-meter ] Whether to show tick marks and/or axis lines for this axis. Tick marks and axis lines are only available for innermost axes (for example, they are not supported for the outer of two x-axes). Use one of the following values:
  • l (lowercase 'L') - Draw axis line only.
  • t - Draw tick marks only. Tick marks are the little lines next to axis labels.
  • lt - [ Default ] Draw both an axis line and tick marks for all labels.
  • _ - (Underscore) Draw neither axis line nor tick marks. If you want to hide an axis line, use this value.
< tick_color >
[ Optional ; not supported in Google-o-meter ] The tick mark color, in RRGGBB hexadecimal format . Default is gray.
< opt_axis_color >
[ Optional ] The color of this axis line, in RRGGBB hexadecimal format . Default is gray.

مثال ها

شرح مثال

Font size and color are specified for the second x-axis (Jan, Feb, Mar).

Line chart with min, average, and max on the left, 0, 1, 2, 3, and 4 on the right, 0 to 100 along the x-axis and Jan, Feb, and Mar in blue below

chxt=x,y,r,x
chxr=2,0,4
chxl=3:|Jan|Feb|Mar|
1:|min|average|max
chxp=1,10,35,75
chxs=3,0000DD,13,0,t

Font size, color, and alignment are specified for the right y-axis. Tick marks, but no axis line, are drawn.

Line chart with 0 to 100 along the x-axis, Jan, Feb, Mar below, 0 to 4 on the y-axis, and red tickmarks with blue text for min, average and max on the right.

chxt=x,y,r,x
chxl=3:|Jan|Feb|Mar|
2:|min|average|max
chxp=2,10,35,95
chxs=2,0000DD,13,-1,t,FF0000

This chart includes three data sets, and shows three sets of axis labels, one per series. Each set of labels is formatted using a custom formatting string, as described here:

  • 0N*e,000000|
    • 0 means the first data series
    • N means a formatting string
    • * means the start of the format specifiers
    • e means scientific notation
    • * means the end of the format specifiers
    • 000000 means black text.
  • 1N*cUSD*Mil,FF0000|
    • 1 means the second series
    • N means a formatting string
    • * means the start of the format specifiers
    • c means a currency marker
    • USD specifies the US dollar as the currency marker to use
    • * means the end of the format specifiers
    • Mil is a literal following string
    • FF0000 means red text.
  • 2N*sz2*,0000FF
    • 2 means the third series
    • N means a formatting string
    • * means the start of the format specifiers
    • s means to show grouping specifiers (in US English locale, that is a comma every three zeroes)
    • z2 means show two trailing zeroes
    • 0000FF means blue text.

The axis label ranges are set using the chxr parameter ( axis_index , start , end , step ). If not set, they would have been 0—100 by default.


chd=s:
984sttvuvkQIBLKNCAIi,
DEJPgq0uov17zwopQODS,
AFLPTXaflptx159gsDrn
chxr=
0,0,1000000,250000|
1,0,60|
2,0,5000
chxs=
0N*e,000000|
1N*cUSD*Mil,FF0000|
2N*sz2*,0000FF

بازگشت به بالا

Axis Tick Mark Styles chxtc

You can specify long tick marks for specific axes. Typically this is used to extend a tick mark across the length of a chart. Use the chxs parameter to change the tick mark color.

Values for multiple axes should be separated using a pipe character ( | ). Values within a series should be separated by a comma.

نحو

chxtc=
  <axis_index_1>,<tick_length_1>,...,<tick_length_n>
    |...|
  <axis_index_m>,<tick_length_1>,...,<tick_length_n>
< axis_index >
The axis to which this applies. This is a zero-based index into the chxt parameter. Separate values for different axes using a bar delimiter.
< tick_length_1 >,...,< tick_length_n >
Length of the tick marks on that axis, in pixels. If a single value is given, it will apply to all values; if more than one value is given, the axis tick marks will cycle through the list of values for that axis. Positive values are drawn outside the chart area and cropped by the chart borders. The maximum positive value is 25. Negative values are drawn inside the chart area and cropped by the chart area borders.

مثال ها

شرح مثال

Example of using chxtc to create long red tick marks. The tick mark length here exceeds the chart area width, but is cropped to fit within the chart.

  • chxt=x,y,r,x - Show a left axis, a right axis, and two bottom axes.
  • chxl =2:|min|average|max|3:|Jan|Feb|Mar - The label text assigned to the 'r' (right side) and outer x-axes.
  • chxp =2,10,35,95 - Custom label positions along the r-axis (index=2) for the three labels.
  • chxs=2,0000dd,13,-1,t,FF0000 - Axis label styles for the r-axis: text color, text size, left-aligned, with red tick marks.
  • chxtc=1,10|2,-180 - Axis tick lengths for the y- and r-axes. The first value specifies 10-pixel-long ticks, outside the axis. The second value specifies 180-pixel-long ticks inside the axis; the negative number means that the tick goes inside the axis, and the tick is cropped to fit inside the chart.

Line chart with 0 to 100 along the x-axis, Jan, Feb, Mar below, 0 to 4 on the y-axis, and long red tickmarks with blue text for min, average and max on the right.

chxt=x,y,r,x
chxl=
2:|min|average|max|
3:|Jan|Feb|Mar
chxp=2,10,35,95
chxs=
2,0000dd,13,-1,t,FF0000
chxtc=1,10|2,-180

This chart demonstrates alternating tick lengths. chxtc specifies two tick length values for the y-axis (5 and 15), and the ticks drawn on the chart alternate between the two values.
chxt=x,y
chxtc=
1,5,15

بازگشت به بالا

Background Fills chf [ All charts ]

You can specify fill colors and styles for the chart data area and/or the whole chart background. Fill types include solid fills, striped fills, and gradients. You can specify different fills for different areas (for example, the whole chart area, or just the data area). The chart area fill overwrites the background fill. All fills are specified using the chf parameter, and you can mix different fill types (solids, stripes, gradients) in the same chart by separating values with pipe character ( | ). Chart area fills overwrite chart background fills.

Solid Fills chf [ All Charts ]

You can specify a solid fill for the background and/or chart area, or assign a transparency value to the whole chart. You can specify multiple fills using the pipe character ( | ). (Maps: background only).

نحو

chf=<fill_type>,s,<color>|...
< fill_type >
The part of the chart being filled. Specify one of the following values:
  • bg - Background fill
  • c - Chart area fill. Not supported for map charts.
  • a - Make the whole chart (including backgrounds) transparent. The first six digits of < color > are ignored, and only the last two (the transparency value) are applied to the whole chart and all fills.
  • b <index> - Bar solid fills (bar charts only). Replace < index > with the series index of the bars to fill with a solid color. The effect is similar to specifying chco in a bar chart. See Bar Chart Series Colors for an example.
س
Indicates a solid or transparency fill.
< color >
The fill color, in RRGGBB hexadecimal format . For transparencies, the first six digits are ignored, but must be included anyway.

مثال ها

شرح مثال

This example fills the chart background with pale gray ( EFEFEF ).

Red line chart with black area fill.

chf=bg,s,EFEFEF

This example fills the chart background with pale gray ( EFEFEF ) and fills the chart area in black ( 000000 ).

Red line chart with black chart area and pale gray background.

chf=c,s,000000|
bg,s,EFEFEF

This example applies a 50% transparency to the whole chart (80 in hexadecimal is 128, or about 50% transparency). Notice the table cell background showing through the chart.

Scatter plot with points in blue, and a 50% transparency.

chf=a,s,00000080

بازگشت به بالا

Gradient Fills chf [ Line, Bar, Google-o-meter, Radar, Scatter,Venn ]

می‌توانید یک یا چند پرکننده گرادیان را برای مناطق یا پس‌زمینه نمودار اعمال کنید. Gradient fills are fades from a one color to another color. (Pie, Google-o-meter charts: background only.)

Each gradient fill specifies an angle, and then two or more colors anchored to a specified location. The color varies as it moves from one anchor to another. You must have at least two colors with different < color_centerpoint > values, so that one can fade into the other. Each additional gradient is specified by a < color >,< color_centerpoint > pair.

نحو

chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1>
    ,...,
  <color_n>,<color_centerpoint_n>
< fill_type >
The chart area to fill. یکی از موارد زیر:
  • bg - Background fill
  • c - Chart area fill.
  • b <index> - Bar gradient fills (bar charts only). Replace < index > with the series index of the bars to fill with a gradient. See Bar Chart Series Colors for an example.
lg
Specifies a gradient fill.
< angle >
A number specifying the angle of the gradient from 0 (horizontal) to 90 (vertical).
< color >
The color of the fill, in RRGGBB hexadecimal format .
< color_centerpoint >
Specifies the anchor point for the color. The color will start to fade from this point as it approaches another anchor. The value range is from 0.0 (bottom or left edge) to 1.0 (top or right edge), tilted at the angle specified by < angle >.

مثال ها

شرح مثال

Chart area has a horizontal linear gradient, specified with an angle of zero degrees ( 0 ).

The colors are peach ( FFE7C6 ), centered on the left side (position 0.0 ) and blue ( 76A4FB ) centered on the right side (position 1.0 ).

The chart background is drawn in gray ( EFEFEF ).

Dark gray line chart with pale gray background and chart area in a white to blue linear gradient from left to right

chf=
c,lg,0,
FFE7C6,0,
(peach)
76A4FB,1
(blue)

Chart area has a diagonal (bottom left to top right) linear gradient, specified with an angle of forty-five degrees ( 45 ).

Peach ( FFE7C6 ) is the first color specified. The bottom left of the chart is pure peach.

Blue ( 6A4FB ) is the second color specified. The top right of the chart is pure blue. Note how we specify an offset of 0.75, to provide a peak of blue that fades away towards the top right corner.

The chart background is drawn in gray ( EFEFEF ).

Dark gray line chart with pale gray background and chart area in a white to blue diagonal linear gradient from bottom left to top right

chf=
c,lg,45,
FFE7C6,0,
(peach)
76A4FB,0.75
(blue)

Chart area has a vertical (top to bottom) linear gradient, specified with an angle of ninety degrees ( 90 ).

Blue ( 76A4FB ) is the first color specified. The top of the chart is pure blue.

Peach ( FFE7C6 ) is the second color specified. The bottom of the chart is pure peach.

The chart background is drawn in gray ( EFEFEF ).

Dark gray line chart with pale gray background and chart area in a white to blue vertical linear gradient from bottom to top

chf=
c,lg,90,
FFE7C6,0,
(peach)
76A4FB,0.5
(blue)

بازگشت به بالا

Striped fills chf [ Line, Bar, Google-o-meter, Radar, Scatter, Venn ]

You can specify a striped background fill for your chart area, or the whole chart. (Pie, Google-o-meter charts: background only.)

نحو

chf=
  <fill_type>,ls,<angle>,<color_1>,<width_1>
    ,...,
  <color_n>,<width_n>
< fill_type >
The chart area to fill. یکی از موارد زیر:
  • bg - Background fill
  • c - Chart area fill
  • b <index> - Bar striped fills (bar charts only). Replace < index > with the series index of the bars to fill with stripes. See Bar Chart Series Colors for an example.
ls
Specifies linear stripe fill.
< angle >
The angle of all stripes, relative to the y-axis. Use 0 for vertical stripes or 90 for horizontal stripes.
< color >
The color for this stripe, in RRGGBB hexadecimal format . Repeat < color > and < width > for each additional stripe. You must have at least two stripes. Stripes alternate until the chart is filled.
< width >
The width of this stripe, from 0 to 1 , where 1 is the full width of the chart. Stripes are repeated until the chart is filled. Repeat < color > and < width > for each additional stripe. You must have at least two stripes. Stripes alternate until the chart is filled.

مثال ها

شرح مثال
  • bg,ls,0 - Background stripe fill with stripes at a zero degree angle to the y-axis (parallel to the y-axis). The stripes fill the chart background as well as the plot area.
  • CCCCCC,0.15 - The first stripe is dark gray, 15% as wide as the chart.
  • FFFFFF,0.1 - The second stripe is white, 10% as wide as the chart.
Blue line chart with alternating gray and white stripes from left to right
chf=
bg,ls,0,
CCCCCC,0.15,
FFFFFF,0.1
  • c,ls,90 - Chart area with horizontal stripes at an angle of ninety degrees from the y-axis. The stripes fill the plot area, but the chart background is omitted.
  • 999999,0.25 - The first stripe is dark gray, 25% as wide as the chart.
  • CCCCCC,0.25 - Same as the first stripe, but a lighter gray.
  • FFFFFF,0.25 - Same as the first stripe, but white.
Blue line chart with a dark gray, pale gray, white and dark gray stripes from bottom to top
chf=
c,ls,90,
999999,0.25,
CCCCCC,0.25,
FFFFFF,0.25

بازگشت به بالا

Line Fills chm [ Line, Radar ]

You can fill the area below a data line with a solid color.

You can combine line fills with any other chm parameters using a pipe character ( | ) to separate the chm parameters.

نحو

chm=
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>
    |...|
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>
< b_or_B >
Whether to fill to the bottom of the chart, or just to the next lower line.
  • B - Fill from < start_line_index > to the bottom of the chart. < end_line_index > supports a special syntax to let you fill a segment of the chart. This is easiest if you have a chart with a single line that you want to fill.
  • b - Fill between two lines in a multi-line chart. Start and end lines are indicated by < start_line_index > and < end_line_index > .
< color >
An RRGGBB format hexadecimal number of the fill color.
< start_line_index >
The index of the line at which the fill starts. The first data series specified in chd has an index of zero ( 0 ), the second data series has an index of 1 , and so on.
< end_line_index >
  • Fill type 'b' - The line at which to stop the fill. This line must be below the current line.
  • Fill type 'B' - One of the following choices:
    • any value - Any single number in this parameter is ignored, and the fill will go from the specified line to the base of the chart
    • start:end - To fill a vertical slice below the chart, specify start:end , where these are data point indices describing where to start and stop the fill. Both values are optional, and default to first_point : last_point . (See example below.)
<0>
Reserved — must be zero.

مثال ها

شرح مثال

For a single series, it is simplest to use chm=B . This fills the entire area under the line.

This is the only fill area type available for radar charts. chm=b does not work with radar charts.


chm=B,76A4FB,0,0,0

Here's a chart with two lines and two fills. Filling the area below the bottom line and above the top line requires a special technique, covered next.


chd=s:
cefhjkqwrlgYcfgc,
QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,

chm=
b,224499,0,1,0| (blue)
b,FF0000,1,2,0| (red)

In a multi-line chart, to fill from the top of the chart to the first line, include a series that contains two copies of the highest data value for the data format. So, for example, " .... " for extended encoding, " 100,100 " for basic text format, and so on. Fill from this series to the topmost line.

To fill from the last line to the bottom of the chart, include a series that contains two copies of the lowest data value for the data format. So, for example, AAAA for extended encoding, 0,0 for basic text format, and so on.

The lines themselves are drawn in black, using chco .

Three lines on a chart; chart is shaded in green from bottom to first line, red from first to second line, dark blue from second to third line and pale blue from third line to top of the chart
chd=e:
....,
(highest value)
cefhjkqwrlgYcfgc,
QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,
AAAA
(zero value)
chm=
b,76A4FB,0,1,0|
(light blue)
b,224499,1,2,0| (blue)
b,FF0000,2,3,0| (red)
b,80C65A,3,4,0 (green)
chco=000000

Here is a line chart with vertical fill slices. This is accomplished by specifying a start : end pair for < end_line_index > with line fill type 'B'.

  • B,76A4FB,0,0:3,0 - Blue vertical fill under line 0, bound by data points 0—3.
  • B,990000,0,7:10,0 - Red vertical fill under line 0, bound by data points 7—10.
  • B,DEDC06,0,12:,0 - Yellow vertical fill under line 0, from data point 12 through the end of the series.

chm=
B,76A4FB,0,0:3,0|
B,990000,0,7:10,0|
B,DEDC06,0,12:,0

This example shows using a line fill on a radar chart.

Radar chart
chm=
B,FF000080,0,1.0,5.0|
B,FF990080,1,1.0,5.0

بازگشت به بالا

Grid Lines chg [ Line, Bar, Radar, Scatter ]

You can specify solid or dotted grid lines on your chart using the chg parameter.

This parameter doesn't let you specify the thickness or color of the lines. For more ways to make lines across your chart, see shape markers ( chm type h, H, v, or V), range markers ( chm ), and axis tick marks ( chxtc ).

نحو

chg=
  <x_axis_step_size>,<y_axis_step_size>,<opt_dash_length>,<opt_space_length>,<opt_x_offset>,<opt_y_offset>
< x_axis_step_size >, < y_axis_step_size >
Used to calculate how many x or y grid lines to show on the chart. 100 / step_size = how many grid lines on the chart. So: 20,25 would mean 5 vertical grid lines and 4 horizontal grid lines.
< opt_dash_length >, < opt_space_length >
[ Optional ] Used to define dashed grid lines. The first parameter is the length of each line dash, in pixels. The second parameter is the spacing between dashes, in pixels. Specify 0 for < opt_space_length> for a solid line. Default values are 4,1.
< opt_x_offset >,< opt_y_offset >
[ Optional ] The number of units, according to the chart scale, to offset the x and y grid lines, respectively. Can be positive or negative values. If you specify this value, you must also specify all preceding values. Default values are 0,0.

مثال ها

شرح مثال

These examples use only the < x_axis_step_size > and < y_axis_step_size > parameters. The Chart API displays a dashed grid line by default.

Line chart with 5 vertical and two horizontal pale gray dashed grid lines
chg=20,50
Line chart with 5 vertical and two horizontal pale gray dashed grid lines
chg=20,50

This example uses larger spaces to display lighter grid lines ( 1,5 ).

Line chart with 5 vertical and two horizontal faint, pale gray, dashed grid lines
chg=20,50,1,5

To display solid grid lines, specify zero ( 0 ) for the < opt_space_length > parameter.

This chart also specifies an x-axis offset of 10.

Line chart with 5 vertical and two horizontal pale gray, solid grid lines
chg=20,50,1,0,10

This chart demonstrates an x-axis offset of 10, and ay axis offset of 20.

Line chart with 5 vertical and two horizontal pale gray, solid grid lines
chg=20,50,3,3,10,20

بازگشت به بالا

Dynamic Icon Markers chem [ Bar, Line, Radar, Scatter ]

Create your chart, and specify one or more dynamic icons as chem values. The syntax of chem is as follows. All semicolon-delimited items in purple are optional, and any one can be omitted entirely in your URL. You can include multiple markers by including multiple syntax strings delimited by a | شخصیت. You can read more about dynamic icons on the dynamic icon page .

You can also embed a chart inside another chart as a dynamic icon. See the Embedded Charts subsection below.

chem=
  y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>
|...| y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>
s=< icon_string_constant >
A string marker constant for a dynamic icon, from the dynamic icon page . This constant is almost the same as the chst parameter for freestanding icons. But where the freestanding icon string starts with "d_", you should remove that prefix to get the equivalent dynamic icon marker. Example: freestanding icon: d_bubble_icon_text_small ; equivalent dynamic icon marker: bubble_icon_text_small .
d=< marker_data_string >
The data required for this particular marker type. This holds the same string that would be used in a chld parameter for an equivalent freestanding icon, except that all | delimiters should be replaced by commas (remember to use commas instead of pipe markers for multiline text!). Note that within the data string, you must also escape the following characters with a @ mark: pipe ( | ) , at ( @ ) , equals ( = ), comma ( , ), semicolon ( ; ). Examples: hello@,+world , 5@@10+cents+each .
ds=< which_series >
[ Optional ] The zero-based index of the data series that this marker belongs to. Default value is 0.
dp=< which_points >
[ Optional ] Specifies which data points are used to draw markers. Default value is 0 (first point in the series) . Use one of the following formats:
  • nd - Which data point to draw the marker on, where nd is the zero-based index in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
  • range,< start >,< end >,< step > - Draw a marker on every step data point in a range from start to end , inclusive. start and end are index values, and can be floating point numbers to indicate intermediate values. All values are optional; defaults are: start=0, end=last item, step=1. If you skip a value, you must still include any intermediate commas, but you don't have to include empty trailing commas. Examples: dp=range,0,4 draws a marker on elements 0 through 4; dp=range,5,10,2 draws a marker on elements 5, 7, and 9; dp=range,2 draws points on the third point and later; dp=range,3,,1.5 draws markers on every 1.5 data points from the fourth item to the last.
  • all - Draw a marker on every element. This is equivalent to range,0, end_index . Example: dp=all
  • every,n - Draw a marker on every n th marker. Example: dp=every,2 draws a marker on items 0, 2, and 4.
py=< z_order >
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just below zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).
po=< x,y >
[ Optional ] An absolute position on the chart at which to draw the marker. x and y are two floating point numbers, where 0.0,0.0 is the bottom left corner and 1.0,1.0 is the top right corner.
of=< x_offset,y_offset >
[ Optional ] A number of pixels to offset the icon from its normal position. x_offset and y_offset are positive or negative integers. It is important to specify this value in an embedded dynamic icon, because the marker will be centered vertically and horizontally over the point, which means that the point probably won't line up with the data marker. A good offset for an upright pin is of=0,22 ; a good offset for a slanted pin is either of=-12,20 or of=12,20 depending on the direction of the slant, but you might have to experiment. Default value is 0,0.

مثال ها

شرح مثال
Here are examples of the same dynamic icon created as a free-standing image, and used as a marker in a line chart.

Chart 1: https://chart.googleapis.com/chart?chs=300x140&cht=lc&chco=FF9900,224499&
chd=t:75,74,66,30,10,5,3,1&chls=1|1&
chem=y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0&chm=v,ccccFF,0,::.2,2

Chart 2: https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000

Line chart with dynamic icon marker.
chem=
y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0


Same dynamic icon marker as standalone image.


chst=
d_bubble_icon_text_small
chld=
ski|bb|Wheeee!|FFFFFF|000000

Note that a dynamic icon marker will be centered on the point horizontally and vertically. So if you use a dynamic icon with a tail, the tail won't be on the chart point; the marker center will be. The first chart centers the mark on data point 3, which actually puts the tail a bit to the right of the mark on the line.

The second chart uses the of value to move the tail of the marker on top of the desired data point. A good offset for a slanted pin is -12,20.


chem=y;
s=map_xpin_letter;
d=pin_sleft,A,FF0000;
dp=3;
ds=1



chem=y;
s=map_xpin_letter;
d=pin_sleft,A,FF0000;
dp=3;
ds=1;
of=-12,0

To include multiple dynamic icons, repeat the syntax string, delimited by a | شخصیت.

This example shows a range, as well as two individual markers.

Note how the vertical pins are offset by of 0,22, and the slanted pin has an offset of 12,20 to make the pin points line up with the series that they describe.


chem=
y;s=map_xpin_letter;d=pin_sright,A,FF0000;dp=4;ds=0;py=1;of=12,20|
y;s=map_pin_icon;d=baby,FF5555;ds=1;dp=6;of=0,22|
y;s=map_pin_icon;d=camping,DEF763;ds=2;dp=range,2,5
This demonstrates a multiline text marker. The marker must be offset after adding the text, because the bubble resizes to fit the text, causing it to be re-centered on the chart. Note how newlines in the text are indicated by commas in the d data string.
chem=y;
s=bubble_texts_big;
d=bbbr,FFC6A5,000000,Outlier,Forgot+to+feed;
ds=0;
dp=13;
of=-120,2

Embedded Charts

You can embed one chart inside another using the dynamic icon syntax.

There are two styles of embedded chart markers: embedded charts in a bubble, and embedded charts with no bubble. Here are examples of both:

Bubble-less chart
Chart with bubble
Chart without bubble

Here are the specifics of the s=< icon_string_constant >;d=< marker_data_string > parameters, both for non-bubble and bubble-embedded charts (parameters covered above aren't described again here):

نحو

Non-bubble:
  chem=y;s=ec;d=<alignment_string>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>

Bubble:
  chem=y;s=ecb;d=<frame_type>,<padding>,<frame_color>,<fill_color>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>
alignment_string
[ Non-bubble only ] Which part of the bubble-less embedded chart is pinned to the data point. Choose one of the two-letter string constants in the following diagram: Alignment strings
chart_data
The data for the embedded chart. This is everything after https://chart.googleapis.com/chart? in the URL of the chart to embed. Use the tool below, or follow the rules listed below the tool.
frame_type
[ Bubble only ] One of the dynamic icon frame style constants .
padding
[ Bubble only ] Padding inside the bubble, in pixels.
frame_color
[ Bubble only ] Color of the frame, as a six-digit HTML color string without the # mark. Example: FF00FF .
fill_color
[ Bubble only ] Bubble fill color, as a six-digit HTML color string without the # mark. Example: FF00FF .

Embedded chart data

Use the following conversion tool to help generate your chart string, or else generate the chart string manually following the rules given after the tool.

Rules for manual conversion

1. First replace all the following characters in the parameter and value pairs with the following values, in the order shown:

Replace With this
%7C or %7c
|
@
@@
%
%25
,
@,
|
@|
;
@;
&
%26
=
%3D

2. Then replace all the & and = values in the parameter1=value1&parameter2=value2... pairs with commas.

بازگشت به بالا

Shape Markers chm [ Bar, Line, Radar, Scatter ]

You can specify graphical markers for all or individual data points on a chart. If two or more markers occupy the same point, the markers are drawn in the order in which they appear in the chm parameter. You can also create text markers on data points, which is covered in Data Point Markers .

You can combine shape markers with any other chm parameters using a pipe character ( | ) to separate the chm parameters.

نحو

Specify one set of the following parameters for each series that should be marked. To mark multiple series, create additional parameter sets, delimited by a pipe character. You do not need to mark up all series. If you do not assign markers to a data series, it will not get any markers.

Shape markers behave slightly differently in scatter charts . See that documentation for more information.

chm=
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
    |...|
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
@
[ Optional ] If you precede the marker type with the optional @ character, then < opt_which_points > should use the x:y format.
<marker_type>
The type of marker to use. Specify one of the following types:
  • a - Arrow
  • c - Cross
  • C - Rectangle. If a rectangle marker, you must have at least two data series, where series 0 specifies the bottom edge and series 1 specifies the top edge. < size > specifies the width of the rectangle, in pixels.
  • d - Diamond
  • E - Error-bar marker ( ) This marker requires two data series to create, one value for the bottom, and the corresponding point in the second series for the top. It also exposes an extended < size > syntax: line_thickness [: top_and_bottom_width ] where top_and_bottom_width is optional. See the examples below.
  • h - Horizontal line across the chart at a specified height. ( The only valid format for < opt_which_points > parameter is nd . )
  • H - Horizontal line through the specified data marker. This supports an extended < size > syntax that lets you specify an exact line length: line_thickness [: length ] where : length is optional, and defaults to the full chart area width.
  • o - Circle
  • s - Square
  • v - Vertical line from the x-axis to the data point
  • V - Vertical line of adjustable length. This supports an extended < size > value syntax that lets you specify an exact line length: line_thickness [: length ] where : length is optional, and defaults to the full chart area height. The marker is centered on the data point.
  • x - An X
< color >
The color of the markers for this series, in RRGGBB hexadecimal format .
< series_index >
The zero-based index of the data series on which to draw the markers. Ignored for h markers and markers that specify location by x/y position (start with the @ character). You can use hidden data series as a source for markers; see Compound Charts for more information. Grouped vertical bar charts support a special extended syntax to align markers with specific bars.
< opt_which_points >
[ Optional ] Which point(s) to draw markers on. Default is all markers. Use one of the following values:
  • nd - Where to draw the marker. The meaning depends on the marker type:
    • All types except h - Which data point to draw the marker on, where nd is the zero-based index in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
    • h - A number from 0.0 to 1.0, where 0.0 is the bottom of the chart, and 1.0 is the top of the chart.
  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all data points.
  • - n - Draw a marker on every n -th data point. Floating point value; if n is less than 1 the chart will calculate additional intermediary points for you. For example, -0.5 will put twice as many markers as data points.
  • start:end:n - Draw a marker on every n -th data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3::1 would be from the fourth element to the last, step 1, and omitting this parameter entirely would default to first : last :1. All values can be floating point numbers. start and end can be negative, to count backward from the last value. If both start and end are negative, be sure that they are listed in increasing value (for example, -6:-1:1). If the n step value is less than 1, it will calculate additional data points by interpolating the data values given. Default values are first:last:1
  • x : y - Draw a marker at a specific x/y point on the chart. This point does not have to be on a line. Add the @ character before the marker type to use this option. Specify the coordinates as floating point values, where 0:0 is the bottom left corner of the chart and 1:1 is the top right corner of the chart. For example, to add a red, 15-pixel diamond to the center of a chart, use @d,FF0000,0,0.5:0.5,15 .
< size >
The size of the marker, in pixels. Most take a single number value for this parameter; the V, H, and S markers support the syntax < size >[: width ] where the optional second part specifies the line or marker length.
< opt_z_order >
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).
< opt_offset >
[ Optional ] Let you specify horizontal and vertical offsets from the specified location. Here is the syntax, which uses a : delimiter: reserved :< horizontal_offset >:< vertical_offset > . If specified, you can include an empty ,, value in the chm parameter string for < opt_z_order >. Examples: o,FF9900,0,4,12,, :10 o,FF9900,0,4,12.0,, :-10:20 o,FF9900,0,4,12,1, ::20
  • reserved - Leave blank.
  • < horizontal_offset > - A positive or negative number specifying the horizontal offset, in pixels. Optional; leave blank if not used.
  • < vertical_offset > - A positive or negative number specifying the vertical offset, in pixels. Optional; leave blank if not used.

مثال ها

شرح مثال

Here's an example of several of the shape and line markers.

  • a,990066,0,0.0,9.0 - Purple arrow, first series, first point, size 9.
  • c,FF0000,0,1.0,20.0 - Red cross, first series, second point, size 9.
  • d,80C65A,0,2,20.0 - Green diamond, first series, third point, size 9.
  • H,000000,0,3,1:40 - Black horizontal line, first series, data point 3, one pixel wide, forty pixels long.
  • o,FF9900,0,4.0,12.0 - Orange circle, first series, fifth point, size 12.
  • s,3399CC,0,5.0,11.0 - Blue square, first series, sixth point, size 11.
  • v,BBCCED,0,6.0,1.0 - Vertical line up to point, first series, seventh point, one pixel wide.
  • V,3399CC,0,7.0,1.0 - Vertical line bottom to top of chart, first series, eighth point, one pixel wide.
  • x,FFCC33,0,8.0,20.0 - Yellow 'X', first series, ninth point, size 20.
  • H,FFFF00,0,9,2 - Horizontal yellow line the width of the chart at data point 9.
  • h,FF0000,0,0.5,1 - Red horizontal line at designated height, first series, halfway up the chart, one pixel wide.
Line chart with markers
chm=
a,990066,0,0.0,9.0|
c,FF0000,0,1.0,20|
d,80C65A,0,2.0,20.0|
H,000000,0,3,1:40|
o,FF9900,0,4.0,12.0|
s,3399CC,0,5.0,11.0|
v,BBCCED,0,6,1.0|
V,3399CC,0,7,1.0|
x,FFCC33,0,8,20|
H,FFFF00,0,9,2|
h,FF0000,0,0.5,1

Here's an example using diamonds for one data series, and circles for the other data series.

If two or more markers occupy the same point, the markers are drawn in the order in which they appear in the chm parameter. Here, the circle is the first marker specified with chm , so it is drawn first. The diamond is specified and drawn second, which results in it being drawn on top of the circle.

Line chart, one line has 15 pixel circles on each data point the other line has 10 pixel diamonds. A diamond is drawn on the point that is common to both lines
chm=
o,FF9900,0,-1,15.0|
d,FF0000,1,-1,10.0

Here's a line chart with a marker on every second data point (-2 means every other point).

Line chart with marker on every second point
chd=t:
0,20,20,50,40,70,70,90,85,45,40,50
chm=
o,0066FF,0,-2,6
Here's a line chart with twice as many markers as data points (-0.5 means every half point). Line chart with marker on every second point
chd=t:
0,20,20,50,40,70,70,90,85,45,40,50
chm=
o,0066FF,0,-.5,6
This example shows how to use h and v markers to create grid lines with custom colors and thickness. The z-order value (the last value) is set to -1 so that the grid lines are drawn beneath the data line.
Line chart with marker on every second point
chm=
h,76A4FB,0,0:1:.2,2,-1|
V,76A4FB,0,::2,0.5,-1

This chart adds vertical fill lines to a line chart:

  • v - Vertical lines to the chart
  • FF0000 - Red lines
  • 0 - Series index
  • : :.5 - Range specifier: from start to end, every 0.5 points.
  • 2 - Thickness 2 pixels.
Line chart with marker on every second point
chm=
v,FF0000,0,::.5,2
This example adds an arrow and text marker to the chart using exact coordinates. The first D marker is the trace line under the bars. The second marker is the arrow, and the third marker is the arrow text.
chm=
D,003971,1,0,3|
@a,000000,0,.25:.75,7|
@tExpected,000000,0,.35:.85,10
A horizontal line fixed to a specific data point ( H ) can be useful for showing relative values, or emphasizing the height of a data value on a chart.
chm=H,FF0000,0,18,1

This graph demonstrates the markers that can specify line thickness and length in the < size > parameter.

  • E,000000,0,6,1:20 - Black error bar with 1 pixel wide lines, top and bottom bars 20 pixels long. The bottom is anchored to series 0 point 8, the top is anchored to series 1 point 8.
  • H,990066,1,2,5:50 - Purple, horizontal line five pixels wide, fifty pixels long centered on data point 2.
  • V,3399CC,0,8,3:50 - Blue, vertical line 3 pixels wide, fifty pixels long, centered on data point 8.
title="cht=lc&chd=s:2gounjqLaCf,jqLaCf2goun&chco=008000,00008033&chls=2.0,4.0,1.0&chs=250x150&chm=H,990066,1,2,5:50%7CV,3399CC,0,8,3:50%7CE,000000,0,6,1:20" src="/chart/image/images/chart_95.png" />
chm=
E,000000,0,6,1:20|
H,990066,1,2,5:50|
V,3399CC,0,8,3:50

بازگشت به بالا

Text and Data Value Markers chm [ Bar, Line, Radar, Scatter ]

You can label specific points on your chart with custom text, or with formatted versions of the data at that point.

You can combine any chm markers using a pipe character ( | ) to separate the chm parameter sets.

A note on string values: Only URL-safe characters are permitted in label strings. To be safe, you should URL-encode any strings containing characters not in the character set 0-9a-zA-Z . You can find a URL encoder in the Google Visualization Documentation .

نحو

Specify one set of the following parameters for each series that should be marked. To mark multiple series, create additional parameter sets, delimited by a pipe character. You do not need to mark up all series. If you do not assign markers to a data series, it will not get any markers.

chm=
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
    |...|
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
<marker_type>
The type of marker to use. You can choose from the following types:
  • f<text> - A flag containing text. Specify the character 'f', followed by custom URL-encoded text. To escape commas in text markers, precede the comma by a \ mark. Example: fHello\,+World!
  • t<text> - A simple text marker. Specify the character 't' followed by custom URL-encoded text. To escape commas in text markers, precede the comma by a \ mark. Example: tHello\,+World!
  • A< text > - An annotation marker. This is similar to a flag marker, but markers will coordinate their position so that they do not overlap. The only valid format for < opt_which_points > is nd , to signify the index of a point in the series.
  • N< formatting_string > - The value of the data at this point, with optional formatting. If you do not use the chds parameter (custom scaling) it gives the exact encoded value; if you do use that parameter with any format type the value will be scaled to the range that you specify. See an example of chds with numeric markers below. With this marker type in a stacked bar chart , if you specify -1 for < series_index > you will get a marker that shows the sum of all values in this stacked bar. The formatting string syntax is as follows:
    < preceding_text >*< number_type >< decimal_places >zs< x or y >*< following_text > .
    All of these elements are optional. Here is the meaning of each element:
    • <preceding_text> - Text to precede each value.
    • *...* - An optional block wrapped in literal asterisks, in which you can specify formatting details for numbers. The following values are supported, and are all optional:
      • <number_type> - The number format, for numeric values. Choose one of the following:
        • f - [ Default ] Floating point format. Consider specifying precision as well with the < decimal_places > value.
        • p - Percentage format. A % sign is appended automatically. Note: When using this format, data values from 0.0 — 1.0 map to 0 — 100% (for example, 0.43 will be shown as 43%).
        • e - Scientific notation format.
        • c< CUR > - Format the number in the currency specified, with the appropriate currency marker. Replace < CUR > with a three-letter currency code. Example: cEUR for Euros. You can find a list of codes on the ISO web site , although not all symbols are supported.
      • <decimal_places> - An integer specifying how many decimal places to show. The value is rounded (not truncated) to this length. Default is 2.
      • z - Display trailing zeros. Default is no .
      • s - Display group separators. Default is no .
      • x or y -Display the data from the x- or y-coordinate, as specified. The meaning of x data varies by chart type: experiment with your chart to determine what it means. Default is 'y' .
    • < following_text > - Text to follow each value.
< color >
The color of the markers for this set, in RRGGBB hexadecimal format .
< series_index >
The zero-based index of the data series on which to draw the markers. If this is a stacked bar chart and the marker type is N (data point values), you can specify -1 to create a summed value marker for each stack of bars. See below for an example.
< opt_which_points >
[ Optional ] Which point(s) to draw markers on. Default is all markers. Use one of the following values:
  • nd - Which data point to draw the marker on, where nd is the zero-based index in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all data points.
  • -n - Draw a marker on every n -th data point.
  • start : end : n - Draw a marker on every n -th data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3::1 would be from the fourth element to the last, step 1, and omitting this parameter entirely would default to first : last :1. All values can be floating point numbers. start and end can be negative, to count backward from the last value. If both start and end are negative, be sure that they are listed in increasing value (for example, -6:-1:1). If the n step value is less than 1, it will calculate additional data points by interpolating the data values given. Default values are first:last:1
  • x : y - [ Not supported for N-type markers ] Draw a marker at a specific x/y point on the chart. This point does not have to be on a line. Add the at character ( @ ) before the marker type to use this option. Specify the coordinates as floating point values, where 0:0 is the bottom left corner of the chart, 0.5:0.5 is the center of the chart, and 1:1 is the top right corner of the chart. For example, to add a red, 15-pixel diamond to the center of a chart, use @d,FF0000,0,0.5:0.5,15 .
< size >
The size of the marker in pixels. If this is a scatter chart with a third data series (used to specify point sizes), this value will be scaled by the data range. So if the data range is 0—100 and < size > is 30, a data value of 100 would be 30 pixels wide, a data value of 50 would be 15 pixels wide, and so on.
< opt_z_order >
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).
< opt_placement >
[ Optional ] Additional placement details describing where to put this marker, in relation to the data point. You can specify horizontal and/or vertical relative positioning, as well as offsets. Placement syntax is a string with : delimiters as shown here. All elements are optional: < horizontal_and_vertical_justification >:< horizontal_offset >:< vertical_offset > . If specified, you can include an empty ,, value in the chm parameter string for < opt_z_order >. Examples: N,000000,0,1,10,,b and N,000000,0,1,10,,lv and N,000000,0,1,10,,r::10 .
horizontal_and_vertical_justification
The anchor point of the marker. This behaves opposite to justification, so a left anchor actually puts the marker to the right of the data point. You can choose a horizontal and/or vertical justifier from the following list:
  • Horizontal placement : 'l', 'h', or 'r' - Left, center, or right-anchored, horizontally. Default is 'l'.
  • Vertical placement : 'b', 'v', 't' - Bottom, middle, or top-anchored, vertically. Default is 'b'.
  • Bar-relative placement [ Bar charts only] : 's', 'c', 'e' - Base, center, or top of a bar. For stacked charts, this is relative to the section of the bar for each series, not for the whole bar. If the series index given is -1 (stack total) it is in relation to the whole bar. This can be combined with vertical placement values: for example, 'be' or 'vs'. Default value is 'e'.
horizontal_offset
A horizontal offset for this marker, in pixels. Default is 0.
vertical_offset
A vertical offset for this marker, in pixels. Non-bar chart default: 15; bar chart chart default: 2 .

شرح مثال

Here's an example of value labels on a bar chart.

The first chart ( N*p0* ) specifies a data value marker, with values shown as a percentage, rounded to zero decimal places, in black, on all values, in 11-point text. Note that the data values are all between 0.0 and 1.0, which, in percentage format, are moved up two decimal places.

The second chart ( N*cEUR1* ) shows the same values formatted as Euro values, one decimal place, in black, on all values, in 11-point text.

Bar chart with percentage labels above each bar
chm=
N*p0*,000000,0,-1,11
chd=t:
0.4356,0.3562,0.4834,0.575,0.673,0.6091


Bar chart with Euro labels above each bar


chm=
N*cEUR1*,000000,0,-1,11

You can use the chds parameter to scale the numeric value displayed. You can use chds for all data formats, including simple and extended encoding. This will not affect the bar size or the axis labels, but only the data marker value.

This example shows a chart with simple-encoded values of 46, 39, 29, 30, 43, 41. Simple encoding range is 0—61 . The chds parameter defines a custom marker scale of 0—1, so marker values are scaled to this range, but the bar heights are not affected (if this were text format data , the bars would be scaled as well).


chd=s:underp
chm=N,000000,0,-1,11
chds=0,1

Here's an example of a chart with a text label at the minimum point and a flag label at the maximum point.

Line chart with 10pt blue text label, and flag with 15pt red text, drawn on the data points of a dashed green line.
chm=
tMin,0000FF,0,1,10|
fMax,FF0000,0,3,15

This example shows a stacked chart with values for individual series, plus the series total. To show the stacked series values, we must use the 'c' positioning option; if we did not, the top bar value would overlap the sum value at the top of each bar.
chm=
N,FF0000,-1,,12|
N,000000,0,,12,,c|
N,000000,1,,12,,c|
N,ffffff,2,,12,,c
Some more demonstrations of how vertical and horizontal placement work. This example demonstrates various combinations of anchor values for bar charts (which use s, c,and e for vertical placement). Note how a right anchor moves a marker left, and a top anchor moves a marker down, and vice-versa. The red dots show the base, center, and top of each bar. The number is the data value, fixed using different anchor values for each bar.
chm=
N,000000,0,0,10,,rs
N,000000,0,1,10,,ls
N,000000,0,2,10,,c
N,000000,0,3,10,,e
N,000000,0,4,10,,e::15
N,000000,0,5,10,,e::-12
Annotation markers automatically adjust the label position so that they don't overlap. The first chm value is for the line fill, the following values are all annotation markers.
chm=B,C5D4B5BB,0,0,0
AA,666666,0,3,15
AB,666666,0,5,15
AC,666666,0,24,15
AD,666666,0,25,15
AE,666666,0,26,15
AF,666666,0,51,15
AG,666666,0,60,15
AH,666666,0,73,15
AI,666666,0,80,15
AJ,666666,0,99,15
Another annotation marker example demonstrating city altitudes in Switzerland.

بازگشت به بالا

Range Markers chm [ Bar, Candlestick, Line, Radar, Scatter ]

You can color horizontal or vertical bands of background fill to highlight specific areas of a chart.

You can combine any chm markers using a pipe character ( | ) to separate the chm parameter sets.

نحو

Specify one set of the following parameters for each band to draw. To draw multiple bands, create additional parameter sets, delimited by a pipe character. Ranges are drawn in the order specified, so the last range drawn will be drawn on top of previous ranges.

chm=
  <direction>,<color>,0,<start_point>,<end_point>
    |...|
  <direction>,<color>,0,<start_point>,<end_point>
<direction>
Specifies horizontal or vertical shading. Use r for a horizontal range and R for a vertical range.
< color >
The range color as an RRGGBB format hexadecimal number .
0
Reserved — must be zero.
< start_point >
The start position of the range.
  • For horizontal range markers, this is a position on the y-axis, where 0.00 is the bottom of the chart, and 1.00 is the top of the chart.
  • For vertical range markers, this is a position on the x-axis, where 0.00 is the left of the chart, and 1.00 is the right of the chart.
< end_point >
The end position of the range.
  • For horizontal range markers, this is a position on the y-axis, where 0.00 is the bottom of the chart, and 1.00 is the top of the chart.
  • For vertical range markers, this is a position on the x-axis, where 0.00 is the left of the chart, and 1.00 is the right of the chart.

مثال ها

شرح مثال

Range markers can be a thin line or a band of color.

  • r,E5ECF9,0,0.75,0.25 - Range marker, pale blue, (reserved), 0.5 of the height of the chart.
  • r,000000,0,0.1,0.11 - Range marker, black, (reserved), starts at 0.1 of the way up the y-axis and ends at 0.11 of the way up the y-axis (a thin black line).
Line chart with a pale blue horizontal band stretching from 25 percent to 75 percent of the way up the y-axis and a thin horizontal line ten percent of the way up the y-axis
chm=
r,E5ECF9,0,0.75,0.25|
r,000000,0,0.1,0.11

This example shows the vertical range markers. The first marker is a red line ( FF0000 ), and the second is a pale blue band ( A0BAE9 ).

Line chart with a pale blue vertical band stretching from 25 percent to 75 percent of the way along the x-axis and a thin vertical line ten percent of the way along the x-axis
chm=
R,FF0000,0,0.1,0.11|
R,A0BAE9,0,0.75,0.25

Markers are drawn in the order specified. In this example, you can see that the vertical red marker was drawn before the pale blue horizontal marker.

Line chart with a blue vertical band and paler blue horizontal band stretching from 25 percent to 75 percent of the way along the x and y-axis respectively. Thin vertical red line and thin horizontal black line ten percent of the way along the x and y-axis respectively
chm=
R,FF0000,0,0.1,0.11|
R,A0BAE9,0,0.75,0.25|
r,E5ECF9,0,0.75,0.25|
r,000000,0,0.1,0.11

Here's an example of a line chart that uses range markers to draw faint horizontal lines across the chart at the zero line, midpoint line, and top.

Sparkline with single yellow line and three equally spaced horizontal lines
chm=
r,000000,0,0.499,0.501|
r,000000,0,0.998,1.0|
r,000000,0,0.0,0.002

بازگشت به بالا

Candlestick Markers chm=F [ Bar, Line ]

Candlestick markers indicate variance and direction change in a data series. Often they are used to show stock values during the course of a day. The marker includes segments that show the high and low value, as well as the opening and closing value for a specific time period (typically a day). For more about candlestick markers, see here .

A candlestick marker is drawn as a rectangle bisected by a vertical line. It requires four data series to draw a candlestick marker; here is what each series specifies:

  • Series 1 and 4 specify the bottom and top of the vertical line, respectively. These typically represent the low and high values for the day.
  • Series 2 and 3 specify the vertical borders of the rectangle. Series 2 is the opening value, and series 3 is the closing value. The color of the rectangle depends on which is higher: when the opening value (series 2) is lower than the closing value (series 3), the price has increased, and the rectangle is filled with solid green by default; when the opening value (series 2) is higher than the closing value (series 3), the price has decreased, and the rectangle is filled with solid red by default. You can only specify a fill color for the rectangle with decreasing value. When you specify that, the rectangle with increasing value is unfilled (empty). Note that series 2 can be either the top or the bottom of the rectangle, depending on whether the price has gone up or down.

You can combine candlestick markers with any other chm parameters using a pipe character ( | ) to separate the chm parameters.

Note: If you do not want the lines for the data used to draw the markers to appear in the chart, you must include a 0 after the format type. For example: chd=t0:10,20,30,40 in a text format data string. See Compound Charts for more information.

Here's an example, showing the lines for each series:

نحو

chm=
  F,<opt_declining_color>,<data_series_index>,<opt_which_points>,<width>,<opt_z_order>
اف
Indicates that this is a candlestick marker.
<opt_declining_color>
[ Optional ] Fill color for the rectangles when the value is decreasing (when series 2 value > corresponding series 3 value). This is an RRGGBB format hexadecimal number . When the values increase, the rectangle will be empty. Default is solid green for increasing, solid red for decreasing (you cannot specify a custom fill color for increasing values).
< data_series_index >
The index of the data series to use as the first series for your candlestick markers. This is a zero-based index. So, if you specify 1 here, and you have six series, the second, third, fourth and fifth will be used to draw candlestick markers.
<opt_which_points>
[ Optional ] Specifies which data points are used to draw markers. Default is all markers. Use one of the following formats:
  • nd - Draw a marker on a single point in the series, where nd is the index of the point in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all markers.
  • - n - Draw a marker on every n -th data point.
  • start:end:n - Draw a marker on every n -th data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3::1 would be from the fourth element to the last, step 1, and omitting this parameter entirely would default to first : last :1. All values can be floating point numbers. start and end can be negative, to count backward from the last value. If both start and end are negative, be sure that they are listed in increasing value (for example, -6:-1:1). If the n step value is less than 1, it will calculate additional data points by interpolating the data values given. Default values are first:last:1
<width>
The width of all rectangles, in pixels.
<opt_z_order>
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).

مثال ها

شرح مثال

Here's an example of candlestick markers on a line chart with four series. The custom fill color 0000FF (blue) is specified, and this color is used to fill the rectangles when the point in series 3 is smaller than the equivalent point in series 2.

The first and last rectangle are trimmed by the chart. To eliminate these values, you could specify 1:4 for the fourth parameter of chm.

Note the zero in the data string, to hide the lines for the series: chd=t0 . This indicates that all chart data is to be used for markers.

The < which_point > parameter is blank, which draws candlesticks on all data points.

Line chart with four orange lines and four financial markers

chd=t0:
0, 5,10, 7,12, 6|
35,25,45,47,24,46|
15,40,30,27,39,54|
70,55,63,59,80,60
chm=F,0000FF,0,,20

Here's an example of the same chart, using the default colors, and removing the first and last item.

This is a compound chart: it is a combination of a line chart (the base chart type) and candlestick markers. The value of 1 in cht=t:1 means that all data series after the first should be hidden from the basic chart type (line chart). The first 1 in chm=F,, 1 ,1:4,20 means that the candlestick data comes from series 2, 3, 4, and 5 (the 1 is zero-based). See Compound Charts for more information on how to draw a compound chart like this.

Line chart with one orange line and four financial markers.
cht=lc
chm=
F,,1,1:4,20

chd=t1:
15,40,30,27,39,54|
...

بازگشت به بالا

Line Markers chm=D [ Bar, Candlestick, Line, Radar, Scatter ]

You can add a line that traces data in your chart. Most often, this is used in compound charts .

To add multiple lines (or combine this with any other chm markers), separate the chm parameter sets using a pipe ( | ) delimiter. You cannot make a dashed line marker with this parameter.

نحو

chm=
  D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>
D
Indicates that this is a line marker.
< color >
The color of the line, in RRGGBB hexadecimal format .
< series_index >
The index of the data series used to draw the line. The data series index is 0 for the first data series, 1 for the second data series, and so on.
< which_points >
Which points in a series to use to draw the line. Use one of the following values:
  • 0 - Use all the points in the series.
  • start:end - Use a specific range of points in the series, from the start to end , inclusive (zero-based index). You can also use floating point values to specify intermediate points, or leave start or end blank to indicate the first or last data point, respectively. start and end can be negative, as a reverse index from the last value. If both start and end are negative, be sure to write them in increasing value (for example, -6:-1).
< size >
The width of the line in pixels.
< opt_z_order >
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).

مثال ها

شرح مثال

This is an example of drawing a marker line on a bar chart. The z-order is set to 1 , so the line is drawn on top of the bars.

This example uses the same data for both the bars and the data line.
Bar chart with line marker
chm=D,0033FF,0,0,5,1
chd=s:1XQbnf4

This is the same bar chart, but with an additional data series just for the line. This is an example of a compound chart. Compound charts are drawn by adding additional data series to the chd parameter, plus a value to chd telling the chart to "ignore" the additional data series.

See Compound Charts for more information.

Bar chart with line marker
chm=D,0033FF,1,0,5,1
chd=s1:1XQbnf4,43ksfg6

بازگشت به بالا

Data Functions chfd [ All chd charts ]

You can specify a custom function to run over chart data using muParser function syntax . The data used in the function can come from one of two sources:

  • A data series from chd - The data is pulled from the specified series in chd .
  • A range of values declared in the chfd parameter itself - You declare a start, stop, and step value for an arbitrary data range.

It is important to note that in all cases you must assign the output to an existing series in chd ; that series will be overwritten by the function output. The chart is rendered only after all functions have been processes, so if you assign multiple functions to output to the same data series, the functions will be run in the order given, but only the output of the final function will be plotted on the chart. Note that you can chain functions, so that one function can take as input a series that was output by a previous function.

To assign colors or chm markers to a function line, assign the colors or markers to the function's series index. Note that markers are placed according to the data after it has been manipulated by the function.

نحو

chfd=
  <output_series_index>,<function_data>,<function_string>
    |...|
  <output_series_index>,<function_data>,<function_string>
< output_series_index >
Zero-based index of a data series in chd to which the function output will be written. Any existing data will be completely overwritten by the function output. If a series is not being used as input for a function, best practice is to assign a single dummy value to that series.
< function_data >
The variables and data to plot. The data can be from a range that you define, or from one of the chd data series. You can specify multiple variables for each function, using a ; (semicolon) delimiter for multiple variables. Note that if you define multiple variables for a single function, and these variables have a different number of points, the function will stop when it reaches the first endpoint. For example, if a function defines both x=1—5 step 1 and y=1—10 step 1, the function will end when it reaches the fifth point.
< variable_name >,< input_series_index >
OR
< variable_name >,< start >,< end >,< step >
  • variable_name - An arbitrary string name for the variable. Use this in the function defined by function_string .
  • input_series_index - The index of a chd data series to use as input data.
  • start - The numeric start value of a range.
  • end - The numeric end value of a range.
  • step - The numeric step value from start to end . Can be positive or negative, but cannot be zero.
Examples: x,0,100,1 declares a variable named x with values 0, 1, 2, ... 100. x,0,100,1;r,0,3.1,.1 declares the same x variable plus a variable named r with values 0, 0.1, 0.2, ..., 3.0, 3.1. x,0 declares a variable named x that uses the data from the first chd series. These variables will be used by function_string . They will not be plotted on the graph unless you specify them in function_string . The smaller the step, the smoother your graph.
< function_string >
Your function, written in the muParser syntax . The function is applied to the variables and data specified in variable_data . You can only reference the variables declared in this local function set, not in another piped set of chfd parameters. Summary muParser functions are not supported (min, max sum, avg). IMPORTANT: Remember to use %2B instead of + in your functions!

مثال ها

شرح مثال

A simple sine wave. Some things to notice:

  • chd=t:-1 - We use a dummy variable for the chart data, because our data is declared in the chfd parameter.
  • chco=FF0000 - Red is specified for the first series. Even though we don't use the data from chd , the corresponding color for that series will be used for that plotted function.
  • chfd=0,x,0,11,0.1,sin(x)*50%2B50 - We declare one variable, called x, with values 0—11, incremented by 0.1. It is assigned to the first series, which means it will get the first series color (FF0000). The function applied to x is sin(x) * 50 + 50. Note how we must encode the + in that function.

Sine wave specified by chfd
cht=lc
chd=t:-1
chco=FF0000
chfd=
0,x,0,11,0.1,sin(x)*50%2B50
chxt=x,y
This line uses data from the chd parameter.
chd=t:5,10
chfd=0,x,0,x*4

A mix of function and non-function lines.

Notice how the colors are specified by the series color parameter chco .

Notice the placement of markers on the function output; the data points are calculated from start , end , and step , so if your range is 0—11 step 0.1, point 0 is 0, point 1 is 0.1 and so on, until point 110, which has a value of 11.

One series using chfd, one using chd for its data.
chd=t:
-1
15,45
chco=
FF0000,000000
chfd=
0,x,0,11,0.1,sin(x)*50%2B50
chm=
c,00A5C6,0,110,10
a,00A5C6,0,60,10

To define a function in two dimensions, use an lxy chart, assign two dummy series, and assign a function to each.

  • 0,x,0,10,0.1,sin(x)*50%2B50 - Series 0 (the x-axis values) has a variable named x, with values from 0—10, step 0.1, and a function sin(x)*50 + 50
  • 0,y,0,10,0.1,sin(y)*50%2B50 - Series 0 (the y-axis values) has a variable named y, with values from 0—10, step 0.1, and a function sin(x)*50 + 50
A circle
cht=lxy
chd=t:-1|-1
chfd=
0,x,0,10,0.1,sin(x)*50%2B50|
1,y,0,10,0.1,cos(y)*50%2B50

The chfd parameter can really let you express your creativity.

Try clicking these images to open and play with them in the chart playground; you'll get hooked!



بازگشت به بالا