In this example, we create a simple KitBox using a JavaScript array as a data source. We have turned the data table and overview off to show the graph in it's simplest form.
<script>
$.kitboxData = {
"data":[
{"data":[77,70,83,79,83,80,78,82,78,84,78,73,79,79,73,75,75,82,75,74,80,82,76,81,82,84,78,77,82,72],
"id":0, "label":"X Mean"},
{"data":[23,25,25,31,32,34,39,37,23,38,37,23,33,32,21,22,29,37,20,30,29,40,27,29,28,31,36,37,21,21],
"id":1, "label":"25% Percentile", "fillBetween":0, "lines":{"show":true, "lineWidth":0.1, "fill":0.2}},
{"data":[71,64,78,63,72,70,68,68,68,75,63,76,78,63,67,72,71,75,77,70,71,68,64,69,76,75,67,65,77,66],
"id":2, "label":"50% Percentile", "fillBetween":0, "lines":{"show":true, "lineWidth":0.1, "fill":0.2}},
{"data":[137,122,145,142,146,136,126,141,143,140,133,120,126,141,130,132,124,135,127,123,141,138,136,146,143,145,130,129,148,130],
"id":3, "label":"75% Percentile", "fillBetween":0, "lines":{"show":true, "lineWidth":0.1, "fill":0.2}},
{"data":[208,211,212,210,213,217,204,211,209,209,217,212,211,206,209,220,207,214,212,216,205,209,211,213,209,215,214,211,212,207],
"id":4, "label":"X Mean"},
{"data":[163,183,181,169,190,189,162,183,177,171,186,188,178,161,179,185,164,175,185,187,161,168,168,177,175,177,179,182,179,173],
"id":5, "label":"25% Percentile", "fillBetween":4, "lines":{"show":true, "lineWidth":0.1, "fill":0.2}},
{"data":[223,212,216,220,210,225,215,216,212,221,227,212,212,215,213,230,213,221,215,227,218,220,229,222,212,229,228,214,213,211],
"id":6, "label":"50% Percentile", "fillBetween":4, "lines":{"show":true, "lineWidth":0.1, "fill":0.2}},
{"data":[239,238,239,241,238,238,235,235,237,235,237,235,243,243,236,244,245,245,237,235,235,239,237,240,241,239,236,238,243,237],
"id":7, "label":"75% Percentile", "fillBetween":4, "lines":{"show":true, "lineWidth":0.1, "fill":0.2}},
],
"xaxis":["Element: 0","Element: 1","Element: 2","Element: 3","Element: 4","Element: 5","Element: 6","Element: 7",
"Element: 8","Element: 9","Element: 10","Element: 11","Element: 12","Element: 13","Element: 14","Element: 15",
"Element: 16","Element: 17","Element: 18","Element: 19","Element: 20","Element: 21","Element: 22","Element: 23",
"Element: 24","Element: 25","Element: 26","Element: 27","Element: 28","Element: 29"]};
$("#kitbox").kitbox({
kitboxType: "kitboxSeries",
dataType: "array",
dataSource: $.kitboxData,
header: {text: "Percentiles"},
options: {
seriesType: "percentile"
}
});
</script>
<script>
$("#kitbox").kitbox({
kitboxType: "kitboxSeries",
dataType: "json",
url: "/pages/series/remote_series_percentiles.php",
header: {text: "Ajax JSON"},
options: {
seriesType: "percentile"
}
});
</script>
<?php
$data = array( "data" => array(), "xaxis" => array());
$number = 30;
$lines = array('show' => true, 'lineWidth' => 0.1, 'fill' => 0.2);
array_push( $data['data'], array("data" => array(), "id" => 0, "label" => "X Mean") );
array_push( $data['data'], array("data" => array(), "id" => 1, "label" => "25% Percentile", "fillBetween" => 0, 'lines' => $lines) );
array_push( $data['data'], array("data" => array(), "id" => 2, "label" => "50% Percentile", "fillBetween" => 0, 'lines' => $lines) );
array_push( $data['data'], array("data" => array(), "id" => 3, "label" => "75% Percentile", "fillBetween" => 0, 'lines' => $lines) );
array_push( $data['data'], array("data" => array(), "id" => 4, "label" => "X Mean") );
array_push( $data['data'], array("data" => array(), "id" => 5, "label" => "25% Percentile", "fillBetween" => 4, 'lines' => $lines) );
array_push( $data['data'], array("data" => array(), "id" => 6, "label" => "50% Percentile", "fillBetween" => 4, 'lines' => $lines) );
array_push( $data['data'], array("data" => array(), "id" => 7, "label" => "75% Percentile", "fillBetween" => 4, 'lines' => $lines) );
for( $y = 0; $y < $number; $y++ ){
array_push($data['data'][1]['data'], mt_rand(20,40));
array_push($data['data'][2]['data'], mt_rand(60,80));
array_push($data['data'][3]['data'], mt_rand(120,150));
array_push($data['data'][0]['data'], round(($data['data'][1]['data'][$y] + $data['data'][2]['data'][$y] + $data['data'][3]['data'][$y]) / 3));
array_push($data['data'][5]['data'], mt_rand(160,190));
array_push($data['data'][6]['data'], mt_rand(210,230));
array_push($data['data'][7]['data'], mt_rand(235,245));
array_push($data['data'][4]['data'], round(($data['data'][5]['data'][$y] + $data['data'][6]['data'][$y] + $data['data'][7]['data'][$y]) / 3));
}
for( $x = 0; $x < $number; $x++ )
array_push($data['xaxis'], "Element: " . $x );
echo json_encode( $data );
?>