Jules
Pricing
Developers
API DocumentationChart EditorChangelogAPI Status
Chart EditorSubscription management
Learn

Create Chart with One URL

Posted on 
August 26, 2020

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.

Tagged:
Integration
Emailing
Charting
Francois-Guillaume Ribreau
CEO

Featured Posts

Case Studies and Customer Success Stories
Yao Care - a Taiwanese medical app integration of Image-Charts
Automate!
How to Use Google Sheets Formulas to Generate QR Code?
Learn
Create Chart with One URL
Learn
How to Share Charts on Slack?

Tags

Automation
Charting
Emailing
Graph-viz
Integration
Mobile App
QR Code
SDK

Create and send charts in email with Image-Charts

Get started
More Posts

You Might Also Like

Nov 23, 2020
 in 
Case Studies and Customer Success Stories

Yao Care - a Taiwanese medical app integration of Image-Charts

Sep 9, 2020
 in 
Learn

How Can You Export Image Charts with Excel?

Sep 9, 2020
 in 

Zapier, Slack and Teams. What Are They and How Do They Work?

Don't let your customer wait.
Get Started

Chart API

Chart.js ChartsBar ChartsLine ChartsScatter ChartsPie ChartsPolar ChartsRadar ChartsBubble ChartsGraph Viz ChartsQR Codes generator

Product

PricingDocumentationSubscription managementChart EditorChange logStatus PageOn Premise

SDKs

JavaScript/NodeJS
PHP
Python
Java
Ruby
C#

Integrations

Zapier integrationMake integrationIntegromat integration

Company

About usBlogOpen SourceSecurity & CompliancePrivacyTermsSupport

Newsletter - Changelog

If you'd like more update regarding Image-Charts in your inbox please do join the newsletter
Subscribe
No spam
Unsubscribe anytime
The most used static chart API in the world