Sign in to follow this  

Angular Guage with Json/ PDO (non-deprecated) Wrapper

Recommended Posts

Hello I wish to make this work for Angular Guage in Fusionwidget using PHP Wrapper and json format.


Can someone please look at this code and tell me where I might mod it for 2d column too angular. I looked at some this dropbox ( but still need some help. Thanks

<meta http-equiv="refresh" content="10" >
      <title>FusionCharts XT - Column 2D Chart - Data from a database</title>
    <link  rel="stylesheet" type="text/css" href="css/style.css" />

      <!-- You need to include the following JS file to render the chart.
      When you make your own charts, make sure that the path to this JS file is correct.
      Else, you will get JavaScript errors. -->

      <script src="fusioncharts/js/fusioncharts.js"></script>


 try {

$mysql_host = 'host';
$mysql_database = 'factordb';
$mysql_username = 'user';
$mysql_password = 'pass';

    $conn = new PDO("mysql:host=$mysql_host; dbname=$mysql_database", $mysql_username, $mysql_password);
    // set the PDO error mode to exception
    $conn->exec("SET CHARACTER SET utf8");      // Sets encoding UTF-8

catch(PDOException $e) {
echo $e->getMessage();

         // Form the SQL query that returns the top 10 most populous countries

         // Execute the query, or else return the error message.
$stm = $conn->prepare("SELECT Factory, Result FROM mysqltable");
$results = $stm->fetchAll(PDO::FETCH_ASSOC);


$jsnarray = array();
foreach($results as $k => $v){
    $jsnarray[] = array('label' => $results[$k]['Factory'], 'value' => $results[$k]['Result']);

    new FusionCharts("type of chart",
            "unique chart id",
            "width of chart",
            "height of chart",
            "div id to render the chart",
            "type of data",
            "actual data");
        $columnChart = new FusionCharts(
                "ex1" ,
    "chart": {
        "caption": "Customer Satisfaction Score",
        "lowerlimit": "0",
        "upperlimit": "100",
        "lowerlimitdisplay": "Bad",
        "upperlimitdisplay": "Good",
        "palette": "1",
        "numbersuffix": "%",
        "tickvaluedistance": "10",
        "showvalue": "0",
        "gaugeinnerradius": "0",
        "bgcolor": "FFFFFF",
        "pivotfillcolor": "333333",
        "pivotradius": "8",
        "pivotfillmix": "333333, 333333",
        "pivotfilltype": "radial",
        "pivotfillratio": "0,100",
        "showtickvalues": "1",
        "showborder": "0"
    "colorrange": {
        "color": [
                "minvalue": "0",
                "maxvalue": "45",
                "code": "e44a00"
                "minvalue": "45",
                "maxvalue": "75",
                "code": "f8bd19"
                "minvalue": "75",
                "maxvalue": "100",
                "code": "6baa01"
    "dials": {
        "dial": [
                "value": "92",
                "rearextension": "15",
                "radius": "100",
                "bgcolor": "333333",
                "bordercolor": "333333",
                "basewidth": "8"
                   "data": ' . $jsonEncodedData . '}');
        // Render the chart

        <div id="chart-1"><!-- Fusion Charts will render here--></div>




Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this