Hitachi Vantara Pentaho Community Forums
Results 1 to 10 of 10

Thread: Drawing striplines on CCC Line Chart Components

  1. #1
    Join Date
    Apr 2014
    Posts
    9

    Default Drawing striplines on CCC Line Chart Components

    Hi,

    I have a line chart and I'm trying to add a vertical dotted line (a stripline) similar to the red line in this chart:

    Name:  stripline.jpg
Views: 795
Size:  15.9 KB

    Can anyone tell me how to do this?

    Thanks!

  2. #2
    Join Date
    Mar 2012
    Posts
    645

    Default

    Use the techniques in http://jsfiddle.net/duarteleao/prsvZ/ to draw the vertical or the horizontal line.
    You can also take a look at http://jsfiddle.net/duarteleao/2R6p6/ and http://jsfiddle.net/duarteleao/B5EnR/.

  3. #3
    Join Date
    Apr 2014
    Posts
    9

    Default

    Hi Duarte,

    I tried this methodology but I'm getting stuck in moving it from jsfiddle into CDE. Can you give some insights on where I'm going wrong?

    I took this as a template: http://jsfiddle.net/duarteleao/prsvZ/ and forked my own more minimal version here: http://jsfiddle.net/sanp/6yP2E/ This does what I want in jsfiddle: draws a simple vertical line on the chart at a specified location. However, moving this into CDE is not working. I looked at your comment here for guidance on adding extension points in CDE: http://forums.pentaho.com/showthread...401#post352401 Based on this, I put the following code in the pre-execution of my line chart component:

    Code:
    function() {
    
        // Where to draw the vertical line
        var x_value = 50;
    
    
        // Contains options that were specified in 
        // the CDE properties tool window, already translated.
        var cccOptions = this.chartDefinition;
        
       // Beware that extension points require special treatment
       // (these are not yet translated to CCC options format)
       var eps = Dashboards.propertiesArrayToObject(cccOptions.extensionPoints);
    
    
       eps.plot_add = function() {
    
    
           var panel = new pv.Panel()
               // Quadrant rules above grid, but below dots.
               .zOrder(-1)
               .def('l0', function() {
                   var ccc = this.getContext();
                   var scale = ccc.chart.axes.base.scale;
                   var li = ccc.panel._layoutInfo;
                   return li.paddings.left + scale(x_value);
               });
           
           // Vertical rule
           panel
           .add(pv.Rule)
           .lineWidth(1)
           .top(0)
           .left  (function() { return this.parent.l0();     })
           .height(function() { return this.parent.height(); })
           .width(null);
           
           return panel;
       
       };
    
    
       // Convert them to original CDE format:
       cccOptions.extensionPoints = Dashboards.objectToPropertiesArray(eps);
    
    
    }
    However, this doesn't seem to work. Any idea where this is going wrong?

    Thanks!

  4. #4
    Join Date
    Mar 2012
    Posts
    645

    Default

    Hi,

    everything looks fine, and on pair with your fiddle.

    The only reason I can think of right now is the value 50 not existing in your data set, causing the rule to be placed off-canvas.
    Check that the code in pre-execution is actually running.
    Place a breakpoint in the plot_add extension point, for example.
    Also, check the web console log for any errors. Also add debug=true&debugLevel=5 to the url, just in case.

    Good luck.

  5. #5
    Join Date
    May 2014
    Posts
    15

    Default

    Just my 5 cents, because It happened to me too:

    I had similiar problems drawing a vertical line!
    Followed the Duarte examples but in the end I had some strange behavior on the chart and the line was not drawed!
    In the end, I moved away from it, and tryed another aproach (I had a different color to the label that I wanted to put the marker line)!
    Much probably it was my data fault or chart definition, but it was taking me a long time...

  6. #6
    Join Date
    Apr 2014
    Posts
    9

    Default

    Hi Duarte,

    Thanks for you response. The value 50 does exist in my data so it's not a problem there. I wonder if the issue has to do with some difference between Pentaho version 4.8 and 5.0? Originally, I have been trying this in 4.8 and getting an error. However, I tried replicating this in 5.0 and it actually works fine. I'm going to do some more investigating to see if I can track down the reason.

  7. #7
    Join Date
    Apr 2014
    Posts
    9

    Default

    Just a quick follow up: I'm assuming that the problem is that there is some graphics library which was updated from 4.8 to 5 which causes this to work in one but not the other. I'm actually just going to switch my dashboard over to 5 so it looks like my problem is solved. Thanks for all the help!

  8. #8
    Join Date
    May 2015
    Posts
    11

    Default

    Quote Originally Posted by steves View Post
    Hi Duarte,

    I took this as a template: http://jsfiddle.net/duarteleao/prsvZ/ and forked my own more minimal version here: http://jsfiddle.net/sanp/6yP2E/ This does what I want in jsfiddle: draws a simple vertical line on the chart at a specified location. However, moving this into CDE is not working. I looked at your comment here for guidance on adding extension points in CDE: http://forums.pentaho.com/showthread...401#post352401 Based on this, I put the following code in the pre-execution of my line chart component:
    Just FYI: this is the OP -- I had to make a new account so I can't just go in and edit this post. The above jsfiddle link is broken now, but below is a new one that should work. Including it for posterity in case anyone else is having the same issue.

    http://jsfiddle.net/sanp/7v604rq7/4/

  9. #9
    Join Date
    May 2015
    Posts
    11

    Default

    Hi All,

    I'm not sure if this should be posted as its own thread or if it is okay to add it to this one, so apologies if it should really be independent.

    I'm able to successfully draw a vertical line in my pentaho graph using the method that Duarte outlined above. My problem is that I'm trying to extend this to be able to draw several lines on the same graph. I'm able to draw many lines if I know ahead of time how many lines I want to draw and code each separately. See http://jsfiddle.net/sanp/7v604rq7/16/ for an example of that. However, what I'd really like to do is draw an arbitrary number of lines -- given an array of x_values, loop over this array and draw a vertical line for each x_value. I've gotten almost all the way there, but I'm not quite there yet.
    I've detailed what I've done so far in this stackoverflow question: http://stackoverflow.com/questions/3...protovis-chart -- essentially I'm able to loop over an array of x_values, but for some reason only the final x_value is actually drawn on my graph. Here is another jsfiddle showing my latest progress: http://jsfiddle.net/sanp/7v604rq7/19/

    If anyone is able to help me figure out what I'm doing wrong, I'd greatly appreciate it!

    Thanks!
    Last edited by stevesp; 06-07-2015 at 02:52 PM.

  10. #10
    Join Date
    May 2015
    Posts
    11

    Default

    Hi All,

    For posterity: This issue is solved -- an answer has been posted on the stackoverflow question. Thanks!

    Steve

Tags for this Thread

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.