এই পৃষ্ঠাটি বর্ণনা করে যে কীভাবে বিভিন্ন ধরনের কলআউট, বুদবুদ, পিন এবং অন্যান্য গ্রাফিক্স তৈরি করতে হয় যা URL দ্বারা অনুরোধ করা যেতে পারে, বা অন্যান্য চার্টের শীর্ষে মার্কার হিসাবে যোগ করা যেতে পারে।
সুচিপত্র
ভূমিকা
চার্ট API আপনাকে বিভিন্ন ধরণের আকর্ষণীয় কলআউট, পিন বা বুদবুদ তৈরি করতে সক্ষম করে যা পাঠ্য এবং চিত্রগুলিকে মিশ্রিত করে। এই আইটেমগুলিকে ডাইনামিক আইকন বলা হয়। আপনি হয় একটি ফ্রিস্ট্যান্ডিং ডায়নামিক আইকন ইমেজ তৈরি করতে পারেন, অথবা আপনি chem
প্যারামিটার ব্যবহার করে মার্কার টাইপ হিসাবে আপনার চার্টের উপরে একটি ডায়নামিক আইকন স্থাপন করতে পারেন। এই পৃষ্ঠাটি বর্ণনা করবে কিভাবে গতিশীল আইকনগুলিকে ফ্রিস্ট্যান্ডিং ইমেজ হিসাবে বা অন্য চার্টে চিহ্নিতকারী হিসাবে তৈরি করা যায়। ইনফোগ্রাফিক্স ডায়নামিক আইকন রেফারেন্স পৃষ্ঠাটি উপলব্ধ সব ধরনের গতিশীল মার্কার প্রকারের বর্ণনা করে।
একটি ডায়নামিক আইকন তৈরির জন্য সিনট্যাক্স নির্ভর করে আপনি একটি ফ্রিস্ট্যান্ডিং আইকন চান কিনা, বা অন্য চার্টে একটি ডায়নামিক মার্কার হিসেবে চান।
ফ্রিস্ট্যান্ডিং আইকন
আপনি একটি গতিশীল আইকন চিত্রের জন্য অনুরোধ করতে পারেন যেভাবে আপনি অন্যান্য চার্টগুলির জন্য অনুরোধ করেন৷ একটি ফ্রিস্ট্যান্ডিং ডায়নামিক আইকন অন্যান্য চার্টের চেয়ে ভিন্ন প্যারামিটারের সেট সমর্থন করে:
প্যারামিটার | প্রয়োজনীয় বা ঐচ্ছিক | বর্ণনা |
---|---|---|
chst=< icon_string_constant > | প্রয়োজন | কোন ধরনের আইকন তৈরি করতে হবে তা বর্ণনা করে।
|
chld=< icon_data > | প্রয়োজন | আইকনের আকার, ঘূর্ণন, পাঠ্য এবং অন্যান্য প্রয়োজনীয় ডেটা বর্ণনা করতে ব্যবহৃত নির্দিষ্ট ডেটা।
|
cht | ব্যবহার করা হয় না | ফ্রিস্ট্যান্ডিং ডায়নামিক আইকন চার্ট cht প্যারামিটার ব্যবহার করে না। |
chs | ব্যবহার করা হয় না | ফ্রিস্ট্যান্ডিং ডায়নামিক আইকন চার্ট chs প্যারামিটার ব্যবহার করে না। |
chd | ব্যবহার করা হয় না | একটি ফ্রিস্ট্যান্ডিং ডায়নামিক আইকনে ডেটা পাস করতে chld প্যারামিটার ব্যবহার করুন। |
উদাহরণ
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
ডায়নামিক মার্কার
আপনি chem
প্যারামিটার ব্যবহার করে বিভিন্ন ধরণের চার্টে মার্কার টাইপ হিসাবে একটি ডায়নামিক আইকন এম্বেড করতে পারেন। কিভাবে শিখতে chem
ডকুমেন্টেশন দেখুন.
উদাহরণ
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
সাধারণ আইকন বৈশিষ্ট্য
বেশিরভাগ আইকনগুলির সাথে পাঠ্য স্ট্রিং বা ছায়া যুক্ত থাকতে পারে।
টেক্সট স্ট্রিং
চার্ট API-এ পাস করা সমস্ত প্রদর্শন পাঠ্য অবশ্যই UTF-8 এনকোড করা এবং তারপর URL-এনকোড করা আবশ্যক৷ এটি শুধুমাত্র অ-ইউআরএল-নিরাপদ অক্ষরগুলিকে প্রভাবিত করে (ইউআরএল-নিরাপদ অক্ষরগুলি বেশিরভাগ ইংরেজি অক্ষর az উভয় বড় এবং ছোট হাতের, প্লাস বিরাম চিহ্নের একটি ছোট সেট)। উদাহরণস্বরূপ, "è" অক্ষরের জন্য UTF-8 এবং ইউআরএল-এনকোড করা মান হল " %C3%A8
", এবং চীনা অক্ষরের জন্য 駅 হল " %E9%A7%85
"৷ বেশিরভাগ ব্রাউজার আপনাকে ইউআরএল স্ট্রিং-এ একটি আনকোড করা মান ব্যবহার করতে দেবে (উদাহরণস্বরূপ, 駅) এবং এটি পর্দার পিছনে আপনার জন্য এনকোড করবে। যাইহোক, এটা সম্ভব যে কেউ আপনার চার্ট ইউআরএল দেখছে এমন একটি ব্রাউজার ব্যবহার করছে যা এটি করে না, তাই সাধারণত UTF-8 এবং ইউআরএল-এনকোড করা টেক্সট স্ট্রিংগুলিতে সমস্ত অ-ASCII অক্ষরগুলিকে এনকোড করা ভাল। মনে রাখবেন যে এটি শুধুমাত্র বুদবুদ বা পিনে দেখানো পাঠ্যের জন্য, &, | বা URL সিনট্যাক্সের অংশ অন্য অক্ষরের জন্য নয়।
ডায়নামিক আইকন মার্কারগুলি নির্দিষ্ট করার জন্য chem
প্যারামিটার ব্যবহার করার সময়, আপনাকে অবশ্যই আপনার পাঠ্যের নির্দিষ্ট অক্ষরগুলি এড়িয়ে যেতে হবে, যেমন chem
ডকুমেন্টেশনে বর্ণনা করা হয়েছে।
ছায়া
আপনি অনেক আইকনে ছায়া যোগ করতে পারেন, অথবা আইকন ছাড়াই কিছু আইকনের জন্য ছায়াও আঁকতে পারেন!
ছায়াযুক্ত আইকন
এই আইকনগুলির অনেকগুলি ছায়া দিয়ে বা ছাড়াই আঁকা যায়। যদি ছায়া করা একটি বিকল্প হয়, তাহলে আইকনের নামের একটি সংস্করণ থাকবে যা _withshadow
এ শেষ হবে এবং সেই সমাপ্তি ছাড়াই আরেকটি সংস্করণ থাকবে। আপনি ছায়া চান কি না তার উপর নির্ভর করে আপনি একটি আইকন নির্দিষ্ট করতে পারেন যেটি শেষ হবে।
এখানে একটি মাঝারি টেক্সট বুদবুদ এবং ছায়া সহ এবং ছাড়া একটি পিনের উদাহরণ রয়েছে:
chst=d_bubble_icon_text_big | chst=d_bubble_icon_text_big_withshadow |
chst=d_map_pin_icon | chst=d_map_pin_icon_withshadow |
ফ্রিস্ট্যান্ডিং শ্যাডোস
কিছু আইকন প্রকার আপনাকে নিজেই তাদের ছায়া আঁকতে দেয়। আপনি এটি করতে চাইতে পারেন যদি আপনি একটি গ্রাফিকে একাধিক ওভারল্যাপ করা ছায়াযুক্ত আইকন ব্যবহার করেন এবং সেগুলি এতটাই কাছাকাছি থাকে যে একটি থেকে ছায়া অন্য আইকনের উপর পড়ে। উদাহরণস্বরূপ, এখানে দুটি ছায়াযুক্ত বুদবুদ রয়েছে, প্রথমে রবার্ট আঁকা, তারপর এলিস:
অ্যালিসের ছায়া কীভাবে রবার্টকে আংশিকভাবে ঢেকে রাখে তা খেয়াল করুন। এটি ঠিক করতে, আপনি প্রথমে অ্যালিস ছায়া আঁকতে পারেন, তারপর রবার্ট বুদবুদ, তারপর ছায়া ছাড়া অ্যালিস। সম্ভবত আলো এবং ছায়ার পরিপ্রেক্ষিতে সম্পূর্ণ বাস্তবসম্মত নয়, তবে এটি একটি বুদবুদকে অন্যটির ছায়া দিয়ে অস্পষ্ট করা এড়িয়ে যায়:
chem=
y;s=bubble_text_small_shadow;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice, no shadow
y;s=bubble_text_small_withshadow;d=bbtr,Robert,FF8,000;ds=0;dp=3.5;py=1 // Robert with shadow
y;s=bubble_text_small;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice shadow
সমস্ত চিহ্নিতকারী 1 ( py=1
) এর একই z-ক্রম নির্দিষ্ট করে, তাই তারা তালিকাভুক্ত ক্রম অনুসারে চার্ট উপাদানগুলির উপরে (চার্ট লাইন) আঁকা হয়। প্রথমে এলিস ছায়া আঁকা হয়, তারপর তার উপরে রবার্ট বুদবুদ এবং সবশেষে এলিস বুদবুদ।
আপনি একা এর ছায়া আঁকতে পারেন কিনা তা জানতে আপনার নির্দিষ্ট আইকনের প্রকারের ডকুমেন্টেশন দেখুন।
প্রাসঙ্গিক আইকন
আপনি একটি আইকন নির্দিষ্ট করতে পারেন যা তাদের নির্ধারিত পয়েন্ট অনুসারে এর রঙ, আকার বা স্ট্যাকিং পরিবর্তিত হয়। এই আইকনের প্রকারগুলি শুধুমাত্র ডায়নামিক আইকন মার্কার হিসাবে উপলব্ধ ( chem
প্যারামিটার), ফ্রিস্ট্যান্ডিং আইকন হিসাবে নয়।
এই আইকনগুলি সিরিজ ছাড়া অন্য কোনও সিরিজে রেন্ডার করা যেতে পারে যা তাদের রঙ, আকার বা স্ট্যাকিং তথ্য নির্দিষ্ট করে। এর মানে হল যে chem
প্যারামিটারের ds
মান আইকনটি রেন্ডার করার জন্য সিরিজটি নির্দিষ্ট করে, তবে আইকনের আকার বা রঙ নির্ধারণের মানগুলি নীচে দেওয়া প্যারামিটারগুলিতে নির্দিষ্ট করা হয়েছে৷ এর একটি ভাল ব্যবহার হল আইকন ডেটার জন্য একটি লুকানো ডেটা সিরিজ ব্যবহার করা, তবে আইকনগুলিকে দৃশ্যমান লাইন বা বারে রেন্ডার করা। এখানে কিছু উদাহরণঃ:
উৎস সিরিজে রেন্ডার করা আইকন | অ-উৎস সিরিজে রেন্ডার করা আইকন | লুকানো সিরিজ ব্যবহার করে আইকন |
---|---|---|
chem=
| chem=
| chd=t1:
|
প্রসঙ্গ মার্কার প্রকার
মার্কার টাইপ | chem এর মান | উদাহরণ |
---|---|---|
রঙের বৈচিত্র | s=cm_color | |
আকারের বৈচিত্র | s=cm_size | |
রঙ এবং আকারের বৈচিত্র্য | s=cm_color_size | |
স্ট্যাকিং বৈচিত্র | s=cm_repeat | |
স্ট্যাকিং এবং রঙের বৈচিত্র | s=cm_repeat_color |
প্রাসঙ্গিক আইকনগুলির জন্য প্রান্তিককরণ স্ট্রিং
প্রাসঙ্গিক আইকনগুলি ডেটা পয়েন্টে আইকনের একটি প্রান্তিককরণ এবং অফসেট নির্দিষ্ট করতে একটি ঐচ্ছিক প্রান্তিককরণ স্ট্রিং সমর্থন করে। এই স্ট্রিংটিতে নিম্নলিখিত সিনট্যাক্স রয়েছে:
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- প্রান্তিককরণ
- বিন্দুতে আইকনের প্রান্তিককরণ বর্ণনা করে দুটি অক্ষর। উদাহরণগুলির মধ্যে রয়েছে
tl
(উপরে বাম), এবংrb
(নীচে ডানদিকে)। একটি সম্পূর্ণ তালিকা এবং বর্ণনার জন্যchem
প্যারামিটারের alignment_string প্যারামিটার বিবরণ দেখুন। - h_anchor_offset
- [ ঐচ্ছিক ] অ্যাঙ্কর পয়েন্টের অনুভূমিক অফসেট, পিক্সেলে। শূন্য সহ মানগুলির পূর্বে অবশ্যই + বা - হতে হবে৷ গুরুত্বপূর্ণ: আপনাকে অবশ্যই url-এনকোড করতে হবে + %2B হিসাবে।
- v_anchor_offset
- [ ঐচ্ছিক ] অ্যাঙ্কর পয়েন্টের উল্লম্ব অফসেট, পিক্সেলে। শূন্য সহ মানগুলির পূর্বে অবশ্যই + বা - হতে হবে৷ গুরুত্বপূর্ণ: আপনাকে অবশ্যই url-এনকোড করতে হবে + %2B হিসাবে।
মনে রাখবেন আপনি অনুভূমিক এবং উল্লম্ব অফসেটগুলি নির্দিষ্ট করতে chem
প্যারামিটারের of
ব্যবহার করতে পারেন। আপনি যদি of
এবং h_anchor_offset v_anchor_offset
মান উভয় নির্দিষ্ট করেন, তাহলে সমস্ত অফসেট আপনার আইকনে প্রয়োগ করা হবে।
উদাহরণ:
hb-0-0 অনুভূমিক কেন্দ্র নীচে কোন অফসেট | lb-0-0 নিচে বামে কোন অফসেট | rb-0-0 নিচের ডানে কোন অফসেট | ht-0-0 অনুভূমিক শীর্ষ কোন অফসেট |
hb-20-0 অনুভূমিক কেন্দ্র নীচে -20 অনুভূমিক 0 উল্লম্ব | hb%2b20-0 অনুভূমিক কেন্দ্র নীচে +20 অনুভূমিক 0 উল্লম্ব | hb-0%2b10 অনুভূমিক কেন্দ্র নীচে 0 অনুভূমিক +10 উল্লম্ব | hb-0-20 অনুভূমিক কেন্দ্র নীচে 0 অনুভূমিক -20 উল্লম্ব |
রঙের তারতম্য ( cm_color
)
আপনি একটি প্রাসঙ্গিক চার্ট মার্কারের রঙের পরিবর্তন করতে পারেন যে পয়েন্টটি এটি প্রতিনিধিত্ব করে। আপনাকে অবশ্যই একটি রঙের পরিসর নির্দিষ্ট করতে হবে এবং ডেটা মান সেই পরিসরের মধ্যে একটি সংশ্লিষ্ট রঙে স্কেল করা হবে।
বাক্য গঠন
chem=y;s=cm_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<icon_size>,<outline_color>,<alignment>
- < icon_shape >
- ব্যবহার করার জন্য আইকন। পৃষ্ঠার শেষে তালিকাভুক্ত ছবিগুলির একটিকে চিহ্নিত করে একটি আইডি স্ট্রিং নির্দিষ্ট করুন৷
- < color_data_series >
- ডেটা সিরিজের শূন্য-ভিত্তিক সূচক আইকনগুলির রঙের তারতম্যের জন্য ব্যবহৃত হয়।
- < low_color >
- তিন- বা ছয়-সংখ্যার এইচটিএমএল হেক্সাডেসিমেল রঙ হিসাবে পরিসরে নিম্ন রঙের মান (কোনও # চিহ্ন নেই)। এটি উপলব্ধ ডেটা পরিসরের সর্বনিম্ন সম্ভাব্য মানের সাথে যুক্ত।
- < মধ্য_রঙ >
- তিন- বা ছয়-সংখ্যার এইচটিএমএল হেক্সাডেসিমেল রঙ (কোন # চিহ্ন নেই) হিসাবে পরিসরের মধ্যম রঙের মান। এটি উপলব্ধ ডেটা পরিসরের মধ্যম মানের সাথে যুক্ত।
- < হাই_রঙ >
- তিন- বা ছয়-সংখ্যার এইচটিএমএল হেক্সাডেসিমেল রঙ হিসাবে পরিসরে উচ্চ রঙের মান (কোনও # চিহ্ন নেই)। এটি উপলব্ধ ডেটা পরিসরের সর্বোচ্চ সম্ভাব্য মানের সাথে যুক্ত।
- < icon_size >
- আইকনের আকার, পিক্সেলে। নিম্নলিখিত মানগুলি সমর্থিত: 12, 16, 24৷
- < outline_color >
- আইকনের রূপরেখার রঙ, একটি তিন- বা ছয়-সংখ্যার HTML হেক্সাডেসিমেল রঙ (কোনও # চিহ্ন নেই)।
- < প্রান্তিককরণ >
- একটি ঐচ্ছিক স্ট্রিং আইকন প্রান্তিককরণ এবং অফসেট বর্ণনা করে।
উদাহরণ
| chem=y;s=cm_color; |
আকারের তারতম্য ( cm_size
)
আপনি আপনার পছন্দের ডেটা সিরিজ অনুসারে একটি প্রাসঙ্গিক চার্ট মার্কারের আকার পরিবর্তন করতে পারেন।
বাক্য গঠন
chem=y;s=cm_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<fill_color>,<alignment>
- < icon_type >
- আইকনের আকৃতি। নিম্নলিখিত মানগুলির মধ্যে একটি চয়ন করুন:
maps_pin
,disk
, বাsquare
. - < size_data_series >
- ডেটা সিরিজের শূন্য-ভিত্তিক সূচক আইকনগুলির আকারের তারতম্যের জন্য ব্যবহৃত হয়।
- < zero_value_size >
- আইকনের বেস সাইজ, সিরিজের জন্য ন্যূনতম ডেটা মান।
- < size_multiplier >
- একটি আকার স্কেলিং ফ্যাক্টর. চূড়ান্ত আইকনের আকার গণনা করতে প্রতিটি আইকনের ডেটা মান এবং ন্যূনতম সিরিজ মানের মধ্যে পার্থক্যের সাথে এই মানটিকে গুণ করা হয়। অতএব, 0 ডেটা মানের একটি আইকন এই গুণক দ্বারা প্রভাবিত হবে না।
- < মিন_সাইজ >
- যেকোনো আইকনের জন্য ন্যূনতম আকার, পিক্সেলে।
- < outline_color >
- আইকনের রূপরেখার রঙ, একটি তিন- বা ছয়-সংখ্যার HTML হেক্সাডেসিমেল রঙ (কোনও # চিহ্ন নেই)।
- < fill_color >
- তিন- বা ছয়-সংখ্যার এইচটিএমএল হেক্সাডেসিমেল রঙ (কোন # চিহ্ন নেই) হিসাবে আইকনের জন্য পূরণ রঙ।
- < প্রান্তিককরণ >
- একটি ঐচ্ছিক স্ট্রিং আইকন প্রান্তিককরণ এবং অফসেট বর্ণনা করে।
উদাহরণ
একটি মৌলিক উদাহরণ। শূন্য মান সহ আইকনটি শূন্য মানের আকারে রেন্ডার করা হয়, যা 30 পিক্সেল। তথ্যের সাথে সাথে আকার বৃদ্ধি পায়। | chd=t:0,10,20,30,40,50,60,70 |
এই উদাহরণে, আইকনগুলি হলুদ লাইন থেকে তাদের আকারের ডেটা নেয়, কিন্তু নীল রেখায় রেন্ডার করা হয়।
| chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
রঙ এবং আকারের তারতম্য ( cm_color_size
)
আপনি আপনার পছন্দের ডেটা সিরিজ অনুসারে একটি প্রাসঙ্গিক চার্ট মার্কার রঙ এবং আকার উভয়ই পরিবর্তন করতে পারেন।
বাক্য গঠন
chem=y;s=cm_color_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<alignment>
- < icon_type >
- আইকনের আকৃতি। নিম্নলিখিত মানগুলির মধ্যে একটি চয়ন করুন:
maps_pin
,disk
, বাsquare
. - < রঙ_ডেটা_সিরিজ >
- ডেটা সিরিজের শূন্য-ভিত্তিক সূচক আইকনগুলির রঙের তারতম্যের জন্য ব্যবহৃত হয়।
- < low_color >
- তিন- বা ছয়-সংখ্যার এইচটিএমএল হেক্সাডেসিমেল রঙ হিসাবে পরিসরে নিম্ন রঙের মান (কোনও # চিহ্ন নেই)। এটি উপলব্ধ ডেটা পরিসরের সর্বনিম্ন সম্ভাব্য মানের সাথে যুক্ত।
- < মধ্য_রঙ >
- তিন- বা ছয়-সংখ্যার এইচটিএমএল হেক্সাডেসিমেল রঙ (কোন # চিহ্ন নেই) হিসাবে পরিসরের মধ্যম রঙের মান। এটি উপলব্ধ ডেটা পরিসরের মধ্যম মানের সাথে যুক্ত।
- < হাই_রঙ >
- তিন- বা ছয়-সংখ্যার এইচটিএমএল হেক্সাডেসিমেল রঙ হিসাবে পরিসরে উচ্চ রঙের মান (কোনও # চিহ্ন নেই)। এটি উপলব্ধ ডেটা পরিসরের সর্বোচ্চ সম্ভাব্য মানের সাথে যুক্ত।
- < size_data_series >
- ডেটা সিরিজের শূন্য-ভিত্তিক সূচক আইকনগুলির আকারের তারতম্যের জন্য ব্যবহৃত হয়।
- < zero_value_size >
- আইকনের বেস সাইজ, সিরিজের জন্য ন্যূনতম ডেটা মান।
- < size_multiplier >
- একটি আকার স্কেলিং ফ্যাক্টর. চূড়ান্ত আইকনের আকার গণনা করতে প্রতিটি আইকনের ডেটা মান এবং ন্যূনতম সিরিজ মানের মধ্যে পার্থক্যের সাথে এই মানটিকে গুণ করা হয়। অতএব, 0 ডেটা মানের একটি আইকন এই গুণক দ্বারা প্রভাবিত হবে না।
- < মিন_সাইজ >
- যেকোনো আইকনের জন্য ন্যূনতম আকার, পিক্সেলে।
- < outline_color >
- আইকনের রূপরেখার রঙ, একটি তিন- বা ছয়-সংখ্যার HTML হেক্সাডেসিমেল রঙ (কোনও # চিহ্ন নেই)।
- < প্রান্তিককরণ >
- একটি ঐচ্ছিক স্ট্রিং আইকন প্রান্তিককরণ এবং অফসেট বর্ণনা করে।
উদাহরণ
এই উদাহরণ দুটি লাইন ব্যবহার করে. পিনগুলি যে সিরিজে রেন্ডার করা হয়েছে সেখান থেকে রঙিন ডেটা ব্যবহার করে, তবে অন্য সিরিজের আকারের ডেটা ব্যবহার করে।
| chd=s:0akAZtnkmi,nbMPJOKXXS |
স্ট্যাকিং বৈচিত্র ( cm_repeat
)
আপনি একটি নির্দিষ্ট পয়েন্টে ডেটা মান অনুযায়ী আইকনের স্ট্যাকের উচ্চতা পরিবর্তন করতে পারেন।
বাক্য গঠন
chem=y;s=cm_repeat;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<fill_color>,<outline_color>,<spacing>,<alignment>
- < icon_shape >
- ব্যবহার করার জন্য আইকন। পৃষ্ঠার শেষে তালিকাভুক্ত ছবিগুলির একটিকে চিহ্নিত করে একটি আইডি স্ট্রিং নির্দিষ্ট করুন৷
- < পুনরাবৃত্তি_সিরিজ_সূচী >
- এই পয়েন্টে কতগুলি আইকন রাখতে হবে তা গণনা করতে ব্যবহৃত ডেটা সিরিজের শূন্য-ভিত্তিক সূচক।
- < স্কেলিং_ফ্যাক্টর >
- সোর্স ডেটা সিরিজের মানটি 0 থেকে 1 পর্যন্ত একটি মানের মধ্যে স্কেল করা হয় এবং এই বিন্দুতে কতগুলি মার্কার রাখতে হবে তা নির্ধারণ করতে এই মানের দ্বারা গুণ করা হয়। আংশিক মান কাটা হয়.
- < stacking_direction >
- স্ট্যাকিং দিক: অনুভূমিক জন্য হয় "h" (ছোট হাতের) অথবা উল্লম্বের জন্য "V" (বড়হাতের)।
- < icon_size >
- প্রতিটি মার্কারের আকার, পিক্সেলে। নিম্নলিখিত মানগুলি সমর্থিত: 12, 16, 24৷
- < fill_color >
- তিন- বা ছয়-সংখ্যার এইচটিএমএল হেক্সাডেসিমেল রঙ (কোন # চিহ্ন নেই) হিসাবে আইকনের জন্য পূরণ রঙ।
- < outline_color >
- আইকনের রূপরেখার রঙ, একটি তিন- বা ছয়-সংখ্যার HTML হেক্সাডেসিমেল রঙ (কোনও # চিহ্ন নেই)।
- < ব্যবধান >
- একটি স্ট্যাকের প্রতিটি মার্কারের মধ্যে পিক্সেলে কতটা জায়গা রাখতে হবে।
- < প্রান্তিককরণ >
- একটি ঐচ্ছিক স্ট্রিং আইকন প্রান্তিককরণ এবং অফসেট বর্ণনা করে।
উদাহরণ
এই উদাহরণটি একটি দ্বিতীয় ডামি ডেটা সিরিজ ব্যবহার করে। এটি চার্টে রেন্ডার করা হয় না, তবে চার্টের নীচে থেকে শুরু করে সমস্ত স্ট্যাকগুলিকে সমানভাবে স্থান দেওয়ার উপায় হিসাবে ব্যবহৃত হয়।
| chd=s1:0akAZtnkmi,AAAAAAAAAA |
স্ট্যাকিং এবং রঙের ভিন্নতা ( cm_repeat_color
)
আপনি একটি নির্দিষ্ট পয়েন্টে ডেটা মান অনুসারে একটি আইকন স্ট্যাকের উচ্চতা এবং রঙ উভয়ই পরিবর্তন করতে পারেন।
বাক্য গঠন
chem=y;s=cm_repeat_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<outline_color>,<spacing>,<alignment>
- < icon_shape >
- ব্যবহার করার জন্য আইকন। পৃষ্ঠার শেষে তালিকাভুক্ত ছবিগুলির একটিকে চিহ্নিত করে একটি আইডি স্ট্রিং নির্দিষ্ট করুন৷
- < পুনরাবৃত্তি_সিরিজ_সূচী >
- এই পয়েন্টে কতগুলি আইকন রাখতে হবে তা গণনা করতে ব্যবহৃত ডেটা সিরিজের শূন্য-ভিত্তিক সূচক।
- < স্কেলিং_ফ্যাক্টর >
- সোর্স ডেটা সিরিজের মানটি 0 থেকে 1 পর্যন্ত একটি মানের মধ্যে স্কেল করা হয় এবং এই বিন্দুতে কতগুলি মার্কার রাখতে হবে তা নির্ধারণ করতে এই মানের দ্বারা গুণ করা হয়। আংশিক মান কাটা হয়.
- < stacking_direction >
- স্ট্যাকিং দিক: অনুভূমিক জন্য হয় "h" (ছোট হাতের) অথবা উল্লম্বের জন্য "V" (বড়হাতের)।
- < icon_size >
- প্রতিটি মার্কারের আকার, পিক্সেলে। নিম্নলিখিত মানগুলি সমর্থিত: 12, 16, 24৷
- < color_data_series >
- ডেটা সিরিজের শূন্য-ভিত্তিক সূচক আইকনগুলির রঙের তারতম্যের জন্য ব্যবহৃত হয়।
- < low_color >
- তিন- বা ছয়-সংখ্যার এইচটিএমএল হেক্সাডেসিমেল রঙ হিসাবে পরিসরে নিম্ন রঙের মান (কোনও # চিহ্ন নেই)। এটি উপলব্ধ ডেটা পরিসরের সর্বনিম্ন সম্ভাব্য মানের সাথে যুক্ত।
- < মধ্য_রঙ >
- তিন- বা ছয়-সংখ্যার এইচটিএমএল হেক্সাডেসিমেল রঙ (কোন # চিহ্ন নেই) হিসাবে পরিসরের মধ্যম রঙের মান। এটি উপলব্ধ ডেটা পরিসরের মধ্যম মানের সাথে যুক্ত।
- < হাই_রঙ >
- তিন- বা ছয়-সংখ্যার এইচটিএমএল হেক্সাডেসিমেল রঙ হিসাবে পরিসরে উচ্চ রঙের মান (কোনও # চিহ্ন নেই)। এটি উপলব্ধ ডেটা পরিসরের সর্বোচ্চ সম্ভাব্য মানের সাথে যুক্ত।
- < outline_color >
- আইকনের রূপরেখার রঙ, একটি তিন- বা ছয়-সংখ্যার HTML হেক্সাডেসিমেল রঙ (কোনও # চিহ্ন নেই)।
- < ব্যবধান >
- একটি স্ট্যাকের প্রতিটি মার্কারের মধ্যে পিক্সেলে কতটা জায়গা রাখতে হবে।
- < প্রান্তিককরণ >
- একটি ঐচ্ছিক স্ট্রিং আইকন প্রান্তিককরণ এবং অফসেট বর্ণনা করে।
উদাহরণ
| chem= |
এই পৃষ্ঠাটি বর্ণনা করে যে কীভাবে বিভিন্ন ধরনের কলআউট, বুদবুদ, পিন এবং অন্যান্য গ্রাফিক্স তৈরি করতে হয় যা URL দ্বারা অনুরোধ করা যেতে পারে, বা অন্যান্য চার্টের শীর্ষে মার্কার হিসাবে যোগ করা যেতে পারে।
সুচিপত্র
ভূমিকা
চার্ট API আপনাকে বিভিন্ন ধরণের আকর্ষণীয় কলআউট, পিন বা বুদবুদ তৈরি করতে সক্ষম করে যা পাঠ্য এবং চিত্রগুলিকে মিশ্রিত করে। এই আইটেমগুলিকে ডাইনামিক আইকন বলা হয়। আপনি হয় একটি ফ্রিস্ট্যান্ডিং ডায়নামিক আইকন ইমেজ তৈরি করতে পারেন, অথবা আপনি chem
প্যারামিটার ব্যবহার করে মার্কার টাইপ হিসাবে আপনার চার্টের উপরে একটি ডায়নামিক আইকন স্থাপন করতে পারেন। এই পৃষ্ঠাটি বর্ণনা করবে কিভাবে গতিশীল আইকনগুলিকে ফ্রিস্ট্যান্ডিং ইমেজ হিসাবে বা অন্য চার্টে চিহ্নিতকারী হিসাবে তৈরি করা যায়। ইনফোগ্রাফিক্স ডায়নামিক আইকন রেফারেন্স পৃষ্ঠাটি উপলব্ধ সব ধরনের গতিশীল মার্কার প্রকারের বর্ণনা করে।
একটি ডায়নামিক আইকন তৈরির জন্য সিনট্যাক্স নির্ভর করে আপনি একটি ফ্রিস্ট্যান্ডিং আইকন চান কিনা, বা অন্য চার্টে একটি ডায়নামিক মার্কার হিসেবে চান।
ফ্রিস্ট্যান্ডিং আইকন
আপনি একটি গতিশীল আইকন চিত্রের জন্য অনুরোধ করতে পারেন যেভাবে আপনি অন্যান্য চার্টগুলির জন্য অনুরোধ করেন৷ একটি ফ্রিস্ট্যান্ডিং ডায়নামিক আইকন অন্যান্য চার্টের চেয়ে ভিন্ন প্যারামিটারের সেট সমর্থন করে:
প্যারামিটার | প্রয়োজনীয় বা ঐচ্ছিক | বর্ণনা |
---|---|---|
chst=< icon_string_constant > | প্রয়োজন | কোন ধরনের আইকন তৈরি করতে হবে তা বর্ণনা করে।
|
chld=< icon_data > | প্রয়োজন | আইকনের আকার, ঘূর্ণন, পাঠ্য এবং অন্যান্য প্রয়োজনীয় ডেটা বর্ণনা করতে ব্যবহৃত নির্দিষ্ট ডেটা।
|
cht | ব্যবহার করা হয় না | ফ্রিস্ট্যান্ডিং ডায়নামিক আইকন চার্ট cht প্যারামিটার ব্যবহার করে না। |
chs | ব্যবহার করা হয় না | ফ্রিস্ট্যান্ডিং ডায়নামিক আইকন চার্ট chs প্যারামিটার ব্যবহার করে না। |
chd | ব্যবহার করা হয় না | একটি ফ্রিস্ট্যান্ডিং ডায়নামিক আইকনে ডেটা পাস করতে chld প্যারামিটার ব্যবহার করুন। |
উদাহরণ
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
ডায়নামিক মার্কার
আপনি chem
প্যারামিটার ব্যবহার করে বিভিন্ন ধরণের চার্টে মার্কার টাইপ হিসাবে একটি ডায়নামিক আইকন এম্বেড করতে পারেন। কিভাবে শিখতে chem
ডকুমেন্টেশন দেখুন.
উদাহরণ
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
সাধারণ আইকন বৈশিষ্ট্য
বেশিরভাগ আইকনগুলির সাথে পাঠ্য স্ট্রিং বা ছায়া যুক্ত থাকতে পারে।
টেক্সট স্ট্রিং
চার্ট API-এ পাস করা সমস্ত প্রদর্শন পাঠ্য অবশ্যই UTF-8 এনকোড করা এবং তারপর URL-এনকোড করা আবশ্যক৷ এটি শুধুমাত্র অ-ইউআরএল-নিরাপদ অক্ষরগুলিকে প্রভাবিত করে (ইউআরএল-নিরাপদ অক্ষরগুলি বেশিরভাগ ইংরেজি অক্ষর az উভয় বড় এবং ছোট হাতের, প্লাস বিরাম চিহ্নের একটি ছোট সেট)। উদাহরণস্বরূপ, "è" অক্ষরের জন্য UTF-8 এবং ইউআরএল-এনকোড করা মান হল " %C3%A8
", এবং চীনা অক্ষরের জন্য 駅 হল " %E9%A7%85
"৷ বেশিরভাগ ব্রাউজার আপনাকে ইউআরএল স্ট্রিং-এ একটি আনকোড করা মান ব্যবহার করতে দেবে (উদাহরণস্বরূপ, 駅) এবং এটি পর্দার পিছনে আপনার জন্য এনকোড করবে। যাইহোক, এটা সম্ভব যে কেউ আপনার চার্ট ইউআরএল দেখছে এমন একটি ব্রাউজার ব্যবহার করছে যা এটি করে না, তাই সাধারণত UTF-8 এবং ইউআরএল-এনকোড করা টেক্সট স্ট্রিংগুলিতে সমস্ত অ-ASCII অক্ষরগুলিকে এনকোড করা ভাল। মনে রাখবেন যে এটি শুধুমাত্র বুদবুদ বা পিনে দেখানো পাঠ্যের জন্য, &, | বা URL সিনট্যাক্সের অংশ অন্য অক্ষরের জন্য নয়।
ডায়নামিক আইকন মার্কারগুলি নির্দিষ্ট করার জন্য chem
প্যারামিটার ব্যবহার করার সময়, আপনাকে অবশ্যই আপনার পাঠ্যের নির্দিষ্ট অক্ষরগুলি এড়িয়ে যেতে হবে, যেমন chem
ডকুমেন্টেশনে বর্ণনা করা হয়েছে।
ছায়া
আপনি অনেক আইকনে ছায়া যোগ করতে পারেন, অথবা আইকন ছাড়াই কিছু আইকনের জন্য ছায়াও আঁকতে পারেন!
ছায়াযুক্ত আইকন
এই আইকনগুলির অনেকগুলি ছায়া দিয়ে বা ছাড়াই আঁকা যায়। যদি ছায়া করা একটি বিকল্প হয়, তাহলে আইকনের নামের একটি সংস্করণ থাকবে যা _withshadow
এ শেষ হবে এবং সেই সমাপ্তি ছাড়াই আরেকটি সংস্করণ থাকবে। আপনি ছায়া চান কি না তার উপর নির্ভর করে আপনি একটি আইকন নির্দিষ্ট করতে পারেন যেটি শেষ হবে।
এখানে একটি মাঝারি টেক্সট বুদবুদ এবং ছায়া সহ এবং ছাড়া একটি পিনের উদাহরণ রয়েছে:
chst=d_bubble_icon_text_big | chst=d_bubble_icon_text_big_withshadow |
chst=d_map_pin_icon | chst=d_map_pin_icon_withshadow |
ফ্রিস্ট্যান্ডিং শ্যাডোস
কিছু আইকন প্রকার আপনাকে নিজেই তাদের ছায়া আঁকতে দেয়। আপনি এটি করতে চাইতে পারেন যদি আপনি একটি গ্রাফিকে একাধিক ওভারল্যাপ করা ছায়াযুক্ত আইকন ব্যবহার করেন এবং সেগুলি এতটাই কাছাকাছি থাকে যে একটি থেকে ছায়া অন্য আইকনের উপর পড়ে। উদাহরণস্বরূপ, এখানে দুটি ছায়াযুক্ত বুদবুদ রয়েছে, প্রথমে রবার্ট আঁকা, তারপর এলিস:
অ্যালিসের ছায়া কীভাবে রবার্টকে আংশিকভাবে ঢেকে রাখে তা খেয়াল করুন। এটি ঠিক করতে, আপনি প্রথমে অ্যালিস ছায়া আঁকতে পারেন, তারপর রবার্ট বুদবুদ, তারপর ছায়া ছাড়া অ্যালিস। সম্ভবত আলো এবং ছায়ার পরিপ্রেক্ষিতে সম্পূর্ণ বাস্তবসম্মত নয়, তবে এটি একটি বুদবুদকে অন্যটির ছায়া দিয়ে অস্পষ্ট করা এড়িয়ে যায়:
chem=
y;s=bubble_text_small_shadow;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice, no shadow
y;s=bubble_text_small_withshadow;d=bbtr,Robert,FF8,000;ds=0;dp=3.5;py=1 // Robert with shadow
y;s=bubble_text_small;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice shadow
সমস্ত চিহ্নিতকারী 1 ( py=1
) এর একই z-ক্রম নির্দিষ্ট করে, তাই তারা তালিকাভুক্ত ক্রম অনুসারে চার্ট উপাদানগুলির উপরে (চার্ট লাইন) আঁকা হয়। প্রথমে এলিস ছায়া আঁকা হয়, তারপর তার উপরে রবার্ট বুদবুদ এবং সবশেষে এলিস বুদবুদ।
আপনি একা এর ছায়া আঁকতে পারেন কিনা তা জানতে আপনার নির্দিষ্ট আইকনের প্রকারের ডকুমেন্টেশন দেখুন।
প্রাসঙ্গিক আইকন
আপনি একটি আইকন নির্দিষ্ট করতে পারেন যা তাদের নির্ধারিত পয়েন্ট অনুসারে এর রঙ, আকার বা স্ট্যাকিং পরিবর্তিত হয়। এই আইকনের প্রকারগুলি শুধুমাত্র ডায়নামিক আইকন মার্কার হিসাবে উপলব্ধ ( chem
প্যারামিটার), ফ্রিস্ট্যান্ডিং আইকন হিসাবে নয়।
এই আইকনগুলি সিরিজ ছাড়া অন্য কোনও সিরিজে রেন্ডার করা যেতে পারে যা তাদের রঙ, আকার বা স্ট্যাকিং তথ্য নির্দিষ্ট করে। এর মানে হল যে chem
প্যারামিটারের ds
মান আইকনটি রেন্ডার করার জন্য সিরিজটি নির্দিষ্ট করে, তবে আইকনের আকার বা রঙ নির্ধারণের মানগুলি নীচে দেওয়া প্যারামিটারগুলিতে নির্দিষ্ট করা হয়েছে৷ এর একটি ভাল ব্যবহার হল আইকন ডেটার জন্য একটি লুকানো ডেটা সিরিজ ব্যবহার করা, তবে আইকনগুলিকে দৃশ্যমান লাইন বা বারে রেন্ডার করা। এখানে কিছু উদাহরণঃ:
উৎস সিরিজে রেন্ডার করা আইকন | অ-উৎস সিরিজে রেন্ডার করা আইকন | লুকানো সিরিজ ব্যবহার করে আইকন |
---|---|---|
chem=
| chem=
| chd=t1:
|
প্রসঙ্গ মার্কার প্রকার
মার্কার টাইপ | chem এর মান | উদাহরণ |
---|---|---|
রঙের বৈচিত্র | s=cm_color | |
আকারের বৈচিত্র | s=cm_size | |
রঙ এবং আকারের বৈচিত্র্য | s=cm_color_size | |
স্ট্যাকিং বৈচিত্র | s=cm_repeat | |
স্ট্যাকিং এবং রঙের বৈচিত্র | s=cm_repeat_color |
প্রাসঙ্গিক আইকনগুলির জন্য প্রান্তিককরণ স্ট্রিং
প্রাসঙ্গিক আইকনগুলি ডেটা পয়েন্টে আইকনের একটি প্রান্তিককরণ এবং অফসেট নির্দিষ্ট করতে একটি ঐচ্ছিক প্রান্তিককরণ স্ট্রিং সমর্থন করে। এই স্ট্রিংটিতে নিম্নলিখিত সিনট্যাক্স রয়েছে:
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- প্রান্তিককরণ
- বিন্দুতে আইকনের প্রান্তিককরণ বর্ণনা করে দুটি অক্ষর। উদাহরণগুলির মধ্যে রয়েছে
tl
(উপরে বাম), এবংrb
(নীচে ডানদিকে)। একটি সম্পূর্ণ তালিকা এবং বর্ণনার জন্যchem
প্যারামিটারের alignment_string প্যারামিটার বিবরণ দেখুন। - h_anchor_offset
- [ Optional ] The horizontal offset of the anchor point, in pixels. Values including zero must be preceded by either + or -. Important: You must url-encode + as %2B.
- v_anchor_offset
- [ Optional ] The vertical offset of the anchor point, in pixels. Values including zero must be preceded by either + or -. Important: You must url-encode + as %2B.
Note that you can also use the of
component of the chem
parameter to specify horizontal and vertical offsets. If you specify both the of
component and h_anchor_offset v_anchor_offset
values, all offsets will be applied to your icon.
উদাহরণ:
hb-0-0 Horizontal center bottom No offsets | lb-0-0 Bottom left No offsets | rb-0-0 Bottom right No offsets | ht-0-0 Horizontal top No offsets |
hb-20-0 Horizontal center bottom -20 horizontal 0 vertical | hb%2b20-0 Horizontal center bottom +20 horizontal 0 vertical | hb-0%2b10 Horizontal center bottom 0 horizontal +10 vertical | hb-0-20 Horizontal center bottom 0 horizontal -20 vertical |
Color Variation ( cm_color
)
You can vary the color of a contextual chart marker according to the point that it represents. You must specify a color range, and the data value will be scaled to a corresponding color within that range.
বাক্য গঠন
chem=y;s=cm_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<icon_size>,<outline_color>,<alignment>
- < icon_shape >
- The icon to use. Specify an ID string identifying one of the images listed at the end of the page .
- < color_data_series >
- The zero-based index of the data series used to vary the color of the icons.
- < low_color >
- The low color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the lowest possible value in the available data range.
- < middle_color >
- The middle color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the middle value in the available data range.
- < high_color >
- The high color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the highest possible value in the available data range.
- < icon_size >
- The size of the icon, in pixels. The following values are supported: 12, 16, 24.
- < outline_color >
- The outline color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < alignment >
- An optional string describing the icon alignment and offset.
উদাহরণ
| chem=y;s=cm_color; |
Size Variation ( cm_size
)
You can vary the size alone of a contextual chart marker, according to the data series of your choice.
বাক্য গঠন
chem=y;s=cm_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<fill_color>,<alignment>
- < icon_type >
- The shape of the icon. Choose one of the following values:
maps_pin
,disk
, orsquare
. - < size_data_series >
- The zero-based index of the data series used to vary the size of the icons.
- < zero_value_size >
- The base size of the icon, at the minimum data value for the series.
- < size_multiplier >
- A size scaling factor. This value is multiplied against the difference between each icon's data value and the minimum series value, to calculate the final icon size. Therefore, an icon at the 0 data value will not be affected by this multiplier.
- < min_size >
- The minimum size for any icon, in pixels.
- < outline_color >
- The outline color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < fill_color >
- The fill color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < alignment >
- An optional string describing the icon alignment and offset.
উদাহরণ
A basic example. The icon with zero value is rendered at the zero value size, which is 30 pixels. Sizes increase along with the data. | chd=t:0,10,20,30,40,50,60,70 |
In this example, the icons take their size data from the yellow line, but are rendered on the blue line.
| chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
Color and Size Variation ( cm_color_size
)
You can vary both color and size of a contextual chart marker, according to the data series of your choice.
বাক্য গঠন
chem=y;s=cm_color_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<alignment>
- < icon_type >
- The shape of the icon. Choose one of the following values:
maps_pin
,disk
, orsquare
. - < color_data_series >
- The zero-based index of the data series used to vary the color of the icons.
- < low_color >
- The low color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the lowest possible value in the available data range.
- < middle_color >
- The middle color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the middle value in the available data range.
- < high_color >
- The high color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the highest possible value in the available data range.
- < size_data_series >
- The zero-based index of the data series used to vary the size of the icons.
- < zero_value_size >
- The base size of the icon, at the minimum data value for the series.
- < size_multiplier >
- A size scaling factor. This value is multiplied against the difference between each icon's data value and the minimum series value, to calculate the final icon size. Therefore, an icon at the 0 data value will not be affected by this multiplier.
- < min_size >
- The minimum size for any icon, in pixels.
- < outline_color >
- The outline color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < alignment >
- An optional string describing the icon alignment and offset.
উদাহরণ
This example uses two lines. The pins use color data from the series on which they're rendered, but use size data from the other series.
| chd=s:0akAZtnkmi,nbMPJOKXXS |
Stacking Variation ( cm_repeat
)
You can vary the height of a stack of icons according to the data value at a specific point.
বাক্য গঠন
chem=y;s=cm_repeat;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<fill_color>,<outline_color>,<spacing>,<alignment>
- < icon_shape >
- The icon to use. Specify an ID string identifying one of the images listed at the end of the page .
- < repeat_series_index >
- The zero-based index of the data series used to calculate how many icons to place at this point.
- < scaling_factor >
- The source data series value is scaled to a value from 0 to 1 and multiplied by this value to determine how many markers to place on this point. Partial values are truncated.
- < stacking_direction >
- Stacking direction: either "h" (lowercase) for horizontal or "V" (uppercase) for vertical.
- < icon_size >
- The size of each marker, in pixels. The following values are supported: 12, 16, 24.
- < fill_color >
- The fill color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < outline_color >
- The outline color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < spacing >
- How much space to put between each marker in a stack, in pixels.
- < alignment >
- An optional string describing the icon alignment and offset.
উদাহরণ
This example uses a second dummy data series. It is not rendered on the chart, but used as a way to space all the stacks evenly, starting at the bottom of the chart.
| chd=s1:0akAZtnkmi,AAAAAAAAAA |
Stacking and Color Variation ( cm_repeat_color
)
You can vary the both the height and color of an icon stack, according to the data value at a specific point.
বাক্য গঠন
chem=y;s=cm_repeat_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<outline_color>,<spacing>,<alignment>
- < icon_shape >
- The icon to use. Specify an ID string identifying one of the images listed at the end of the page .
- < repeat_series_index >
- The zero-based index of the data series used to calculate how many icons to place at this point.
- < scaling_factor >
- The source data series value is scaled to a value from 0 to 1 and multiplied by this value to determine how many markers to place on this point. Partial values are truncated.
- < stacking_direction >
- Stacking direction: either "h" (lowercase) for horizontal or "V" (uppercase) for vertical.
- < icon_size >
- The size of each marker, in pixels. The following values are supported: 12, 16, 24.
- < color_data_series >
- The zero-based index of the data series used to vary the color of the icons.
- < low_color >
- The low color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the lowest possible value in the available data range.
- < middle_color >
- The middle color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the middle value in the available data range.
- < high_color >
- The high color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the highest possible value in the available data range.
- < outline_color >
- The outline color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < spacing >
- How much space to put between each marker in a stack, in pixels.
- < alignment >
- An optional string describing the icon alignment and offset.
উদাহরণ
| chem= |
This page describes how to create a variety of callouts, bubbles, pins, and other graphics that can be requested by URL, or added as markers on top of other charts.
সুচিপত্র
ভূমিকা
The Chart API enables you to create a variety of interesting callouts, pins, or bubbles that mix text and images. These items are called dynamic icons . You can either create a freestanding dynamic icon image, or you can position a dynamic icon on top of your chart as a marker type using the chem
parameter. This page will describe how to create dynamic icons as either freestanding images or as markers on another chart. The Infographics Dynamic Icons reference page describes all the types of dynamic marker types available.
The syntax for creating a dynamic icon depends on whether you want a freestanding icon, or as a dynamic marker in another chart.
Freestanding Icons
You can request a dynamic icon image the same way you request any of the other charts. A freestanding dynamic icon supports a different set of parameters than other charts do:
প্যারামিটার | Required or Optional | বর্ণনা |
---|---|---|
chst=< icon_string_constant > | প্রয়োজন | Describes which kind of icon to create.
|
chld=< icon_data > | প্রয়োজন | The specific data used to describe the icon's size, rotation, text, and other required data.
|
cht | NOT USED | Freestanding dynamic icon charts don't use the cht parameter. |
chs | NOT USED | Freestanding dynamic icon charts don't use the chs parameter. |
chd | NOT USED | Use the chld parameter to pass data to a freestanding dynamic icon. |
উদাহরণ
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
Dynamic Markers
You can embed a dynamic icon as a marker type on several different types of charts using the chem
parameter. See the chem
documentation to learn how.
উদাহরণ
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
Common Icon Features
Most icons can have text strings or shadows associated with them.
Text Strings
All display text passed to the Chart API must be UTF-8 encoded and then URL-encoded. This affects only non-URL-safe characters (URL-safe characters are mostly the English letters az both upper and lower case, plus plus a small set of punctuation). For example, the UTF-8 and URL-encoded value for the letter "è" is " %C3%A8
", and for the Chinese character 駅 is " %E9%A7%85
". Most browsers will let you use an unencoded value in the URL string (for example, 駅) and will encode it for you behind the scenes. However, it is possible that someone viewing your chart URL is using a browser that doesn't do this, so it is usually best to UTF-8 and URL-encode all non-ASCII characters in text strings. Note that this is only for the text shown in bubbles or pins, not for the &, |, or other characters that are part of the URL syntax.
When using the chem
parameter to specify dynamic icon markers, you must also escape certain characters in your text, as described in the chem
documentation.
ছায়া
You can add shadows to many icons, or even draw shadows for some icons without the icon itself!
Shadowed Icons
Many of these icons can be drawn with or without shadows. If shadowing is an option, the icon name will have a version that ends in _withshadow
and another version without that ending. You can specify an icon with either ending, depending on whether you want the shadow or not.
Here's an example of a medium text bubble and a pin with and without shadows:
chst=d_bubble_icon_text_big | chst=d_bubble_icon_text_big_withshadow |
chst=d_map_pin_icon | chst=d_map_pin_icon_withshadow |
Freestanding Shadows
Some icon types allow you to draw their shadow by itself. You might want to do this if you are using several overlapping shadowed icons on a graphic, and they are so close that the shadow from one falls across another icon. For example, here is two shadowed bubbles, Robert drawn first, then Alice:
Note how Alice's shadow partially covers Robert. To fix this, you can draw the Alice shadow first, then the Robert bubble, then Alice without a shadow. Perhaps not totally realistic in terms of lighting and shadows, but it avoids obscuring one bubble with the shadow of another:
chem=
y;s=bubble_text_small_shadow;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice, no shadow
y;s=bubble_text_small_withshadow;d=bbtr,Robert,FF8,000;ds=0;dp=3.5;py=1 // Robert with shadow
y;s=bubble_text_small;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice shadow
All markers specify the same z-order of 1 ( py=1
), so they are drawn in the order listed, on top of the chart elements (the chart line). First the Alice shadow is drawn, then the Robert bubble on top of that, and finally the Alice bubble on top.
See the documentation of your specific icon type to learn whether you can draw its shadow alone.
Contextual Icons
You can specify an icon that varies its color, size, or stacking according to the point they are assigned to. These icon types are available as dynamic icon markers only ( chem
parameter), not as freestanding icons.
These icons can be rendered on a series other than the series that specifies their color, size, or stacking information. This means that the chem
parameter's ds
value specifies the series on which to render the icon, but the values for determining the size or color of the icon are specified in the parameters given below. One good use of this is to use a hidden data series for icon data, but render the icons on a visible line or bar. এখানে কিছু উদাহরণঃ:
Icon rendered on source series | Icon rendered on non-source series | Icon using hidden series |
---|---|---|
chem=
| chem=
| chd=t1:
|
Context Marker Types
মার্কার টাইপ | chem s Value | উদাহরণ |
---|---|---|
Color variation | s=cm_color | |
Size variation | s=cm_size | |
Color and size variation | s=cm_color_size | |
Stacking variation | s=cm_repeat | |
Stacking and color variation | s=cm_repeat_color |
Alignment Strings for Contextual Icons
The contextual icons support an optional alignment string to specify an alignment and offset of the icon to the data point. This string has the following syntax:
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- প্রান্তিককরণ
- Two letters describing the alignment of the icon to the point. Examples include
tl
(top left), andrb
(bottom right). See the alignment_string parameter description of thechem
parameter for a complete listing and description. - h_anchor_offset
- [ Optional ] The horizontal offset of the anchor point, in pixels. Values including zero must be preceded by either + or -. Important: You must url-encode + as %2B.
- v_anchor_offset
- [ Optional ] The vertical offset of the anchor point, in pixels. Values including zero must be preceded by either + or -. Important: You must url-encode + as %2B.
Note that you can also use the of
component of the chem
parameter to specify horizontal and vertical offsets. If you specify both the of
component and h_anchor_offset v_anchor_offset
values, all offsets will be applied to your icon.
উদাহরণ:
hb-0-0 Horizontal center bottom No offsets | lb-0-0 Bottom left No offsets | rb-0-0 Bottom right No offsets | ht-0-0 Horizontal top No offsets |
hb-20-0 Horizontal center bottom -20 horizontal 0 vertical | hb%2b20-0 Horizontal center bottom +20 horizontal 0 vertical | hb-0%2b10 Horizontal center bottom 0 horizontal +10 vertical | hb-0-20 Horizontal center bottom 0 horizontal -20 vertical |
Color Variation ( cm_color
)
You can vary the color of a contextual chart marker according to the point that it represents. You must specify a color range, and the data value will be scaled to a corresponding color within that range.
বাক্য গঠন
chem=y;s=cm_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<icon_size>,<outline_color>,<alignment>
- < icon_shape >
- The icon to use. Specify an ID string identifying one of the images listed at the end of the page .
- < color_data_series >
- The zero-based index of the data series used to vary the color of the icons.
- < low_color >
- The low color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the lowest possible value in the available data range.
- < middle_color >
- The middle color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the middle value in the available data range.
- < high_color >
- The high color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the highest possible value in the available data range.
- < icon_size >
- The size of the icon, in pixels. The following values are supported: 12, 16, 24.
- < outline_color >
- The outline color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < alignment >
- An optional string describing the icon alignment and offset.
উদাহরণ
| chem=y;s=cm_color; |
Size Variation ( cm_size
)
You can vary the size alone of a contextual chart marker, according to the data series of your choice.
বাক্য গঠন
chem=y;s=cm_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<fill_color>,<alignment>
- < icon_type >
- The shape of the icon. Choose one of the following values:
maps_pin
,disk
, orsquare
. - < size_data_series >
- The zero-based index of the data series used to vary the size of the icons.
- < zero_value_size >
- The base size of the icon, at the minimum data value for the series.
- < size_multiplier >
- A size scaling factor. This value is multiplied against the difference between each icon's data value and the minimum series value, to calculate the final icon size. Therefore, an icon at the 0 data value will not be affected by this multiplier.
- < min_size >
- The minimum size for any icon, in pixels.
- < outline_color >
- The outline color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < fill_color >
- The fill color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < alignment >
- An optional string describing the icon alignment and offset.
উদাহরণ
A basic example. The icon with zero value is rendered at the zero value size, which is 30 pixels. Sizes increase along with the data. | chd=t:0,10,20,30,40,50,60,70 |
In this example, the icons take their size data from the yellow line, but are rendered on the blue line.
| chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
Color and Size Variation ( cm_color_size
)
You can vary both color and size of a contextual chart marker, according to the data series of your choice.
বাক্য গঠন
chem=y;s=cm_color_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<alignment>
- < icon_type >
- The shape of the icon. Choose one of the following values:
maps_pin
,disk
, orsquare
. - < color_data_series >
- The zero-based index of the data series used to vary the color of the icons.
- < low_color >
- The low color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the lowest possible value in the available data range.
- < middle_color >
- The middle color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the middle value in the available data range.
- < high_color >
- The high color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the highest possible value in the available data range.
- < size_data_series >
- The zero-based index of the data series used to vary the size of the icons.
- < zero_value_size >
- The base size of the icon, at the minimum data value for the series.
- < size_multiplier >
- A size scaling factor. This value is multiplied against the difference between each icon's data value and the minimum series value, to calculate the final icon size. Therefore, an icon at the 0 data value will not be affected by this multiplier.
- < min_size >
- The minimum size for any icon, in pixels.
- < outline_color >
- The outline color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < alignment >
- An optional string describing the icon alignment and offset.
উদাহরণ
This example uses two lines. The pins use color data from the series on which they're rendered, but use size data from the other series.
| chd=s:0akAZtnkmi,nbMPJOKXXS |
Stacking Variation ( cm_repeat
)
You can vary the height of a stack of icons according to the data value at a specific point.
বাক্য গঠন
chem=y;s=cm_repeat;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<fill_color>,<outline_color>,<spacing>,<alignment>
- < icon_shape >
- The icon to use. Specify an ID string identifying one of the images listed at the end of the page .
- < repeat_series_index >
- The zero-based index of the data series used to calculate how many icons to place at this point.
- < scaling_factor >
- The source data series value is scaled to a value from 0 to 1 and multiplied by this value to determine how many markers to place on this point. Partial values are truncated.
- < stacking_direction >
- Stacking direction: either "h" (lowercase) for horizontal or "V" (uppercase) for vertical.
- < icon_size >
- The size of each marker, in pixels. The following values are supported: 12, 16, 24.
- < fill_color >
- The fill color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < outline_color >
- The outline color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < spacing >
- How much space to put between each marker in a stack, in pixels.
- < alignment >
- An optional string describing the icon alignment and offset.
উদাহরণ
This example uses a second dummy data series. It is not rendered on the chart, but used as a way to space all the stacks evenly, starting at the bottom of the chart.
| chd=s1:0akAZtnkmi,AAAAAAAAAA |
Stacking and Color Variation ( cm_repeat_color
)
You can vary the both the height and color of an icon stack, according to the data value at a specific point.
বাক্য গঠন
chem=y;s=cm_repeat_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<outline_color>,<spacing>,<alignment>
- < icon_shape >
- The icon to use. Specify an ID string identifying one of the images listed at the end of the page .
- < repeat_series_index >
- The zero-based index of the data series used to calculate how many icons to place at this point.
- < scaling_factor >
- The source data series value is scaled to a value from 0 to 1 and multiplied by this value to determine how many markers to place on this point. Partial values are truncated.
- < stacking_direction >
- Stacking direction: either "h" (lowercase) for horizontal or "V" (uppercase) for vertical.
- < icon_size >
- The size of each marker, in pixels. The following values are supported: 12, 16, 24.
- < color_data_series >
- The zero-based index of the data series used to vary the color of the icons.
- < low_color >
- The low color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the lowest possible value in the available data range.
- < middle_color >
- The middle color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the middle value in the available data range.
- < high_color >
- The high color value in the range, as a three- or six-digit HTML hexadecimal color (no # mark). This is associated with the highest possible value in the available data range.
- < outline_color >
- The outline color for the icon, as a three- or six-digit HTML hexadecimal color (no # mark).
- < spacing >
- How much space to put between each marker in a stack, in pixels.
- < alignment >
- An optional string describing the icon alignment and offset.
উদাহরণ
| chem= |