0

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?

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" }
          ]);
        });
    ');
?>
  • You never disappoint me. Worked perfectly. I have one more query, I need to display multiple pie charts with different variables. Can I somehow use this JS inside a PHP loop? – saibbyweb Aug 23 '16 at 9:33
  • 1
    Yes, you can use a loop "foreach ($results as $chart) { ... }". Start trying to write the code based on this and if you run into any issues, ask a new question, with the code you've already got. – Lodder Aug 23 '16 at 9:41
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.