Charty Documentation - v1.0


Getting Started #back to top

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!

First you might want to start with the getting started guide and then take a look at Charty API reference.
If you wonder what kind of charts Charty can generate? Take a look at our gallery.

Lets get into detail

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.

To make the simplest chart possible, all your URL needs to specify is the chart type, data. You can type this URL directly in your browser, or point to it with an tag or iframe tag in your web page. For example, follow this link for a line chart:
The preceding link is an example of a basic Chart API URL. All Chart URLs have the following format:
                            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.

Usage :

Pass the URL in the data param in the object tag just as like below. Enough

                            
                            
                            
Let's examine the URL above in more detail:
  • https://charty.live/charts? - This is the base URL for all chart requests.
  • chtype=areasimple - The chart type: here, a area chart.
  • chl=Mon,Tue,Wed - The chart labels.
  • &chd=100,90,198 - The chart data. (If another set of data needs to be passed, send it as with pipeline separator. for ex. &chd=100,90,198|50,40,30 )
  • cht=Daily Data - The chart title
  • chtc=000000 - The chart title color
  • chaxc=000022 - The chart axis colors
  • chdc=000080e - The chart data colors. (If another set of data needs to be passed, send it as with pipeline separator. for ex. chdc=000080e|00ffff )
  • chld=Bob - The chart legend.
  • Chart Types #back to top

    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.








    Chart Parameters #back to top

  • chtype
    The chart type. You can get the chart names from the chart types mentioned in the above section.
  • chl - The chart labels.
    (ONLY In the case of multiple axis chart you can pass values with pipeline separator for ex. chl=a,b,c|d,e,f)
  • chd - The chart data.
    If the chart you chosen supports multi level data, you can pass data with pipeline. (for ex. chd=10,20,30|80,10,40).
    For multi level data, Refer Line Stach, Area Stack, Radar charts, etc.
  • cht=Daily Data - The chart title
  • chtc=000000 - The chart title color
  • chaxc=000022 - The chart axis colors
  • chdc=000080e - The chart data colors.
    If another set of color needs to be passed, send it as with pipeline separator. for ex. chdc=000080e,000000|00ffff,22ffff
  • chld=Bob,Alice - The chart legend.
  • chmax=200 - Max value used in Radar Chart.
  • acid=232323902k3 - (Only for Pro users) Account id.
  • token=slkjfl23kfj2l3klj23lj2k3lj2l3 - (Only for Pro users) Encoded string of the data. Mentioned in detail in Pro Users Section.
  • Pro Users #back to top

    This section is dedicated to the paying PRO version. This plan use the same API but is watermark free and you can download the charts as image anytime and any number of time.
    Once subscribed to the enterprise plan you will receive an account id and a secret token. These two keys are mandatory to sign your request and remove the watermark.

    Remove Charty watermark by signing URLs

    Signing request must be done server-side otherwise anyone will be able to reuse your secret key. Beside signing there are no other process involved server-side. Charty is still the fastest option compared to server-side charts setup and generation.
    You will need to sign the url using HMAC-SHA256 hash algorithm. Hash your data with the algorithm given, AFTER hashing the URL add your account id using the &acid=YOUR_ACCOUNT_ID parameter, and the resulting hash in the &token=GENERATED_HASH query parameter.

    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.

    Signing your URLs will ensure that no-one beside you created it and Charty will verify the generated hash to be sure you your account created it. Here are some examples in various languages:
    Javascript :
      /* 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; 
    

    Online Url Generator

    The easiest way to generate a watermark-free Charty is to use our online url generator. Here : https://codepen.io/bazzhangz/full/wEEgrM