1

I set up a jsrender based flot chart with jsreport.net and currently fail with the y axis of the charts on multi-pages. As you can see on the second image, the y axis doesn't match the bars correctly.

Update: Here's the playground link:: https://playground.jsreport.net/#playground/WJmSGjkB5/2

First page: First page

Second page:

Second page

Here's the current source code snippet

        var seriesCount = 1; // current data series identifier

        // drawing series hook
        dsHook = function(plot, canvascontext, series){
            for (var i = 0; i < series.data.length; i++){

                // get relative position of plot
                var offset = plot.offset();

                // get data point
                var dP = series.data[i];

               var pos = plot.p2c({x: dP[0], y: dP[1]});

               var barWidth = plot.p2c({x: dP[0] + series.bars.barWidth, y: dP[1]}).left - pos.left;

               var posCorr; 
               // set horizontal position correction

               switch(seriesCount) {
                   case 1: posCorr = -72; break;
                   case 2: posCorr = -23; break;
                   case 3: posCorr = 24; break;
                   case 4: posCorr = -50; break;
                   case 5: posCorr = 2; break;
                } 

                pos.left += offset.left + posCorr; 
                pos.top += offset.top - 30;

                numFormatted = number_format(dP[1], 0, '', '\'');

                var aDiv = $('<div></div>').css({'width':barWidth, 'background-color':'white','color':'black','font-size':'12px','text-align':'center','position':'absolute','left': pos.left,'top':pos.top}).text(numFormatted).appendTo("body");

            }
            seriesCount++;
        }
5
  • Are you sure its not a css issue? your container may not be the right size for any flot generated elements. Jan 27, 2015 at 9:51
  • The css div has following attributes: width: 700px; height: 300px; position: relative; margin: 50px auto;
    – sullivan
    Jan 27, 2015 at 10:03
  • Is it possible for you to create a JSFiddle to see whats going on there? jsfiddle.net Jan 27, 2015 at 10:19
  • jsfiddle didn't work out, but I created a playground directly with jsreport.net: playground.jsreport.net/#playground/WJmSGjkB5/2
    – sullivan
    Jan 27, 2015 at 10:35
  • The y axis matches the bars, only the labels above the bars are at a wrong position. If you change the renderer to html the labels are at the correct position, so the problem seems to be with phantom-pdf.
    – Raidri
    Jan 27, 2015 at 12:02

1 Answer 1

2

It seems that plot.offset().top gets wrongly calculated in dsHook because of a space for header/margin added for every another page.

The first "solution" is to modify your calculation to reflect this:

pos.top += offset.top - 30 + ({{:ID}}-1)*20;

https://playground.jsreport.net/#playground/WJmSGjkB5/5

The Second "solution" is to add fixed sized empty header to the phantom configuration, don't have an explanation for it yet

https://playground.jsreport.net/#playground/WJmSGjkB5/4

I hope I'll update this with better explanation/solution

1
  • Indeed very strange, thanks a lot for your two solutions, which both work (perfectly). Would be very interesting to getting to know why it's the way it is.
    – sullivan
    Jan 27, 2015 at 22:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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