How do I connect my chart to an iCharts Data API Connector?

To create a chart using an iCharts Data API Connector you have to do the following:

  1. Click on Load data set
  2. Select Data API as source
  3. Enter the URL of your data file
  4. Click on Connect

Once the data API is connected, simply create chart from the data set named above just like a normal chart. Then embed the chart to your web site.

 

Additional Notes:

Alternate Data Source

Once you have a created a chart from a specific URL as a data source, it is very easy to replicate the same chart but point to a different URL. For example, you may have created a chart for January data using the ICharts Data API and the URL in the chart points to a file with Jan data. Now, Feb data is available in a separate TSV file and you would like the same Jan chart except pointing to Feb data. You can take the embed code of the Jan chart and add a data source to point to the Feb data.

Here is an example of how this can be done.

<iframe src="http://www.icharts.net/icharts/embed/Nnwxyz=?fetch=http://www.foo.c..."  height="450"

width="674" frameborder="0">

<span>Chart: test-adhoc-charts</span>

<span> This is chart description </span>

<span>tag1, tag2, tag3</span>

<span>Powered By: <a href = "http://www.icharts.net">iCharts

 | create, share, and embed interactive charts online</a></span>

</iframe>

Dynamic URL

In the above examples, the URL points to a static data set that is generated from a predefined script. There may be cases where you many want to generate a similar data set from the database, but dynamically use some criteria. For example, you have a portal application where a chart renders data based on log in credentials. You can embed one chart that points to a dynamic URL and pass a parameter. The dynamic URL will also return a TSV file with data that is specific to the parameter that was passed by the portal application via the embed code. Here is one example:

<iframe src="http://www.icharts.net/icharts/embed/Nnwxyz=?fetch=http://www.foo.com/

test. jsp?dataid=12" height="450"

width="674" frameborder="0">

<span>Chart: test-adhoc-charts</span>

<span> This is chart description </span>

<span>tag1, tag2, tag3</span>

<span>Powered By: <a href = "http://www.icharts.net">iCharts

 | create, share, and embed interactive charts online</a></span>

</iframe>

In this example, the URL points to a jsp script and passed a parameter called dataid = 12. The script will execute the jsp program and fetch data relevant to dataid=12.

Image display during Chart loaded

The loading time for charts is dependent on the configuration of the server where the data resides. Your technical team can take further steps to optimize the data query.

iCharts offers a feature where an image can be displayed while the data is being fetched from the server. You can choose to display any image while the chart is waiting to get the data e.g an image that might provide some information about the chart or simply a logo of your company.

Simply specify the location of the static image within the embed code after you have pasted the embed code in your web site or portal application. Here is an example:

<iframe src="http://www.icharts.net/icharts/embed/Nnwxyz=?background=http://www...." height="450"

width="674" frameborder="0">

<span>Chart: test-adhoc-charts</span>

<span> This is chart description </span>

<span>tag1, tag2, tag3</span>

<span>Powered By: <a href = "http://www.ichartsbusiness.com">iCharts

 | create, share, and embed interactive charts online</a></span>

</iframe>