Displaying data in Charts from API’s on WordPress sites

WordPress started as just a blogging system, but has evolved to be used as full content management system and so much more through the thousands of plugins and themes. There are many plugins in Wordpress to add graphical representations of your data to your posts and pages. They help in adding static as well as dynamic visualization in sites. Some of those plugins are:

• WordPress Charts and Graphs Lite
• M Chart
• Inline Google Spreadsheet Viewer

Such a popular plugins work with google spreadsheets and/or .csv files. And if we are thinking to add data from API to charts, then such plugins are difficult to handle and modify data with values from API. Because we have to create a connection between Plugin, Google spreadsheet or .csv file and API. However there are some plugins which can help us achieve a result in simple way by directly connecting Plugin to API values. One of them is IPU chart.

IPU Chart

IPU-Chart is a WordPress plugin to create many different chart types like pie charts, bar graphs, line charts, etc. Its a simplest plugin to add visual data to sites. The data to display can be static or dynamic content.

Data defined inside the document:

<div id="kcal" style="width:90%; font-size:0.8em"></div>
...

[ip4]{
    "template": ip4.barChart(),
    "parentElement": "#kcal",
    "data": {
        "reader": ip4.dataReader()
            .data([ {"x": "Apple", "y": 55 },
                    {"x": "Avocado", "y": 145 },
                    {"x": "Banana", "y": 95 },
                    {"x": "Grapefruit", "y": 30 },
                    {"x": "Kiwi", "y": 55 } ])
    },
    "d3": {
        "yLabel": "kilo calories (kcal)"
    }
}[/ip4]

To display a line or pie chart just enter ip4.lineChart() or ip4.pieChart() as template.

Plugin + API

If you want to work with JavaScript framework on wordpress sites, then IPU chart plugin is best to display content from API.

Steps:

• Install IPU-chart plugin on WordPress sites.
• Include some HTML code in page:

<div id="tableEdit"></div>
<div id="kcal" style="width:100%; font-size:1em"></div>
...

• Include this code in .js file where we are fetching data from API:

ip4.draw({ "template": ip4.pieChart(), "parentElement": "#kcal", "data": { "reader": ip4.dataReader() .data([ {"x": "Protein", "y": s.valueOf() }, {"x": "Carbohydrate", "y": n.valueOf()}, {"x": "Fat", "y": d.valueOf()} ]) }, "d3": { "yLabel": "kilo calories (kcal)" }});

Video Tutorial

Resources:

IPU Chart: https://wordpress.org/plugins/ipu-chart/