omegat29 Report post Posted February 14, 2015 Dear all I would like to create angular gauge, How to config parameter of gauge from database (such as value, min, max, angular start-storp etc.) into php project. To improve the project in accordance with the information and impressions. If there is a way, please explain to know. Thank you for advice. Share this post Link to post Share on other sites
Vishalika Report post Posted February 16, 2015 Hi, Welcome to FusionCharts Forum. Angular Gauge can be created using PHP-MySQL. For your reference a sample has been created. You can refer this sample from this dropbox link: https://www.dropbox.com/s/duo8fiatfwcpj03/AngularGauge.zip?dl=0 Hope this helps. Share this post Link to post Share on other sites
omegat29 Report post Posted February 16, 2015 Dear Vishalika Thank you very much for your help. It is coded using xml, wonderful and perfect. If I would like to use json code to improve knowledge, please explain again. I hope to get help from you again. Thanks in advance. ) Best Regard Theerapat Share this post Link to post Share on other sites
Vishalika Report post Posted February 17, 2015 Hi, A sample of JSON data using PHP-MySQL has been shared. Refer this link for the same: https://www.dropbox.com/sh/mtegxolyaivxy2d/AAA39PLz0HMGALxPAAZf8FHNa?dl=0 Hope this helps. Share this post Link to post Share on other sites
omegat29 Report post Posted February 18, 2015 Hi Thank you for your help. I'm trying to apply your code from pie chart to angular gauge. If successful, I will let you know. Thank you very much. Share this post Link to post Share on other sites
Vishalika Report post Posted February 18, 2015 Hi, The sample contains how JSON data is used in PHP+MySQL sample. If you require any further assistance do let us know. Share this post Link to post Share on other sites
omegat29 Report post Posted February 18, 2015 Hi, The sample contains how JSON data is used in PHP+MySQL sample. If you require any further assistance do let us know. Hi Vishalika Thank you very much for your helping. I have some question as below. 1. What is the difference between FC_SetDataFormat() from lates example and json_encode() from tutorial topic:Creating Charts with Data from a Database ? 2. How many maximum of chart in same page on the trial version? (My project is multi KPI gauge in same page.) Thank you very much. Theerapat Share this post Link to post Share on other sites
Vishalika Report post Posted February 18, 2015 Hi, As per your questions, the following are the suggestions offered from our end: 1. What is the difference between FC_SetDataFormat() from lates example and json_encode() from tutorial topic:Creating Charts with Data from a Database ? >> The function FC_SetDataFormat() is to set the value to json. Default is XML .You need to call this function each time before you call renderChart () function. And the json_encode() function converts a PHP value into a JSON value. For example, from a PHP array, it can create a JSON representation of that array. 2. How many maximum of chart in same page on the trial version? (My project is multi KPI gauge in same page.) >>There is no max limit of charts to be rendered in a single page either using Trial or Licensed version. Based on how many number of charts to be rendered, individual div container should be created. Hope this helps. Share this post Link to post Share on other sites
omegat29 Report post Posted February 19, 2015 (edited) Hi Vishalika Thanks for your kindness. I trying to develop project (multi KPI gauge on same page) for all record, but not success. The gauges shown incorrect information, it appear information from one record. So please help fix the problem. Thanks in advance. files attach <?php $link = connectToDB(); // $i = 0; // $query = "select id from gauge"; // $id = mysql_query($query) or die(mysql_error()); $strQuery = "select * from gauge"; $result = mysql_query($strQuery) or die(mysql_error()); $total = mysql_num_rows($result); // while($i<$total){ for($i=0; $i < $total; $i++) { // $i++; while ($ors = mysql_fetch_array($result)) { $strJSON = '{"chart": {"manageresize": "1", "origw": "350", "origh": "200", "palette": "2", "bgalpha": "0", "bgcolor": "FFFFFF", "numbersuffix": "", "showborder": "0", "basefontcolor": "000000", "charttopmargin": "5", "chartbottommargin": "5", "tooltipbgcolor": "009999", "gaugefillmix": "{dark-10},{light-70},{dark-10}", "gaugefillratio": "3", "pivotradius": "8", "gaugeouterradius": "120", "gaugeinnerradius": "70%", "gaugeoriginx": "175", "gaugeoriginy": "170", "trendvaluedistance": "5", "tickvaluedistance": "3", "managevalueoverlapping": "1", "autoaligntickvalues": "1", "showvalue":"1", "valuebelowpivot":"1", '; $strJSON .= '"caption": "' . $ors['gauge_name'] . '", "subcaption": "' . $ors['gauge_subname'] . '", "lowerlimit": "' . $ors['min_value'] . '", "upperlimit": "' . $ors['max_value'] . '"'; $strJSON .= '}, "colorrange": {"color": ['; $strJSON .= '{"minvalue": "' . $ors['g1'] . '", "maxvalue": "' . $ors['g2'] . '", "code": "FF654F"},'; $strJSON .= '{"minvalue": "' . $ors['y1'] . '", "maxvalue": "' . $ors['y2'] . '", "code": "F6BD0F"},'; $strJSON .= '{"minvalue": "' . $ors['r1'] . '", "maxvalue": "' . $ors['r2'] . '", "code": "8BBA00"}'; $strJSON .= ']},"dials": {"dial": [{'; $strJSON .= ' "value": "' . $ors['dial_value'] . '"'; $strJSON .=',"rearextension": "12","basewidth": "10"}]}, "trendpoints": {"point": [{'; $strJSON .= '"startvalue": "' . $ors['target'] . '"'; $strJSON .=',"displayvalue": "Target","usemarker": "1","markerradius": "8","dashed": "1","dashlen": "2","dashgap": "2"}]}}'; } // echo $strJSON; FC_SetDataFormat("json"); echo renderChart("angulargauge", "", $strJSON, "$i", 500, 300); // echo renderChart("bar3d", "", $strJSON, "chart2", 500, 300); // echo renderChart("angulargauge", "", $strJSON, "chart3", 500, 300); } mysql_close($link); ?> Edited February 19, 2015 by omegat29 Share this post Link to post Share on other sites
Vishalika Report post Posted February 20, 2015 Hi, As per your sample and data it seems that you are using a single table for retrieving the minvalue ,maxvalue and dial value. Please refer to the sample shared from our end of Angular Gauge and try to create two tables. One for minvalue and maxvalue and the other for dialvalue. Hope this helps. Share this post Link to post Share on other sites
omegat29 Report post Posted February 23, 2015 (edited) Hi Thank you for help. I try to success for render multiple gauges by using 1 record. This's my code as below. <?php $link = connectToDB(); $strQuery = "select * from gauge"; $result = mysql_query($strQuery) or die(mysql_error()); while ($ors = mysql_fetch_array($result)) { $strJSON = '{"chart": {"manageresize": "1", "origw": "350", "origh": "200", "palette": "2", "bgalpha": "0", "bgcolor": "FFFFFF", "numbersuffix": "", "showborder": "0", "basefontcolor": "000000", "charttopmargin": "5", "chartbottommargin": "5", "tooltipbgcolor": "009999", "gaugefillmix": "{dark-10},{light-70},{dark-10}", "gaugefillratio": "3", "pivotradius": "8", "gaugeouterradius": "120", "gaugeinnerradius": "70%", "gaugeoriginx": "175", "gaugeoriginy": "170", "trendvaluedistance": "5", "tickvaluedistance": "3", "managevalueoverlapping": "1", "autoaligntickvalues": "1", "showvalue":"1", "valuebelowpivot":"1", '; $strJSON .= '"caption": "' . $ors['gauge_name'] . '", "subcaption": "' . $ors['gauge_subname'] . '", "lowerlimit": "' . $ors['min_value'] . '", "upperlimit": "' . $ors['max_value'] . '"'; $strJSON .= '}, "colorrange": {"color": ['; $strJSON .= '{"minvalue": "' . $ors['g1'] . '", "maxvalue": "' . $ors['g2'] . '", "code": "FF654F"},'; $strJSON .= '{"minvalue": "' . $ors['y1'] . '", "maxvalue": "' . $ors['y2'] . '", "code": "F6BD0F"},'; $strJSON .= '{"minvalue": "' . $ors['r1'] . '", "maxvalue": "' . $ors['r2'] . '", "code": "8BBA00"}'; $strJSON .= ']},"dials": {"dial": [{'; $strJSON .= ' "value": "' . $ors['dial_value'] . '"'; $strJSON .=',"rearextension": "12","basewidth": "10"}]}, "trendpoints": {"point": [{'; $strJSON .= '"startvalue": "' . $ors['target'] . '"'; $strJSON .=',"displayvalue": "Target dia ","usemarker": "1","markerradius": "8","dashed": "1","dashlen": "2","dashgap": "2"}]}}'; // echo $strJSON . "<br><br>"; FC_SetDataFormat("json"); // echo renderChart("angulargauge", "", $strJSON, $ors['id'], "100%", "100%"); echo renderChart("angulargauge", "", $strJSON, $ors['id'], 300, 200); } mysql_close($link); ?> gauge pic So, now I have some question 1. Can I add text label for color range as Linear gauge? 2. Can I change font color for dial value and trendpoint value? Thanks for advance. Edited February 23, 2015 by omegat29 Share this post Link to post Share on other sites
Vishalika Report post Posted February 23, 2015 Hi, As per your questions, the following are the suggestions: 1. Can I add text label for color range as Linear gauge? >>You can add text label by using the attribute "lowerlimitdisplay" and "upperlimitdisplay" in the chart element of your JSON data. 2. Can I change font color for dial value and trendpoint value? >> You can change font color for the dial value by setting "valueFontColor" in the dial element of your JSON data. But the color of Trend point value cannot be change. Refer this documentation for help: http://docs.fusioncharts.com/tutorial-gauge-and-widgets-guide-angular-gauge-configuring-dials.html Hope this helps. Share this post Link to post Share on other sites