ip4 User Guide

v1.0.3

Installation & Quick Start

To enable ip4 in a webpage enter the link to its stylesheet and its script to document header. To ensure that all special characters are displayed properly add first a meta tag that declares the utf-8 encoding. To enable ip4 in WordPress download and install the plugin and activate it.

Using ip4 in a webpage and in WordPress is very similar. In a webpage you put the template configuration inside ip4.draw(...). For WordPress you put the template configuration just inside the [ip4]...[/ip4] shortcode. In both cases a div element with an id can be placed anywhere in the document. That’s the place where the chart will be displayed! The parentElement attribute in the template configuration must reference this id. So you can write the template configuration anywhere (for example at the end) in the document and put just the div at the place where it should be displayed.

The following code example displays a simple bar chart in a webpage:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<link href="http://ipublia.net/ip4.v1.css" rel="stylesheet" type="text/css" />
	<script src="http://ipublia.net/ip4.v1.min.js" charset="utf-8"></script>
</head>
<body>
	<div id="kcal"></div>
	<script charset="utf-8">
	ip4.draw({
		"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 }])
		}
	});
	</script>
</body>
</html>

To display the same bar chart in a WordPress post or page add a div element with an id (that’s where the chart will be rendered) and enter the template configuration inside the [ip4] shortcode.

<div id="kcal"></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 }])
  }
}[/ip4]

The result is:

Leave a Reply