Tuesday, 2 July 2013

myCharts - Items with a rank on your website - uses G+ albums - jQuery plugin

myChart is a jquery plugin that creates a ranking list on your webpage using images and data from a particular google plus album. All you have to do is specify that google album in your javascript.

Each image is treated as an item (Ex: a movie or song etc.). The data for each item such as rank, title, a link etc. is stored in the caption text field of that image in your google albums.

Using this plugin you can display a list of items ie. songs, movies, apps or your products in a ranked fashion. The plugin is fully responsive; works on mobile devices, tablets etc.

For better visibility, you can make sure that the dimensions of your image are equal ie. a square.

How to use:

The download pack contains the plugin file - mycharts.min.js and the HTML file deployed in the demo charts.html

1. Specify your Google+ Album URL

Open Google+ and navigate to your albums tab.

Click on the album that has images of the items that you wish to rank and show as chart on your website. Each image is considered an item by the plugin. You need to specify the data like title, link etc. for each image (item). This data goes in the caption textfield provided in google albums. This is shown in the next secion. Make sure the album has public visibility on google+.

Copy this URL from your browser navigator and paste it in your JS.

"googlePlusAlbumURL" is the link of the album that has all the images. Each image is treated as an item in your chart. This is a mandatory variable.

"chartWidth" is the width of the widget. This can be specified in % as "90%" or in pixels as "1000px". This is an optional variable.

2. Adding item data in your caption field

Click on any image from your album. In the caption field towards the right of your page, you can add attributes for the item. The only 5 allowed attributes for each item as shown in the example below.

Snap showing these attributes in google albums

This will create an item as shown below

General syntax of these attributes is
{<attributename1>=<attributevalue1>;<attributename2>=<attributevalue2>;} </attributevalue2></attributename2></attributevalue1></attributename1>. You can skip other attributes but "Rank" is mandatory.

2. Include plugins

Include the jQuery plugin if not done already. Now, include the plugin mycharts.min.js before the end of your body tag and you are done!

3. Create a container for your interface

Add a div as shown below in you HTML. This div will contain the myCharts widget and display your ranked items in a chart.



  1. This comment has been removed by the author.

  2. excellent information you given.thanks for sharing........

  3. Howdy,
    Genuinely this can be a wonderful weblog; I would really like to express to an individual which you have presented me very much understanding of canada movers

  4. It was initially made for specialists and patients; it won't do much bravo, and further it will confound you, in the event that you don't comprehend the number. When you take in this diagram it will help you and your wellbeing for a lifetime.Read More