Charts and graphs

Declaring your custom preset function

<script>
window[ "wb-charts" ] = {
	charts: {
		custom: {
			fn: {
				"/getcellvalue": function(elem){
					var raw = $(elem).text().replace(/\s\s+/g, ' ').replace(/^\s+|\s+$/g, '').replace(/N/g, '');
					return [parseFloat(raw.match(/[\+\-0-9]+[0-9,\. ]*/)), raw.match(/[^\+\-\.\, 0-9]+[^\-\+0-9]*/)];
				}
			}
		}
	}
};
</script>

The key for the fn object is similar to the JSON pointer defined in RFC 6901. The key identifies what should be overwritten with the function.

You can rename "custom" by anything you want, just keep in mind of that placeholder name will be the same name for your CSS custom option.

<table class="wb-charts wb-charts-custom table">

Going beyond

The previous unctionality allowed you to set any javascript function to better control flot plugin and to the call back defined in the flot API core.

The following examples show you how you can control the pie chart label formater. Note that the context has been changed to target directly the flot options.

Custom pie chart label formater, code example

<script>
window[ "wb-charts" ] = {
	flot: {
		mylabelformater: {
			fn: {
				"/series/pie/label/formatter": function( label, series ) {
					var textlabel;
					if ( !optionsCharts.decimal ) {
						textlabel = Math.round( series.percent );
					} else {
						textlabel = Math.round( series.percent * Math.pow( 10, optionsCharts.decimal ) );
						textlabel = textlabel / Math.pow( 10, optionsCharts.decimal );
					}

					return label + "<br />" + textlabel + "%";
				}
			}
		}
	}
};
</script>

<table class="wb-charts wb-charts-pie wb-charts-mylabelformater table">

Custom pie chart type, code example

The same result is produced in this example, but the functionality of the 'pie' chart is inherited using the option named base. By doing this, you create a new chart type based on the pie chart while including your customized settings.

<script>
window[ "wb-charts" ] = {
	flot: {
		mycustompie: {
			base: "pie",
			fn: {
				"/series/pie/label/formatter": function( label, series ) {
					var textlabel;
					if ( !optionsCharts.decimal ) {
						textlabel = Math.round( series.percent );
					} else {
						textlabel = Math.round( series.percent * Math.pow( 10, optionsCharts.decimal ) );
						textlabel = textlabel / Math.pow( 10, optionsCharts.decimal );
					}

					return label + "<br />" + textlabel + "%";
				}
			}
		}
	}
};
</script>

<table class="wb-charts wb-charts-mycustompie table">

Mixing two contexts

You can push you configuration even further by mixing two contexts of settings like flot and charts. When called, the options of both contexts will be applied.

<script>
window[ "wb-charts" ] = {
	flot: {
		mysuperconfig: {
			base: "pie",
			fn: {
				"/series/pie/label/formatter": function( label, series ) {
					var textlabel;
					if ( !optionsCharts.decimal ) {
						textlabel = Math.round( series.percent );
					} else {
						textlabel = Math.round( series.percent * Math.pow( 10, optionsCharts.decimal ) );
						textlabel = textlabel / Math.pow( 10, optionsCharts.decimal );
					}

					return label + "<br />" + textlabel + "%";
				}
			}
		}
	},
	charts: {
		mysuperconfig: {
			fn: {
				"/getcellvalue": function(elem){
					var raw = $(elem).text().replace(/\s\s+/g, ' ').replace(/^\s+|\s+$/g, '').replace(/N/g, '');
					return [parseFloat(raw.match(/[\+\-0-9]+[0-9,\. ]*/)), raw.match(/[^\+\-\.\, 0-9]+[^\-\+0-9]*/)];
				}
			}
		}
	}
};
</script>

<table class="wb-charts wb-charts-mysuperconfig table">