I have an issue with the RGraph.SVG.clear() function


« 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 Todd Shafer on 11th December 2017
I'm using RGraph.SVG.clear(chartState.bar.svg); to clear BAR chart before displaying a new chart, which works great. However, when I use RGraph.SVG.clear(chartState.line.svg); remove LINE chart, it doesn't clear the chart.

I'm using:

chartState = { first: true, bar: null, line: null }

if(chartState.bar != null) RGraph.SVG.clear(chartState.bar.svg);
if(chartState.line != null) RGraph.SVG.clear(chartState.line.svg);

The bar chart uses grow() or wave(), the line chart uses trace().

Posted by Richard on 11th December 2017
Hi there,

Well you've not given me much to go on - so here's a demo using separate SVG tags for a Bar and Line chart along with some buttons to clear them:

www.rgraph.net/tests/svg.bar/bar-line-combined.html

Richard
Posted by Todd Shafer on 11th December 2017
I remade your page at the link below. I add trace() and toolkit. After you click Clear Line button and hover over where the line chart should be you will still see trace() elements and when you click Redraw it just reappears without the trace() effect. The grow() effect isn't working in this example, but it works on my site. It's only the line chart I'm having trouble with.


www.dynamicproduction.com/2018/test.html


Thanks for getting back to me so quickly.

Todd
Posted by Richard on 11th December 2017
Hi there,

Ok I was able to fix that given your example and the fixed version will be part of the next release (either beta or stable).

Thanks.

Richard
Posted by Todd Shafer on 11th December 2017
Okay, is there a date in mind for that release?

Thanks again,

Todd
Posted by Richard on 11th December 2017
Hi there,

I've just added a new beta to the site - so download and try it here:

www.rgraph.net/download#beta

Remember to update all libraries.

Richard
Posted by Todd Shafer on 13th December 2017
I downloaded and am using the beta. Things seem to work on the test.html I shared. However, when redrawing the line graph it doesn't animate like the bar charts do. I made a video to demonstrate (see link below). Notice that when I click any bar chart it re animates, but the line chart doesn't. Also, I don't understand why the trace shows on bar charts after executing line charts. On the test.html it doesn't do that... I'm not sure what the difference is because it's the same code. Thanks

www.youtube.com/watch?v=FJy9YbDq5Ss&;feature=youtu.be
Posted by Richard on 14th December 2017
Hi there,

OK I've added an adjustment to the Line chart trace effect so try downloading the latest beta and using that. Be sure to upgrade all the libraries that you're using to the same version.

Richard
Posted by Todd Shafer on 14th December 2017
I deleted all files and then re uploaded the Dec-14 files. It doesn't appear to change anything. Are you able to provide an example of it re aminating on a button click?
Posted by Richard on 14th December 2017
Hi there,

Here's a demo:

www.rgraph.net/tests/svg.bar/bar-line-combined.html

Richard
Posted by Todd Shafer on 15th December 2017
I hate bugging you with this, but I've tried my best to figure it out and I can't. I redid the www.dynamicproduction.com/2018/test.html and put the charts in a function using ajax. When you click redraw the bar chart re animates but the line chart doesn't. It did re animate when I was just doing chartState.line.trace(), but doesn't when executing the ajax each time. I hope that makes since. Also, I noticed in your abovelabel examples that the abovelabel number appears after the bar anitmates. What functions does this? You've been very helpful and I really appreciate it.

Thanks, Todd
Posted by Richard on 15th December 2017
Hi there,

OK try using this Line chart library instead:

www.rgraph.net/tests/svg.bar/RGraph.svg.line.js

Richard
Posted by Todd Shafer on 15th December 2017
No luck...
Posted by Richard on 15th December 2017
Hi there,

Hmmm, wwell that's strange. Try taking the source code of this page, put it on your server, change the paths to the libraries to those on your server and see what happens.

www.rgraph.net/tests/svg.bar/bar-line-combined.html

Richard
Posted by Todd Shafer on 15th December 2017
I started from that page testing things step by step in hopes of getting it figured out. I can load the chart from the ajax and it animates. Then when I use the chartState.line.trace() function in the Redraw it reanimates. However, it appears when you re-execute the code that drew the chart in the first place it doesn't.

I changed the test.html file and added a ReAjax button. In that ajax I changed the data to get dial verses ask so that the chart would change data. Header will change from Ask to Quote to Dial t Ask.

If before clicking the ReAjax and only click Redraw it will reanimate. After you click ReAjax it will not.

I hope this helps. I've updated the RGraph.svg.line.js with your new code in my library.

www.dynamicproduction.com/2018/test.html
Posted by Richard on 15th December 2017
Hi there,

If I'm not mistaken then when you press your Redraw button it clears the canvas and redraws the same line chart object. Whereas when you press the Reajax button it creates an entirely new chart object.

This new chart object will then create a new clipping SVG object which will have the same ID as before.

So this maybe the issue.

So in your function the fetches new data via AJAX and draws a new chart - change it to fetch the new data and set it on the original line chart object. ie Set this property to the new data that you get from your AJAX call:

chartState.line.originalData = newArrayOfData;

