cheshire137

Using the <a href="http://www.last.fm/api" rel="nofollow ugc">Last.fm API</a>, this is a WordPress plugin 
that provides a shortcode that will display charts 
of your Last.fm music-listening data. This plugin uses the <a href="https://wordpress.org/plugins/easy-chart-builder/" rel="ugc">Easy Chart Builder plugin</a> by <a href="https://profiles.wordpress.org/dyerware/" rel="nofollow ugc">dyerware</a> to create charts, so 
you will need to install and activate that plugin first.
<a href="https://github.com/moneypenny/wp-lastfm-charts/archive/master.zip" rel="nofollow ugc">Download the latest version of the plugin</a> or <a href="https://github.com/moneypenny/wp-lastfm-charts" rel="nofollow ugc">view the source code</a>.
<h3>Usage</h3>
In a post or page, use the <code>[wp_lastfm_charts_top_artists]</code> or <code>[wp_lastfm_charts_top_tracks]</code> shortcode. Specify the <code>user_name</code> parameter, using your Last.fm user name. Specify a time range with the <code>period</code> parameter, e.g., <code>12month</code>. Specify a chart type with <code>chart_type</code>, e.g., <code>horizbar</code> or <code>pie</code>.
Some examples:
<pre><code>[wp_lastfm_charts_top_artists user_name="cheshire137" period="12month" chart_type="horizbar"]

[wp_lastfm_charts_top_artists user_name="cheshire137" period="12month" chart_type="pie"]

[wp_lastfm_charts_top_tracks user_name="cheshire137" period="12month" chart_type="horizbar"]

[wp_lastfm_charts_top_tracks user_name="cheshire137" period="12month" chart_type="pie"]
</code></pre>
Other parameters include <code>chart_color</code>, <code>chart_fade_color</code>, <code>width</code>, <code>height</code>, 
 colors, <code>limit</code>, <code>title</code>, <code>data_table_css</code>, and <code>image_alt</code>.
<pre><code>chart_color and `chart_fade_color` refer to the background color of the chart
</code></pre>
and should be hex color codes without the #. They default to <code>FFFFFF</code> (white).
<pre><code>limit refers to the number of artists or tracks to display in the chart. It
</code></pre>
defaults to 12.
<pre><code>colors should be a comma-separated list of hex color codes without the #.

period should be one of `overall`, `7day`, `1month`, `3month`, `6month`, or
12month.
</code></pre>

WordPress Last.fm Charts

Shortcodes to display charts of Last.fm data for a particular user.

sidov

This plagin lets you to embed charts of Chart and Highcharts softwares on any page or post of your site. 
For this you should include one of above mentioned libraries in the “js” directiory of this plagin. 
For every chart you must prepare two files : one of them it’s a javascript file with the Highchart object, 
other one it’s a php file with data for chart. Interface between php and js represents array with the name “data”. 
To this array you can include all variables and arrays necessary for the Highchart object.
<pre><code>For example in the php file:
$data= [['name'=> 'Installation','data'=> [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]], 
 [
 'name'=> 'Manufacturing',
 'data'=> [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
], [
 'name'=> 'Sales & Distribution',
 'data'=> [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
], [
 'name'=> 'Project Development',
 'data'=> [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
], [
 'name'=> 'Other',
 'data'=> [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
]];

In the javascript file:

new Chart(document.getElementById("container"), {
...
 data: data
... 
}
</code></pre>
If you want to use static data right in the js you should prepare a php file with void array “data”. 
All js files you should include in the folder “js” and php files in the “php” folder. 
For rendering the chart on the chosen page You should put necessary HTML tag with the corresponding id 
in the chosen line.
For Chart library you should wrap canvas tags in div tag.
For example:
< div style=”width:800px; height = 450px !important;” > < canvas id=”container” class = “container” width=”800″ height=”450″ > < /canvas > < /div >
After activating plagin you should select field “Page Charts” in the menu “Plagins” of your admin panel. 
In the drop-down list with the label “Choose a chart library” you should choose appropriate software. 
Do not forget to include chosen software library in the “js” folder of the plagin! 
In the table on the the plagin page you should select page or post where you want to insert your chart by clicking 
“add new chart”. 
In the appeared line you should put the names of your php and js files and click “change”. 
Be shure that id in your div on the page and container name of the javascript chart object are the same. 
If you want to use several charts on the same page use “duplicate” button and do the same as above. 
Don’t forget to use different container’s ids on the same page! 
You can preview your chart on the admin page by clicking “preview the chart”.

Page Charts

This plagin lets add charts of some libraries to any page or post of your site. Now you can use charts of Chart and Highcharts softwares.

WordPress Last.fm Charts vs Page Charts