Hitachi Vantara Pentaho Community Forums
Results 1 to 9 of 9

Thread: Avoiding full redraw during chart update

  1. #1
    Join Date
    Mar 2012
    Posts
    10

    Default Avoiding full redraw during chart update

    Hello,

    I've been trying to refresh a chart "in place", without the regular process of emptying the div, then drawing a completely new version of the chart.

    My current take on it is to redefine the render() and update() methods that are defined in CccComponent, and then setting a timer to refresh every 10 seconds, by putting the following in PostExecution:

    Code:
    function d() {     this.lifecycle = { silent: true };
        this.render = function(values) {
            if (arguments.length > 0) {
                this.chart.setData(values,{
                    crosstabMode: this.crosstabMode,
                    seriesInRows: this.seriesInRows
                });
            }
            this.chart.render();
        };
        this.update = function() {
            var myself = this;
            if (Modernizr != undefined && Modernizr.svg) {
                this.renderChart();
            } else {
                pv.listenForPageLoad(function() {
                    myself.renderChart();
                });
            }
        };
        var myself = this;
        setTimeout(function(){myself.update();},10000);
    }
    The new code is basically just a smaller subset of the original code, and I see in the console log that the refresh happens.. but nothing is actually redrawn; the old chart remains in place.

    If I change the this.chart.render() call above to instead be this.chart.render(true, true, true), in a possibly naive interpretation of render() as defined in pvcBaseChart.js, I get the error message "No data found" - which I feel is a bit odd as I do set the data just before rendering.

    The following appears in the console log when receiving the above error, if I set pvc.debug = 3:

    Code:
              [Lifecycle >Start] Init (Running: 1) scripts.js:4297
              [Lifecycle >Start] render_CHART_TRX_TIMING (P: 5 ): preExecution Timing: 0ms since start, 0ms since last event (Running: 1) scripts.js:4263
    [pvc.LineChart                 ]: NEW CHART
    ==========================================
      DebugLevel: 3 scripts.js:5546
    [pvc.LineChart                 ]: OPTIONS:
     
    Object {dataAccessId: "DS_TRX_TIMING", path: "/foo_tmp.cda", extensionPoints: Object, colors: Array[0], animate: false…}
     scripts.js:5547
    [pvc.LineChart                 ]: Prerendering scripts.js:5551
    [pvc.LineChart                 ]: DATA SOURCE SUMMARY
    ------------------------------------------
    ROWS (10/120)
      [0] ["foo", "07:57", 335]
      [1] ["foo", "07:58", 192]
      [2] ["foo", "07:59", 312]
      [3] ["foo", "08:00", 476]
      [4] ["foo", "08:01", 303]
      [5] ["foo", "08:02", 336]
      [6] ["foo", "08:03", 279]
      [7] ["foo", "08:04", 432]
      [8] ["foo", "08:05", 415]
      [9] ["foo", "08:06", 243]
      ...
    COLS (3)
      [0] 'trans_name' (type: String, inspected: string)
      [1] 'to_char' (type: String, inspected: string)
      [2] 'duration_ms' (type: Integer, inspected: number)
     scripts.js:5613
    [pvc.LineChart                 ]: Relational data source translator scripts.js:5613
    [pvc.LineChart                 ]: VIRTUAL ITEM ARRAY
    ------------------------------------------
    Index | Kind | Type   | Name        | Label > Dimension
    ------+------+--------+-------------+-------+-----------
     0    | S    | string | trans_name  |       | series
     1    | C    | string | to_char     |       | category
     2    | M    | number | duration_ms |       | value
     scripts.js:5615
    [pvc.LineChart                 ]: VISUAL ROLES MAP SUMMARY
    ------------------------------------------
    VisualRole < Dimension(s)
    -----------+--------------
    multiChart | -
    dataPart   | dataPart
    series     | series
    color      | series
    category   | category
    value      | value
     scripts.js:5610
    [pvc.LineChart                 ]: DATA SUMMARY
    ------------------------------------------
      Dimension
    ------------------------------------------
      dataPart ("Data Part", Any, comparable, hidden) (1)
        0
      series ("trans_name", Any) (1)
        foo
      category ("to_char", Any) (120)
        07:57, 07:58, 07:59, 08:00, 08:01, 08:02, 08:03, 08:04, 08:05, 08:06...
      value ("duration_ms", Number, comparable, continuous) (95)
        158, 160, 166, 170, 172, 176, 177, 181, 186, 189... scripts.js:5613
    [pvc.AxisPanel - base          ]: Showing only one in every 4 tick labels scripts.js:6017
    [pvc.AxisPanel - base          ]: Showing only one in every 5 tick labels scripts.js:6017
    [pvc.AxisPanel - base          ]: Showing only one in every 4 tick labels scripts.js:6017
    [pvc.AxisPanel - base          ]: Showing only one in every 5 tick labels scripts.js:6017
              [Lifecycle <End  ] render_CHART_TRX_TIMING (P: 5 ): postExecution Timing: 240ms since start, 240ms since last event (Running: 2) scripts.js:4263
              [Lifecycle <End  ] Init (Running: 0) scripts.js:4306
              [Lifecycle >Start] render_CHART_TRX_TIMING (P: 5 ): preExecution Timing: 10.2s since start, 10.2s since last event (Running: 0) scripts.js:4263
    [pvc.LineChart                 ]: Prerendering scripts.js:5551
    [pvc.LineChart                 ]: DATA SOURCE SUMMARY
    ------------------------------------------
    ROWS (10/120)
      [0] ["foo", "07:57", 335]
      [1] ["foo", "07:58", 192]
      [2] ["foo", "07:59", 312]
      [3] ["foo", "08:00", 476]
      [4] ["foo", "08:01", 303]
      [5] ["foo", "08:02", 336]
      [6] ["foo", "08:03", 279]
      [7] ["foo", "08:04", 432]
      [8] ["foo", "08:05", 415]
      [9] ["foo", "08:06", 243]
      ...
    COLS (3)
      [0] 'trans_name' (type: String, inspected: string)
      [1] 'to_char' (type: String, inspected: string)
      [2] 'duration_ms' (type: Integer, inspected: number)
     scripts.js:5613
    [pvc.LineChart                 ]: Relational data source translator scripts.js:5613
    [pvc.LineChart                 ]: VIRTUAL ITEM ARRAY
    ------------------------------------------
    Index | Kind | Type   | Name        | Label > Dimension
    ------+------+--------+-------------+-------+-----------
     0    | S    | string | trans_name  |       | 
     1    | C    | string | to_char     |       | 
     2    | M    | number | duration_ms |       | 
     scripts.js:5615
    [pvc.LineChart                 ]: VISUAL ROLES MAP SUMMARY
    ------------------------------------------
    VisualRole < Dimension(s)
    -----------+--------------
    multiChart | -
    dataPart   | dataPart
    series     | series
    color      | series
    category   | category
    value      | value
     scripts.js:5610
    [pvc.LineChart                 ]: DATA SUMMARY
    ------------------------------------------
      Dimension
    ------------------------------------------
      dataPart ("Data Part", Any, comparable, hidden) (0)
        
      series ("trans_name", Any) (0)
        
      category ("to_char", Any) (0)
        
      value ("duration_ms", Number, comparable, continuous) (0)
      scripts.js:5613
    [pvc.LineChart                 ]: No data found. scripts.js:5576
              [Lifecycle <End  ] render_CHART_TRX_TIMING (P: 5 ): postExecution Timing: 10.3s since start, 10.3s since last event (Running: 0) scripts.js:4263
    Any ideas on what I'm doing wrong?

  2. #2
    Join Date
    Mar 2012
    Posts
    645

    Default

    Thank you Johan!

    You have found a CCC bug!

    I've fixed it and it is already available in the dev branch (update CDF and CGG by using the CTools installer with the «-b dev» option).

    The way you are calling the render method is the right way to go:
    Code:
    this.chart.render(true, true, true)
    About the overrides to the CccComponent's methods, there's no help I can give you right now. I will record the need and will try to make it easier.

  3. #3
    Join Date
    Mar 2012
    Posts
    10

    Default

    Awesome, glad to help! Even happier that the problem is already solved, will try it out again ASAP

  4. #4
    Join Date
    Mar 2012
    Posts
    10

    Default

    Nice, I'm now getting smooth incremental updates of my charts rather than <old chart> *blank* <new chart>.. I noticed the fix wasn't entirely trivial either, thanks for getting to it so quickly!

  5. #5
    Join Date
    Mar 2012
    Posts
    645

    Default

    We used to use this mode of re-render in response to showing/hiding series, when the user clicks in the legend items.
    Then we switched to using a more resource-conservative version, which does not reload the data, just re-renders the same data with different visibilities (reload argument = false).
    With this move, the "reload" code path wasn't being tested anymore... I'm glad you found the regression :-)

    By the way, we also use the «chart.render(true, true, /*reload*/false)» way to redraw a chart in response to overall size changes:

    Code:
    chart.options.width = newWidth;
    chart.options.height = newHeight;
    chart.render(/*bypassAnimation*/true, /*recreate*/true, /*reload*/false);

  6. #6

    Default

    Hi

    We are using this function to refresh our charts but memory usage gets really high in cycles. Without this function memory usage in Chrome is something like 32MB and with it it goes up to 6-700MB in peaks. Any thoughts/tips on this?

  7. #7

    Default

    After discussing this with duarte on irc I created a ticket for it: http://redmine.webdetails.org/issues/2604

  8. #8
    Join Date
    Apr 2014
    Posts
    5

    Default

    Hi,

    I'm using this javascript function to redraw our diagrams but what I found out small issue.
    In a chart (eg line chart) with time series on base Axis (X) we have some data already displayed (eg: time 09:00). Then data "coming later" with the same timestamp are shown at the end of chart, eg: lets say last timestamp is 22:00 then new data with timestamp on 09:00 are displayed after the data with timestamp 22:00.

    Any idea how to approach this?

    Thanks
    Last edited by lpipiska; 11-27-2014 at 07:30 AM.

  9. #9
    Join Date
    Mar 2012
    Posts
    645

    Default

    That could mean that you're not setting timeSeries: true, and thus, not using a continuous X scale?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Privacy Policy | Legal Notices | Safe Harbor Privacy Policy

Copyright © 2005 - 2019 Hitachi Vantara Corporation. All Rights Reserved.