Quick and Easy Guide on How to Make a Chart with a Single URL
Wouldn't it be great to create a chart with one URL? You can now do this thanks to the super-easy interface of Image Charts. Creating charts with one URL complete with a wide spectrum of features has never been this easy. Here are some easy steps to show you how it’s done.
When you place a POST or URL GET request, then the Image Chart API will purvey a chart image. The API is capable of drawing all kinds of charts such as radar, bar, line, pie and other charts as well. The URL encapsulates important chart attributes like labels, colors, size, chart data and other factors.
You can construct the simplest possible chart by specifying the size, data and chart type within the URL. If you prefer, you can type in this URL directly into your browser. If you want to point towards this chart on your web page then you will have to make use of the <img> tag.
URL Format
There are certain elements that are included in most charts. Chart URLs all share the format shown below.
https://image-charts.com/chart
?cht=<chart_type>
&chd=<chart_data>
&chs=<chart_size>
&...additional_parameters…
The character string https://image-charts.com/chart? Is the key to all charts since this bit lies at the beginning of all chart URLs. This character string is succeeded by parameters that define visuals and chart data. The name=value parameter pairs must be separated with an ampersand. After the question mark show in the string above, you can define attributes in any order that you prefer. At the bare minimum, you will need these parameters to complete the chart URL: chs (for chart size), chd (for data to be displayed in the chart) and cht (chart type).
You can also specify several other parameters to add extra meaning to your chart that will bring it to life and convey important information to others in a convenient and simple format. You can include all those parameters that are supported by the chart type.
A Deeper Look Under the Hood
Here is an example of a link that demonstrates some of these principles.
https://image-charts.com/chart
?cht=p3
&chs=700x100
&chd=t:60,40
&chl=Hello|World
&chan
&chf=ps0-0,lg,45,ffeb3b,0.2,f44336,1|ps0-1,lg,45,8bc34a,0.2,009688,1
Let us examine all parts of this URL step by step so that you can understand how it works to specify important attributes of your chart.
https://image-charts.com/chart?
As mentioned previously, this is the initial part of the chart URL that is common to all. However, if you want to show multiple charts on different pages, then you may have to make some changes to this format. This advanced technique will help you to improve chart loading speed and page performance.
cht = p3
This fragment specifies the chart type which in this case is a pie chart.
chs = 700 x 100
This is the chart size shown in pixels. The width is 700 pixels while the height is 100 pixels.
chd = t : 60 , 40
This is the chart data. This format specifies the data in a simple text form. There are also other formats available to show your data more conveniently.
ch1 = Hello | World
These are the labels for the two different slices of the pie.
chan
The chan attribute animates chart rendering it as a gif type.
chf = ps
The linear gradient for each pie slice is specified with this string.
&
The ampersand sign is used to separate the different attributes.
You now have an idea of the basics of creating charts with 1 URL on a very simple interface. All you have to do is to specify the different attributes in the URL. The image Chart API will render this URL into a chart that helps you to convey the information you want in the right form.
Create Your Own Charts in One URL
You need to know how the attributes are written in the URL. This is a simple exercise that will take no more than a few minutes. You can create your own key which shows how each attribute is specified in the URL. With practice you will become more fluent with attributes and will no longer need to rely on the key for recalling how chart attributes are specified.
For practice, you can begin tinkering with this URL and see what effect each change has on your pie chart. First, copy and paste the image chart URL into your browser address bar.
You can try out a couple of changes to see how they work. For instance, you can create more slices by adding more data values taking care to add commas between them. You can also specify the labels of all the slices that you create. For each value, ensure that you add the | mark between each. You can also try out a bigger chart by specifying greater pixel values.
Image Charts has helped some of the biggest names to collaborate more proactively with each other by utilizing the super-simple Image Chart interface. Even complete beginners can get up to speed by going through our short and simple tutorials in the development hub.
Need help with creating charts using a URL address? We would be more than pleased to assist you as have done so for many others prior to you.
Click here to find out more.
