I've got an issue with the Pie chart titles

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by TomW on 6th August 2017
I am trying to get the total dollar amount moved to under the pie chart. I will remove it from the actual title once I can get it working. I tried the titleXaxis option, but it didn't work as expected. What am I missing? Please see code below. Thanks, Richard!

<!DOCTYPE html>
<html>
<head>
     <title>A/R Aging Pie Chart</title>
<script src="../js/jquery.1.12.js"></script>
<script src="../RGraph/libraries/RGraph.common.core.js"></script>
<script src="../RGraph/libraries/RGraph.common.dynamic.js"></script>
<script src="../RGraph/libraries/RGraph.common.tooltips.js"></script>
<script src="../RGraph/libraries/RGraph.pie.js"></script>

<style>
         .RGraph_tooltip {
             font-size: 14pt !important;
         }
</style>
</head>
<body>
<div id="container2" style="width: 550px; position: relative; padding: 45px; border: 1px solid #ccc; display: inline-block">
<canvas id="cvs2" width="300" height="225">
     [No canvas support]
</canvas>
</div>
<script>
     $(document).ready(function ()
     {
   RGraph.cache = [];
         var pie = new RGraph.Pie({
             id: 'cvs2',
             data: [13541,15231,14452,2451,7473],
             options: {
     title: 'Accounts Receivable Aging\n$53,148',
     titleY: 1,
     titleXaxis: '$53,148',
                 gutterLeft: 75,
                 labels: ['0-30','31-60','61-90','91-120','121+'],
     colors: ['#99f','#94f776','#fe783e','#5892ad','crimson'],
                 shadowOffsetx: 0,
                 shadowOffsety: 0,
                 shadowBlur: 15,
                 strokestyle: 'black',
     linewidth: 1,
                 //exploded: [15,15],
                 tooltips: ['0-30: $13,541','31-60: $15,231','61-90: $14,452','90-120: $2,451','121+: $7,473'],
     tooltipsEvent: 'mousemove',
                 textAccessible: true,
                 labelsSticksList: true,
                 labelsSticksLinewidth: 0.5,
                 labelsSticksUsecolors: false
    }
         }).draw().on('mouseout', function (obj) {RGraph.redraw();})
     });
</script>

<?php

?>
</body>
</html>
Posted by Richard on 6th August 2017
Hi there,

titleXaxis is not a Pie chart property - there is no X axis on a Pie chart.

The property you want is titleY and with that you can give the exact Y coordinate of the Y title. Eg.

...
title: 'Accounts Receivable Aging: $53,148',
titleY: 225 - 15, // The height of the canvas minus 15 pixels
...




Richard
Posted by TomW on 6th August 2017
Thanks for the extremely prompt reply...you rock! So, just for clarification, what I'd like to do is have the top title be "Accounts Receivable Aging" and a subtitle (for lack of a better term) underneath the pie chart that just has the amount of "$53,148." Is it not possible to have a top and bottom title on the pie charts? Thanks again for your promptness!
Posted by Richard on 6th August 2017
Hi there,

Yes you can do that - though you'll need to use the drawing API text object to draw the bottom subtitle (take out the titleY property of your Pie chart configuration so that the Pie chart title is at the top).

Here's the drawing API text object. Don't forget to include the drawing API text objects' file at the top of the page with your other libraries.




    var text = new RGraph.Drawing.Text({
         id: 'cvs',
         x: 150,
         y: 215,
         text: 'Accounts Receivable Aging: $90',
         options: {
             valign: 'center',
             halign: 'center',
             marker: false,
             size: 16,
             bounding: false
         }
     }).draw();






Richard
Posted by TomW on 6th August 2017
Thanks again. This is great! Cheers!

Add a reply




« Back to message list