<img loading="lazy" src="https://chart.googleapis.com/chart?cht=bvs&chs=300x200&chd=t:10,50,60,80,40,15,120&chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE|FF0000|

00FF00&chxt=x,y&chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul&chds=a" align="left" hspace="15" vspace="25" />


We will show you how to build the URL for the vertical bar chart shown in the left side of this screen step by step. We will also 

demonstrate how to add line markers overlay to this chart.


The Google Chart API documentation <a href="http://code.google.com/apis/chart/image/docs/gallery/bar_charts.html#bar_types" class="news_link" 

title="Google Chart" target="_blank">is available here</a>.



The root URL of this service is show below. 


https://chart.googleapis.com/chart? 


<h3>
Chart Types (cht)
</h3>


Use cht to select a chart type. We will use chart type bvs (vertical bar chart) throughout this blog. Our request parameter for this <a 

href="http://code.google.com/apis/chart/image/docs/gallery/bar_charts.html#bar_types" target="_blank" class="news_link" title="Chart 

types">chart type</a> would then be cht=bvs. 



We begin to build our chart URL with our chart type as shown below.



<pre class="brush: plain;">
https://chart.googleapis.com/chart?cht=bvs 
</pre>



<h3>
Chart size (chs)
</h3>


Size of chart is specified as widthxheight. For a chart with 300 pixels wide and 200 pixels height, chart size should be 

chs=300x200. 



<pre class="brush: plain;">
https://chart.googleapis.com/chart?cht=bvs&chs=300x200 
</pre>



<h3>
Chart data (chd)
</h3>


Individual data items are comma separated. For multiple series data, each series is separated by a pipe (|) 

character.



<pre class="brush: plain">
chd=t:10,50,60,80,40,15,120
</pre>



<div style="margin-left:30px;">
<h4>
Data formats
</h4>

In our example above we used text format as specified in t: of our data chd=t:10,50,60,80,40,15,120. Other data formats are 

s for text encoded string e for extended. Please visit the <a 

href="http://code.google.com/apis/chart/image/docs/data_formats.html#extended" target="_blank" class="news_link" title="Data 

formats">Google Chart documentation site</a> to learn more and how to use other data formats.

</div>


<h3>
Our URL so far
</h3>


<pre class="brush: plain;">
https://chart.googleapis.com/chart?cht=bvs&
chs=300x200&chd=t:10,50,60,80,40,15,120
</pre>



At this point our chart is already functional. Below is how our URL looks so far.



<img loading="lazy" src="https://chart.googleapis.com/chart?cht=bvs&
chs=300x200&chd=t:10,50,60,80,40,15,120" />


 

<h3>
Data scaling (chds)
</h3>


Scaling of data is done through a range of values (minimum,maximum)(chds=80,140 for example). It can also be automatic through 

chds=a. 


<h3>
Axis labels (chxt and chxl)
</h3>


chxt=x,y adds both X and Y axis labels. chxt=x adds x axis labels only.



chxt=x,y&chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul adds custom X-axis label with automatic Y-axis label. 




<pre class="brush: plain;">
https://chart.googleapis.com/chart?cht=bvs&
chs=300x200&chd=t:10,50,60,80,40,15,120&chxt=x,y&
chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul&chds=a
</pre>



<h3>
Colors (chco)
</h3>


Use chco to specify colors. Colors are in hex notation. Colors can be applied to a series or to specific item in the series. 



<pre class="brush: plain">
https://chart.googleapis.com/chart?cht=bvs&
chs=300x200&chd=t:10,50,60,80,40,15,120&chxt=x,y&
chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul&chds=a&
chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE|FF0000|00FF00
</pre>



chco colors above are applied to each data item in the series. Below uses a single color for the entire series.




<pre class="brush: plain">
https://chart.googleapis.com/chart?cht=bvs&
chs=300x200&chd=t:10,50,60,80,40,15,120&chxt=x,y&
chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul&chds=a&
chco=FFC6A5
</pre>



<h3>
And our final image charts
</h3>


<img loading="lazy" aling="left" src="https://chart.googleapis.com/chart?cht=bvs&
chs=300x200&chd=t:10,50,60,80,40,15,120&chxt=x,y&
chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul&chds=a&
chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE|FF0000|00FF00" />

<img loading="lazy" align="right" src="https://chart.googleapis.com/chart?cht=bvs&
chs=300x200&chd=t:10,50,60,80,40,15,120&chxt=x,y&
chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul&chds=a&
chco=FFC6A5" />



<h2>
Adding line markers
</h2>


The data we used in our chart is this chd=t:10,50,-60,80,40,15,120. As already mentioned <t>t stands for text 

formatted data. To add markers data, we add a new set of series data for the markers. See below.



<pre class="brush: plain">
chd=t1:10,50,60,80,40,15,120|15,55,70,90,50,60,150
</pre>



We used t1 instead of t. t1 means that our main chart should use data series 1 (chd is 1 based not 

0 based). Notice that we have 2 series of data in our example above. Without using an index in t data in series 1 will add up 

to data in series 2. By using an index, we hide the other series.


<h3>
And now the actual markers (chm)
</h3>


<pre class="brush: plain">
chm=D,0033FF,2,0,2,1 
</pre>



The markers specifications above tells the chart API to draw line markers represented by (D), color blue represented by 0033FF, use data from series 2 represented by 2, draw on all points (0), of 2 pixels wide with a z-order of 1.



<pre class="brush: plain">
https://chart.googleapis.com/chart?cht=bvs&
chs=300x200&
chd=t1:10,50,60,80,40,15,120|15,55,70,90,50,60,150&
chxt=x,y&
chds=a&
chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul&chds=0,180&
chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE|FF0000|00FF00&
chm=D,0033FF,1,0,2,1
</pre>



Below is the output of the chart URL above.



<img loading="lazy" src="https://chart.googleapis.com/chart?cht=bvs&
chs=300x200&
chd=t1:10,50,60,80,40,15,120|15,55,70,90,50,60,150&
chxt=x,y&
chds=a&
chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul&chds=0,180&
chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE|FF0000|00FF00&
chm=D,0033FF,1,0,2,1" />


<h3>
Chart title (chtt)
</h3>


An example of chart title is shown below. Note that a pipe (|) character forces newline.



<pre class="brush: plain">
chtt=The+Kahimyang|Project"
</pre>



<img loading="lazy" src="https://chart.googleapis.com/chart?cht=bvs&
chs=300x200&
chd=t1:10,50,60,80,40,15,120|15,55,70,90,50,60,150&
chxt=x,y&
chds=a&
chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul&chds=0,180&
chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE|FF0000|00FF00&
chm=D,0033FF,1,0,2,1&
chtt=The+Kahimyang|Project"
 />






That's it. Good luck.

How to create image charts for your web pages through a single URL using Google Chart service