It should contain all the new data (for both lines) so it will be something like this:

chartState.line.originalData = [
     [4,8,6,3,5,8,5,2,4,5,8,9], // First set of data
     [4,9,5,6,8,7,8,4,1,2,3,5] // Second set of data
];

ie It's a two-dimensional array.

Then clear the SVG tag and either call RGraph.SVG.redraw() or chartState.line.draw();

Richard
Posted by Richard on 15th December 2017
Hi there,
> I got an email saying there was an update but didn't see anything when here...

Press refresh.

Richard
Posted by Todd Shafer on 15th December 2017
Sorry Richard. I'm not completely following you. Below is the function. Please make the changes that your describing and I'll give it a shot!

         function reAjax()
         {
   
    RGraph.SVG.clear(chartState.line.svg);
   
    $.ajax({
     type: 'GET',
     dataType : 'json',
     url: "includes/charts/success_rate_cum.php",
     data: ({
      start_date : '2017-07-01',
      type : 'dial',
      staff_id : 1295,
      fc_code : ''
     }),
     success : function(msg) {
 
      //$('#chart-loading, .close-chart, .app-chart, .premium-chart').hide();
      //$('#chart_left, #chart_buttons').fadeIn();
      //$('.sold-chart').hide();
      var ratio = msg.ratio;
      var title_type = msg.type;
      var success_bar = msg.success_bar;
      var label = msg.label;
      var highest_value = msg.highest_value;

     
      var data = [ratio, success_bar];
      var avg = 'Avg:' + success_bar[0];

      tips = [];
      ratio.forEach(makeString);
    
      chartState.line = new RGraph.SVG.Line({
       id: 'cc2',
       data: data,
       options: {
        hmargin: 0,
        gutterLeft: 50,
        gutterRight: 35,
        gutterBottom: 50,
        yaxisUnitsPost: '%',
        linewidth: 3,
        title: 'Success Rate (' + title_type + ')',
        titleSize: 24,
        backgroundGridVlinesCount: 7,
        textSize: 10,
        key: ['Rate', avg],
        gutterTop: 60,
        tooltips: tips,
        xaxisLabelsPosition : 'section',
        xaxisLabels: label,
        yaxisMax: highest_value
       }
      }).trace();
    
      
      },
      error: function(XMLHttpRequest, textStatus, errorThrown, msg) {
       alert('Error: Get chart failed.');
      }
   
  
    });
 


         }
Posted by Richard on 15th December 2017
Hi there,

In this function you have this:

chartState.line = new RGraph.SVG.Line({
   id: 'cc2',
   data: data,
   options: {
         hmargin: 0,
         gutterLeft: 50,
         gutterRight: 35,
         gutterBottom: 50,
         yaxisUnitsPost: '%',
         linewidth: 3,
         title: 'Success Rate (' + title_type + ')',
         titleSize: 24,
         backgroundGridVlinesCount: 7,
         textSize: 10,
         key: ['Rate', avg],
         gutterTop: 60,
         tooltips: tips,
         xaxisLabelsPosition : 'section',
         xaxisLabels: label,
         yaxisMax: highest_value
   }
}).trace();

But creating a whole new object each time you click the button is cause a new bit of SVG to be created each time - and that bit of SVG is causing trouble. So instead of recreating the object you can assign the new/updated data to the existing object and do a redraw.

Like this:

// Assign the new data to the Line chart
chartState.line.originalData = RGraph.arrayClone(data);

// Redraw the Line chart
chartState.line.trace();

Richard
Posted by Todd Shafer on 15th December 2017
YES! That did it!!! Thank you for your awesome customer support!

The only questions I have now are:

How do I change title of the graph when using hartState.line.originalData = RGraph.arrayClone(data);
In my bar charts I'd like the above labels to not show until after the animation. How do I do this?

Thanks again for everything! I really appreciate it.

Todd
Posted by Richard on 15th December 2017
Hi there,


> The only questions I have now are:
>
> How do I change title of the graph when using chartState.line.originalData =
> RGraph.arrayClone(data);

You could set it by doing this:

chartState.line.properties.title = 'My new title';

> In my bar charts I'd like the above labels to not show until after the animation. How do I do
> this?

Something like this:

         function redraw()
         {
             RGraph.SVG.clear(chartState.bar.svg);
             RGraph.SVG.clear(chartState.line.svg);
            
             // Disable the labelsAbove option
             chartState.bar.properties.labelsAbove = false;
            
             chartState.bar.wave();
             chartState.line.trace();
            
             // Enable the labelsAbove option after a second and then redraw
             setTimeout(function ()
             {
                 chartState.bar.properties.labelsAbove = true;
                 RGraph.SVG.redraw();
             }, 1000)
         }

www.rgraph.net/tests/svg.bar/bar-line-combined.html

Richard
Posted by Todd Shafer on 15th December 2017
I'm a self-taught programmer, probably like most people, so I don't always get all the concepts of how things work. This exchange between us helped me to better understand the concept of objects. It also resulted in better code for displaying charts. Very helpful and I really appreciate it. Everything is working as I hoped!

Have a great weekend!

Add a reply




« Back to message list