Welcome to the Charty developer hub. You'll find comprehensive guides and documentation to help you start working with Charty as quickly as possible, as well as support if you get stuck. Let's jump right in!
The Charty API returns a Interactive HTML chart in response to a URL GET. The API can generate many kinds of charts, from pie or line charts to bar charts and radars. All the information about the chart that you want, such as chart data, colors, and labels, are part of the URL.
https://charty.live/charts?chtype={chart_type}
&chl={chart_label}
&chd={chart_data}
&...additional_parameters...
All URLs start with https://charty.live/charts? followed by the parameters that specify chart data and appearance. Parameters are name=value pairs, separated by an ampersand character (&), and parameters can be in any order, after the chtype param. All charts require at minimum the following parameters: chtype (chart type), chl (label), and chd (chart data). You dont want to worry about size, because, it suits your container tag (object , iframe) size and its responsive too. However, there are many more parameters for additional options, and you can specify as many additional parameters as the chart supports.
Pass the URL in the data param in the object tag just as like below. Enough
This section describes the various types of line charts that you can create using the Image Chart API. It will be having links to the charts to from which you can get the parameters passed. Also have mentioned the chtype parameter value for each chart for easy understanding.
Single step line (You can see the pipeline got removed in the URL below)
chld and chmax parameters are mandatory for this chart
As an example here is a graph signed, without watermark:
&acid=1234
&token=5e5ed276f04b0cb0d713a5213f185e1105c83bdd9026076e81e313bb6d94c279
Don't include the account parameter for hashing. Also Don't forget to convert URL-unsafe characters before generating the signature.
/* Simple Hello World in Node.js */
const crypto = require('crypto');
const qs = require('querystring');
function sign(secretKey, query) {
return crypto
.createHmac('sha256', secretKey)
.update(query)
.digest('hex');
}
// First setup our account
const ACCOUNT_ID = 'MY_ACCOUNT_ID';
const TOKEN = 'TOKEN';
// Then generate the watermark-free url
// qs.stringify will encode URL-unsafe characters for us
const rawQuerystring = qs.stringify({
chtype: 'bargradient',
chl:'mon,tue,sdf,Thurs,23,LKS',
chd:'10,9,98,76,23,23,45,65,09,89,78.3',
});
const signature = sign(TOKEN, rawQuerystring);
const publicUrl = `https://charty.live/charts?${rawQuerystring}&acid=${ACCOUNT_ID}&token=${signature}`;
console.log(publicUrl);
Python 3
from urllib.parse import urlencode
import hmac, hashlib, codecs
def sign(query, secretKey):
return codecs.getencoder('hex')(hmac.new(secretKey.encode('utf-8'), query.encode('utf-8'), hashlib.sha256).digest())[0].decode('utf-8')
if __name__ == '__main__':
# First setup our account
ACCOUNT_ID = 'MY_ACCOUNT_ID'
TOKEN = 'TOKEN'
# Then generate the watermark-free url
# urlencode will encode URL-unsafe characters for us
rawQuerystring = urlencode({
'chtype': 'bargradient',
'chl':'mon,tue,sdf,Thurs,23,LKS',
'chd':'10,9,98,76,23,23,45,65,09,89,78.3'
})
signature = sign(rawQuerystring, TOKEN)
publicUrl = "https://charty.live/charts?" + rawQuerystring + "&acid="+ACCOUNT_ID+"&token=" + signature
print(publicUrl)
PHP 5+
function sign($query, $secretKey) {
return hash_hmac('sha256', $query, $secretKey);
}
// First setup our account
define('ACCOUNT_ID', 'MY_ACCOUNT_ID');
define('TOKEN', 'TOKEN');
// Then generate the watermark-free url
// http_build_query will encode URL-unsafe characters for us
$rawQuerystring = http_build_query(array(
'chtype': 'bargradient',
'chl':'mon,tue,sdf,Thurs,23,LKS',
'chd':'10,9,98,76,23,23,45,65,09,89,78.3'
));
$signature = sign($rawQuerystring, TOKEN);
$publicUrl = 'https://charty.live/charts?' . $rawQuerystring .'&acid=' .ACCOUNT_ID. '&token=' . $signature;
echo $publicUrl;
The easiest way to generate a watermark-free Charty is to use our online url generator. Here : https://codepen.io/bazzhangz/full/wEEgrM