From 8f1fa2505e561aa2603bd78adc4e45e80577c4ab Mon Sep 17 00:00:00 2001 From: jbogartPint Date: Tue, 7 Jun 2016 14:17:24 -0700 Subject: [PATCH] Updated readme and added getRenderScript function --- README.md | 210 +++++++++++++++++++++++++++++------------------------- zc.php | 161 ++++++++++++++++++++--------------------- 2 files changed, 190 insertions(+), 181 deletions(-) diff --git a/README.md b/README.md index c871b81..c0c1a19 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ The purpose of this wrapper is to enable PHP users to quickly and easily create ### Pulling plot data from MySQL: -``` +```php $zc = new ZC("myChart"); $zc->connect($host,$port,$uName,$pswd,$db); $data = $zc->query($mySqlQuery, true); @@ -35,7 +35,7 @@ $zc->closeConnection(); ### Plotting data without a MySQL database: -``` +```php $zc = new ZC("myChart"); $zc->setSeriesData([1,4,2,6,3]); $zc->render(); @@ -123,179 +123,195 @@ There are three levels of usability for this wrapper: ## Documentation -### ZC (elemId, chartType`opt`, width`opt`, height`opt`, theme`opt`) `Contructor` +### ZC ( elemId [,chartType="area" [,theme="light" [,width="100%" [,height="400"]]]] ) `Contructor` **Default Behavior:** This method is overloaded to accept: 1, 2, 3, 4, or 5 arguments. Argument order matters. See examples below. **Examples:** -``` +```php $zc = new ZC("chartDiv"); $zc = new ZC("chartDiv", "line"); $zc = new ZC("chartDiv", "line", "dark"); $zc = new ZC("chartDiv", "line", "dark", "600"); $zc = new ZC("chartDiv", "line", "dark", "600", "400"); +$zc = new ZC("chartDiv", null, "dark"); +$zc = new ZC("chartDiv", "bar", null, 600, 400); ``` -*NOTE: The first argument is required to render your chart properly. If this argument is omitted, then the chart will attempt to render on an html element with an id of "myChart" by default.* +*NOTE: The first argument is required to render your chart properly. This first argument corresponds to the id of the html element you wish to put your chart into.* --- -### render () `Level 1` +### render ( ) `Level 1` Renders the chart to the html element specified from the constructor.
**Example:** -``` +```php $zc->render(); ``` +--- + +### getRenderScript ( ) `Level 1` +This function returns the text that would be printed by the render function. + +**Example:** + +```php +$chart1Script = $zc->getRenderScript();// This stores the script, to be printed later +echo $chart1Script;// This will render the chart +``` + --- -### connect (host, port, username, pswd, db) `Level 1)` +### connect ( host, port, username, pswd, db ) `Level 1` Establishes a connection to your MySQL database. **Example:** -``` +```php $zc->connect("127.0.0.1","8889","root","root","mydb"); ``` --- -### closeConnection () `Level 1` +### closeConnection ( ) `Level 1` Closes the connection to your MySQL database. **Example:** -``` +```php $zc->closeConnection(); ``` --- -### query (sqlQuery, scaleXLabelsFlag) `Level 1` +### query ( sqlQuery, scaleXLabelsFlag ) `Level 1` Queries your MySQL database with your supplied query string. ***Note:*** *Accepts a second argument that expects a boolean representing whether or not to treat the first field returned from your SQL query as the x-axis scale labels.* **Example:** -``` +```php $queryStr = "SELECT timestamp, unitsSold, expected, anotherMetric FROM feed_data"; $zc->query($queryStr, true); ``` In the code snippet above, we set the scaleXLabelsFlag to true because our SQL query returns 'timestamps' data that we wish to set as our x-axis scale labels. If we did not want to explicitly set the x-axis labels then the code could look like this: -``` +```php $queryStr = "SELECT unitsSold, expected, anotherMetric FROM feed_data"; $zc->query($queryStr, false); ``` --- -### getFieldNames () `Level 1` +### getFieldNames ( ) `Level 1` Get the MySQL field names returned from the function query above. **Example:** -``` +```php $fieldNames = $zc->getFieldNames(); ``` --- -### setTitle (theChartTitle) `Level 1` +### setTitle ( theChartTitle ) `Level 1` Sets the chart title. Expected arg: String. **Example:** -``` +```php $zc->setTitle("Sandwiches Consumed"); ``` --- -### setSubtitle (theSubtitle) `Level 1` +### setSubtitle ( theSubtitle ) `Level 1` Sets the chart subtitle. Expected arg: String. **Example:** -``` +```php $zc->setSubtitle("March 1 thru March 31, 2016"); ``` --- -### setLegendTitle (theLegendTitle) `Level 1` +### setLegendTitle ( theLegendTitle ) `Level 1` Sets the chart legend's title. Expected arg: String. **Example:** -``` +```php $zc->setLegendTitle("Sandwich Types"); ``` --- -### setScaleXTitle (xAxisTitle) `Level 1` +### setScaleXTitle ( xAxisTitle ) `Level 1` Sets the chart x-axis title. **Example:** -``` +```php $zc->setScaleXTitle("Quantity"); ``` --- -### setScaleYTitle (yAxisTitle) `Level 1` +### setScaleYTitle ( yAxisTitle ) `Level 1` Sets the chart y-axis title. **Example:** -``` +```php $zc->setScaleYTitle("Date"); ``` --- -### setScaleXLabels (xAxisLabels) `Level 1` +### setScaleXLabels ( xAxisLabels ) `Level 1` Sets the chart x-axis' scale values. **Example:** -``` +```php $zc->setScaleXLabels(array("Mar 1", "Mar 2", "Mar 3)); ``` --- -### setScaleYLabels (yAxisValueRange) `Level 1` +### setScaleYLabels ( yAxisValueRange ) `Level 1` Sets the chart y-axis' scale value range and increment. **Example:** -``` +```php $zc->setScaleYLabels(array("0:10:100"); ``` --- -### setSeriesData (seriesIndex *`opt`*, plotDataArray) ```Level 1``` +### setSeriesData ( [,seriesIndex], plotDataArray ) ```Level 1``` Sets the chart plot data. ie) The data to be plotted. +seriesIndex is an optional parameter. If ommited, the function will assume plotDataArray contain +all the data for all the series. **Examples:** -``` +```php $zc->setSeriesData(0, [5,7,11]); $zc->setSeriesData([[3,7,1], [20,32,37], [1,25,48]]); ``` --- -### setSeriesText (seriesIndex *`opt`*, seriesText) `Level 1` +### setSeriesText ( [,seriesIndex], seriesText ) `Level 1` Sets the chart data labels. ie) Used for tooltips, valueBox, etc.. There are two ways to overload this function. @@ -305,49 +321,49 @@ There are two ways to overload this function. **Examples:** -``` +```php $zc->setSeriesText(["BLT","Tuna","Club"]);// applies "BLT" to series[0], "Tuna" to series[1],.. $zc->setSeriesText(0, "BLT");// applies "BLT" to series[0] ``` --- -### setChartType (theType) `Level 1` +### setChartType ( theType ) `Level 1` Sets the chart type. ie) Area, Bar, Line, Pie, etc.. **Example:** -``` +```php $zc->setChartType("line"); ``` --- -### setChartWidth (chartWidth) `Level 1` +### setChartWidth ( chartWidth ) `Level 1` Sets the chart width. ***Note:*** *Defaults to 100%.* **Examples:** -``` +```php $zc->setChartWidth("600");// in pixels $zc->setChartWidth("100%"); ``` --- -### setChartHeight (chartHeight) `Level 1` +### setChartHeight ( chartHeight ) `Level 1` Sets the chart height. ***Note:*** *Defaults to 400px.* **Examples:** -``` +```php $zc->setChartHeight("400"); $zc->setChartHeight("50%"); ``` --- -### setChartTheme (chartTheme) `Level 1` +### setChartTheme ( chartTheme ) `Level 1` Sets the chart color theme. ie) light, dark, classic **Limited Options:** @@ -355,281 +371,281 @@ Sets the chart color theme. ie) light, dark, classic **Example:** -``` +```php $zc->setChartTheme("dark"); ``` --- -### enableScaleXZooming () `Level 1` +### enableScaleXZooming ( ) `Level 1` Turn on chart zooming on x-axis. **Example:** -``` +```php $zc->enableScaleXZooming(); ``` --- -### enableScaleYZooming () `Level 1` +### enableScaleYZooming ( ) `Level 1` Turn on chart zooming on y-axis. **Example:** -``` +```php $zc->enableScaleYZooming(); ``` --- -### enableCrosshairX () `Level 1` +### enableCrosshairX ( ) `Level 1` Turn on chart crosshair guide on x-axis. ***NOTE:*** *On by default.* **Example:** -``` +```php $zc->enableCrosshairX(); ``` --- -### enableCrosshairY () `Level 1` +### enableCrosshairY ( ) `Level 1` Turn on chart crosshair guide on y-axis. **Example:** -``` +```php $zc->enableCrosshairY(); ``` --- -### enableTooltip () `Level 1` +### enableTooltip ( ) `Level 1` Turn on chart tooltip. **Example:** -``` +```php $zc->enableTooltip(); ``` --- -### enableValueBox () `Level 1` +### enableValueBox ( ) `Level 1` Turn on chart valueBox. **Example:** -``` +```php $zc->enableValueBox(); ``` --- -### enablePreview () `Level 1` +### enablePreview ( ) `Level 1` Turn on chart preview area. **Example:** -``` +```php $zc->enablePreview(); ``` --- -### disableScaleXZooming () `Level 1` +### disableScaleXZooming ( ) `Level 1` Turn off chart zooming on x-axis. **Example:** -``` +```php $zc->disableScaleXZooming(); ``` --- -### disableScaleYZooming () `Level 1` +### disableScaleYZooming ( ) `Level 1` Turn off chart zooming on y-axis. **Example:** -``` +```php $zc->disableScaleYZooming(); ``` --- -### disableCrosshairX () `Level 1` +### disableCrosshairX ( ) `Level 1` Turn off chart crosshair on x-axis. **Example:** -``` +```php $zc->disableCrosshairX(); ``` --- -### disableCrosshairY () `Level 1` +### disableCrosshairY ( ) `Level 1` Turn off chart crosshair on y-axis. **Example:** -``` +```php $zc->disableCrosshairY(); ``` --- -### disableTooltip () `Level 1` +### disableTooltip ( ) `Level 1` Turn off chart tooltip. **Example:** -``` +```php $zc->disableTooltip(); ``` --- -### disableValueBox () `Level 1` +### disableValueBox ( ) `Level 1` Turn off chart valueBox. **Example:** -``` +```php $zc->disableValueBox(); ``` --- -### disablePreview () `Level 1` +### disablePreview ( ) `Level 1` Turn off chart preview area. **Example:** -``` +```php $zc->disablePreview(); ``` --- -### getTitle () `Level 1` +### getTitle ( ) `Level 1` Get the chart title. **Example:** -``` +```php $chartTitle = $zc->getTitle(); ``` --- -### getSubtitle () `Level 1` +### getSubtitle ( ) `Level 1` Get the chart subtitle. **Example:** -``` +```php $chartSubtitle = $zc->getSubtitle(); ``` --- -### getLegendTitle () `Level 1` +### getLegendTitle ( ) `Level 1` Get the chart legend title. **Example:** -``` +```php $legendTitle = $zc->getLegendTitle(); ``` --- -### getConfig () `Level 1` +### getConfig ( ) `Level 1` Get the chart JSON configuration. **Example:** -``` +```php $config = $zc->getConfig(); ``` --- -### getScaleXTitle () `Level 1` +### getScaleXTitle ( ) `Level 1` Get the chart x-axis title. **Example:** -``` +```php $xAxisTitle = $zc->getScaleXTitle(); ``` --- -### getScaleYTitle () `Level 1` +### getScaleYTitle ( ) `Level 1` Get the chart y-axis title. **Example:** -``` +```php $yAxisTitle = $zc->getScaleYTitle(); ``` --- -### getScaleXLabels () `Level 1` +### getScaleXLabels ( ) `Level 1` Get the chart x-axis scale values. **Example:** -``` +```php $xAxisLabels = $zc->getScaleXLabels(); ``` --- -### getScaleYLabels () `Level 1` +### getScaleYLabels ( ) `Level 1` Get the cahrt y-axis scale values. **Example:** -``` +```php $yAxisLabels = $zc->getScaleYLabels(); ``` --- -### getSeriesData () `Level 1` +### getSeriesData ( ) `Level 1` Get the chart plot data/values. **Example:** -``` +```php $plotValues = $zc->getSeriesData(); ``` --- -### getSeriesText () `Level 1` +### getSeriesText ( ) `Level 1` Get the chart plot data labels/texts. **Example:** -``` +```php $plotSeriesText = $zc->getSeriesText(); ``` --- -### setConfig () `Level 2` +### setConfig ( ) `Level 2` This is a single function that accepts a string in the form of dot-syntax. This function allows you to set a value for a single chart property.
**Examples:** -``` +```php $zc->setConfig("legend.header.background-color", "red"); $zc->setConfig("series[1]", array(5,9,13,10,22,39)); $zc->setConfig("series", [[1,2,3],[,10,15,20],[100,50,75]]); @@ -639,12 +655,12 @@ This syntax is a close-derivative of ZingChart's JSON syntax except that it uses --- -### trapdoor () `Level 3` +### trapdoor ( ) `Level 3` This is a single function that accepts a full-blown JSON string. This function allows you to set the entire chart's configuration with a single function call. This JSON string can be generated using standard PHP associative array syntax as well.
**Examples:** -``` +```php $myConfig = array( "legend" => array( "header" => array( @@ -671,7 +687,7 @@ $zc->trapdoor(json_encode($myConfig)); ``` Or you could pass in the JSON string like this: -``` +```php $jsonString = <<< EOT { "legend":{ @@ -696,14 +712,14 @@ $jsonString = <<< EOT } EOT; -$zc->drapdoor($jsonString); +$zc->trapdoor($jsonString); ``` One thing to note here is that if you are using the array method, then you must prepend your array with `json_encode(...)` in order to render the chart properly when you call the render method. Finished product:
The following four lines of code will produce an area chart that is 600x400 pixels with the light color theme rendered in the html element's id of 'myChart'. -``` +```php $zc = new ZC("myChart", "area", "light", 600, 400); $zc.trapdoor(json_encode($myConfig)); $zc.render(); diff --git a/zc.php b/zc.php index 9be3c9c..1e8178f 100644 --- a/zc.php +++ b/zc.php @@ -9,21 +9,20 @@ class ZC { private $height; private $fullscreen = false; private $config; - private $data; private $fieldNames = array(); - public function ZC($id="myChart", $cType="area", $theme="light", $width="100%", $height=400) { - $this->chartId = $id; - $this->chartType = $cType; - $this->width = $width; - $this->height = $height; - $this->theme = $theme; + public function __construct($id, $cType, $theme, $width, $height) { + $this->chartId = $id; + $this->chartType = is_null($cType) ? 'area' : $cType; + $this->theme = is_null($theme) ? 'light' : $theme; + $this->width = is_null($width) ? '100%' : $width; + $this->height = is_null($height) ? '400' : $height; - // Setting the chart type, this is not a top level function like, width,height,theme, and id - $this->config['type'] = $cType; + // Setting the chart type, this is not a top level function like width, height, theme, and id + $this->config['type'] = $this->chartType; - // Defaulting to dynamic margins + // Defaulting to dynamic margins $this->config['plotarea']['margin'] = 'dynamic'; // Defaulting to crosshairs enabled @@ -35,12 +34,15 @@ public function ZC($id="myChart", $cType="area", $theme="light", $width="100%", // ###################################### LEVEL 1 FUNCTIONS ###################################### public function render() { + echo $this->getRenderScript(); + } + + public function getRenderScript() { $id = $this->chartId; $width = $this->width; $height = $this->height; $theme = $this->theme; - $fullscreen = $this->fullscreen; - + $fullscreen = $this->fullscreen ? 'true' : 'false'; $jsonConfig = json_encode($this->config); $gold = <<< EOT EOT; - echo $gold; + return $gold; } public function connect($host, $port, $username, $password, $dbName) { @@ -85,19 +87,19 @@ public function query($query, $scaleXFlag) { $info = mysqli_fetch_fields($result); if ($scaleXFlag) { - $count = 0; - foreach ($info as $f) { - if ($count == 0) {} - else { - array_push($this->fieldNames, $f->name); - } - $count++; - } + $count = 0; + foreach ($info as $f) { + if ($count == 0) {} + else { + $this->fieldNames[] = $f->name; + } + $count++; + } } else { - foreach ($info as $f) { - array_push($this->fieldNames, $f->name); - } + foreach ($info as $f) { + $this->fieldNames[] = $f->name; + } } $result->close(); @@ -105,12 +107,12 @@ public function query($query, $scaleXFlag) { if ($scaleXFlag) { for ($i = 1; $i < $columns; $i++) { - array_push($seriesData, array()); + $seriesData[] = array(); } } else { for ($i = 0; $i < $columns; $i++) { - array_push($seriesData, array()); + $seriesData[] = array(); } } @@ -118,21 +120,20 @@ public function query($query, $scaleXFlag) { for ($j = 0; $j < $columns; $j++) { if ($scaleXFlag) { if ($j == 0) { - array_push($xData, $row[0]); + $xData[] = $row[0]; } else { - array_push($seriesData[$j-1], $row[$j]*1); + $seriesData[$j-1][] = $row[$j]*1; } } else { - array_push($seriesData[$j], $row[$j]*1); + $seriesData[$j][] = $row[$j]*1; } } } $result->close(); - - //$response = array($xData,$seriesData); + $this->data = $seriesData;//$response; // Defaulting to set X and Y axis titles according to data retreived from MySQL database @@ -144,7 +145,7 @@ public function query($query, $scaleXFlag) { } public function getFieldNames() { - return $this->fieldNames; + return $this->fieldNames; } public function setTitle($title) { @@ -173,39 +174,32 @@ public function setScaleXLabels($labelsArray) { public function setScaleYLabels($yAxisRange) { // "0:100:5" $this->config['scale-y']['values'] = "$yAxisRange"; } - public function setSeriesData() {//$index, $theData) { - $args = array(); - for ($i = 0; $i < func_num_args(); $i++) { - array_push($args, func_get_arg($i)); - } - if (func_num_args() == 1) { - //$this->data['series'][$index]['values'] = $args[1]; - for ($j = 0; $j < count($args[0]); $j++) { - $this->config['series'][$j]['values'] = $args[0][$j]; + public function setSeriesData() { + $numArgs = func_num_args(); + if ($numArgs == 1) { + for ($j = 0; $j < count(func_get_arg(0)); $j++) { + $this->config['series'][$j]['values'] = func_get_arg(0)[$j]; } } - else if (func_num_args() == 2) { - $this->config['series'][$args[0]]['values'] = $args[1]; + else if ($numArgs == 2) { + $this->config['series'][func_get_arg(0)]['values'] = func_get_arg(1); } else { - echo "

Invalid number of arguments: " . func_num_args() . "

"; + echo "

Invalid number of arguments: $numArgs

"; } } public function setSeriesText() { - $args = array(); - for ($i = 0; $i < func_num_args(); $i++) { - array_push($args, func_get_arg($i)); - } - if (count($args) == 1) { - for($i = 0; $i < count($args[0]); $i++) { - $this->config['series'][$i]['text'] = $args[0][$i]; + $numArgs = func_num_args(); + if ($numArgs == 1) { + for($i = 0; $i < count(func_get_arg(0)); $i++) { + $this->config['series'][$i]['text'] = func_get_arg(0)[$i]; } } - else if (count($args) == 2) { - $this->config['series'][$args[0]]['text'] = $args[1]; + else if ($numArgs == 2) { + $this->config['series'][func_get_arg(0)]['text'] = func_get_arg(1); } else { - echo "

Invalid number of arguments: " . count($args) . "

"; + echo "

Invalid number of arguments: $numArgs

"; } } @@ -220,31 +214,30 @@ public function setChartHeight($height) { $this->height = $height; } public function setChartTheme($theme) { - $this->theme = $theme; + $this->theme = $theme; } public function setFullscreen() { $this->fullscreen = !$this->fullscreen; } - public function enableScaleXZooming() { - $this->config['scale-x']['zooming'] = 'true'; + $this->config['scale-x']['zooming'] = 'true'; } public function enableScaleYZooming() { - $this->config['scale-y']['zooming'] = 'true'; + $this->config['scale-y']['zooming'] = 'true'; } public function enableCrosshairX() { - $this->config['crosshair-x'] = array("visible" => "true"); - } - public function enableCrosshairY() { - $this->config['crosshair-y'] = array(); + $this->config['crosshair-x'] = array("visible" => "true"); + } + public function enableCrosshairY() { + $this->config['crosshair-y'] = array(); } public function enableTooltip() { $this->config['plot']['tooltip']['text'] = "%t, %v"; $this->config['plot']['tooltip']['visible'] = true; } public function enableValueBox() { - $this->config['plot']['value-box']['text'] = "%t, %v"; + $this->config['plot']['value-box']['text'] = "%t, %v"; } public function enablePreview() { $this->config['preview'] = array(); @@ -253,16 +246,16 @@ public function enablePreview() { public function disableScaleXZooming() { - $this->config['scale-x']['zooming'] = 'false'; + $this->config['scale-x']['zooming'] = 'false'; } public function disableScaleYZooming() { - $this->config['scale-y']['zooming'] = 'false'; + $this->config['scale-y']['zooming'] = 'false'; } public function disableCrosshairX() { - $this->config['crosshair-x']['visible'] = false; + $this->config['crosshair-x']['visible'] = false; } public function disableCrosshairY() { - //$this->config['crosshair-y']['visible'] = 'false'; + //$this->config['crosshair-y']['visible'] = 'false'; $newConfig = array(); foreach($this->config as $x => $x_value) { if ($x == 'crosshair-y') {}// skip over this. Do not add to newConfig @@ -298,34 +291,34 @@ public function disablePreview() { public function getTitle() { - return $this->config['title']['text']; + return $this->config['title']['text']; } public function getSubTitle() { - return $this->config['subtitle']['text']; + return $this->config['subtitle']['text']; } public function getLegendTitle() { - return $this->config['legend']['header']['text']; + return $this->config['legend']['header']['text']; } public function getConfig() { - return $this->config; + return $this->config; } public function getScaleXTitle() { - return $this->config['scale-x']['label']['text']; + return $this->config['scale-x']['label']['text']; } public function getScaleYTitle() { - return $this->config['scale-y']['label']['text']; + return $this->config['scale-y']['label']['text']; } public function getScaleXLabels() { - return $this->config['scale-x']['labels']; + return $this->config['scale-x']['labels']; } public function getScaleYLabels() { - return $this->config['scale-y']['labels']; + return $this->config['scale-y']['labels']; } public function getSeriesData() { $seriesValues = array(); foreach($this->config['series'] as $key => $key_val) { if ($key == 'values') { - array_push($seriesValues, $key_val); + $seriesValues[] = $key_val; } } return $seriesValues; @@ -334,7 +327,7 @@ public function getSeriesText() { $seriesText = array(); foreach($this->config['series'] as $key => $key_val) { if ($key == 'text') { - array_push($seriesText, $key_val); + $seriesText[] = $key_val; } } return $seriesText; @@ -360,20 +353,20 @@ public function setConfig($keyChain, $val) { // ###################################### LEVEL 3 FUNCTION ###################################### public function trapdoor($json) { - $this->config = is_array($this->config) ? $this->config : array(); + $this->config = is_array($this->config) ? $this->config : array(); $this->config = array_replace($this->config, json_decode($json, true)); } // ###################################### HELPER FUNCTIONS ###################################### private function autoAxisTitles($scaleXFlag=false, $xLabels=array()) { - if ($scaleXFlag) { - $this->config['scale-x']['label']['text'] = $this->fieldNames[0]; - $this->config['scale-y']['label']['text'] = $this->fieldNames[1]; - $this->config['scale-x']['labels'] = $xLabels; - } + if ($scaleXFlag) { + $this->config['scale-x']['label']['text'] = $this->fieldNames[0]; + $this->config['scale-y']['label']['text'] = $this->fieldNames[1]; + $this->config['scale-x']['labels'] = $xLabels; + } else { - $this->config['scale-y']['label']['text'] = $this->fieldNames[0]; + $this->config['scale-y']['label']['text'] = $this->fieldNames[0]; } }