Widget

We provide a widget that helps you to display our data on your website

The widget exposes your API TOKEN !
If you are a Premium user, be very careful as people could re-use your token.
Only use our widget on pages where you are confident about people that would see it.

CommoPrices widget offers users out of box experience. The widget is easy to use and offers variety of customization for the chart. You can use the widget to diplay any data you wish to from CommoPrices API. With help of our widget, you can create more than one instance of charts with different data inputs.

Please note that this widget is based on google chart API.

Firstly, you will need to have jQuery (version above 1.10) in your <head> tag :


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                

Secondly, add in the <head> tag the following line (which is our library) :


<script type="text/javascript" src="https://api.commoprices.com/widget/v1.6.7.min.js"></script>
                

Nota : the last version as of today is v1.6.7

Thirdly, add in the <body> tag two following lines :


<div id="testChart" style="width:in_%_or_px height:in_%_or_px"></div>
<script>
    retrieveApiData("url/to/api/endpoint","your_api_token","id_of_div_for_chart");
    setChartCount(1);
</script>
                

Nota : the number in the setChartCount() function must match the number of time you call the retrieveApiData() function.

Additionnaly, you have several options of personnalisation for the widget :


<script>
    chartColor('rgb(234,202,81)',"id_of_div_for_chart");
    chartBackgroudColor("#fff","id_of_div_for_chart");
</script>
                
Please note that you can put as many charts as you want on the same page as long as each retrieveApiData() function is linked with an unique <div id=""> tag and that you count the number of charts in the setChartCount() function