Accessing Jdatabase via JavaScript Or Passing PHP varibles to JavaScript

Question

I want to use this SVG Pie Chart on my Joomla site but the problem is I need to access data from Jdatabase and feed it to its index.js

$(function(){
  $("#pieChart").drawPieChart([
    { title: "Cash",              value : 40,  color: "#2C3E50" },
    { title: "Fixed Interest",    value:  8,   color: "#fe4400" },
    { title: "Property",          value:  24,   color: "#018ab6" },
    { title: "Australian shares", value : 16,   color: "#fff100" },
    { title: "Intl. shares",      value : 12,   color: "#D7DADB" }
  ]);
});

I need variables having Jdatabase data instead of 40,8,24,16,12 in the above code. Do I need to pass variable from PHP module to index.js file or directly access Jdatabase via index.js? In any case, how to achieve this?

Answer 1

Quite simple, simply put the jQuery code you're using to call the Pie Chart (NOT the entire Pie Chart library) inside the module's default.php.

Here's an example:

<?php
    $foo1 = 40;
    $foo2 = 8;
    $foo3 = 24;
    $foo4 = 16;
    $foo5 = 12;
?>

<script>
$(function(){
  $("#pieChart").drawPieChart([
    { title: "Cash",              value : <?php echo $foo1; ?>,   color: "#2C3E50" },
    { title: "Fixed Interest",    value:  <?php echo $foo2; ?>,   color: "#fe4400" },
    { title: "Property",          value:  <?php echo $foo3; ?>,   color: "#018ab6" },
    { title: "Australian shares", value : <?php echo $foo4; ?>,   color: "#fff100" },
    { title: "Intl. shares",      value : <?php echo $foo5; ?>,   color: "#D7DADB" }
  ]);
});
</script>

Or you could use addScriptDeclaration(), like so:

<?php
    $foo1 = 40;
    $foo2 = 8;
    $foo3 = 24;
    $foo4 = 16;
    $foo5 = 12;

    JFactory::getDocument()->addScriptDeclaration('
        $(function(){
           $("#pieChart").drawPieChart([
             { title: "Cash",              value : ' . $foo1 . ',   color: "#2C3E50" },
             { title: "Fixed Interest",    value : ' . $foo2 . ',   color: "#fe4400" },
             { title: "Property",          value : ' . $foo3 . ',   color: "#018ab6" },
             { title: "Australian shares", value : ' . $foo4 . ',   color: "#fff100" },
             { title: "Intl. shares",      value : ' . $foo5 . ',   color: "#D7DADB" }
          ]);
        });
    ');
?>

Answer 2

You can minimize your coding by passing the exact data (json object) that drawPieChart() is asking for in a single variable.

In side of your loop:

// perform sql query that generates the following formatted multi-row resultset:
$resultset = [
    ["title" => "Cash", "value" => 40,  "color" => "#2C3E50"],
    ["title" => "Fixed Interest", "value" => 8,  "color" => "#FE4400"],
    ["title" => "Property", "value" => 24,  "color" => "#018AB6"],
    ["title" => "Australian shares", "value" => 16,  "color" => "#FFF100"],
    ["title" => "Intl. shares", "value" => 12,  "color" => "#D7DADB"]
];
$json = json_encode($resultset);  // repackage the resultset
$piechart_id = "piechart1";    // dynamically generate this value in loop
$js[] = "$('#{$piechart_id}').drawPieChart({$json})"; 

Then after your loop is finished iterating, write the multiple drawPieChart() calls in a single block of code so that you aren't making seperate declarations for each call.

JFactory::getDocument()->addScriptDeclaration('
    jQuery(function($) {
        ' . implode("\n", $js) . '
    }
');

I haven't tested the above snippets, but the logic should be sound.