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

That functionality allow you to set any javascript function to better control flot plugin and to the call back defined in the flot API core.

Like the following example 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

Same result as the previous example but it's inherit of the pie option with the option named base. By doing that, you create a new chart type based on the pie chart with including your customization setting.

<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 context

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

<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">