CSS Formatting Help

(12 posts) (3 voices)
  • Started 3 years ago by ajdjackson
  • Latest reply from myDBR Team

Tags:

  1. ajdjackson, Member

    Hi

    I've been scratching my head as how to do this :)

    I wish to create a series of rounded rectangles and put data from queries in them I then wish to link reports of this data.

    This is where I've gotten to:

    select 'dbr.hideheader'; select 'dbr.title','Bank Balance'; select 'dbr.purehtml','<div class="rcorners1">'; select concat('Bank Balance\r\n£',sum(a.Tran_CB)/1000 ,'M') from hilmark.tblbank_trans a join (select Acc_ID, max(Tran_Date) as maxdate from hilmark.tblbank_trans group by Acc_ID) dp on a.Acc_ID = dp.Acc_ID where a.Tran_Date = dp.maxdate; select 'dbr.purehtml','</div>';

    I've also added the following to the userstyle.css file:
    .rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 100px; height: 100px; font-size:50px; font-weight:bold; display: table-cell; text-align: center; vertical-align: middle; line-height: 25px;

    }

    The result I'm getting is the rectangle OK and the data in the horizontally centred but not vertically and the data is in a white rectangle.

    Hope you follow that.

    Am I doing this totally wrong?

    Jake

    Posted 3 years ago #
  2. myDBR Team, Key Master

    Jake,
    you can use dbr.divify which is meant to be used in this kind of situations. Your CSS should be ok:

    Boxes-demo

    --
    myDBR Team

    Posted 3 years ago #
  3. ajdjackson, Member

    Hi

    Thanks that worked great.

    However I've another wee problem :)

    The report that is linked contains sparklines. The report works when run standalone but when linked the sparklines do not appear just their data.

    Any thoughts?

    Jake

    select 'dbr.javascript', "$('.largeline .spark').sparkline('html', { type: 'line', height: '2.0em', width: '12em' });", 'onload';

    select 'dbr.title', 'Bank Accounts Balances'; select 'dbr.hidecolumns', 1; select 'dbr.colstyle','Name','[text-align:right]'; select 'dbr.rowclass', '[style]'; select 'dbr.colclass', '[Sparkline]', 'spark'; select 'dbr.resultclass', 'mytable'; select 'dbr.css', '.mytable td {vertical-align: middle;}'; select 'dbr.css', '.mytable tr:nth-child(6) {background-color: #E0F7FF; border-top-style: double;border-bottom-style: double;border-width: 3px; border-color: black;color:black;font-weight:bold;line-height: 20px;}';

    SELECT b.Acc_Name as 'Account Name[Name]', a.Tran_CB as 'Closing Balance[CBal]', a.Tran_Date as 'as of Date[TDate]', group_concat(s.Bal order by s.TDate asc SEPARATOR ',') as 'Trend[Sparkline]', 'largeline' as '[style]' FROM hilmark.tblbank_trans a INNER JOIN hilmark.tblbank_accs b ON b.Acc_ID = a.Acc_ID left join hilmark.tblbank_trans c on (a.acc_id = c.acc_id and a.tran_date < c.tran_date) left join (select Tran_Date as TDate, Acc_ID as Acc,Tran_CB as Bal from hilmark.tblbank_trans where Tran_Date > (now()- interval 30 day) order by 1 asc ) s on a.acc_ID=s.Acc where c.tran_date is null and a.Tran_Date > '2014-08-31'

    group by 1

    union

    select 'Group' as 'Account Name[Name]', sum(a.Tran_CB)as 'Closing Balance[CBal]', a.Tran_Date as 'as of Date[TDate]', (SELECT group_concat(s.Bal order by s.TDate asc SEPARATOR ',') FROM (select Tran_Date as TDate,sum(Tran_CB) as Bal from hilmark.tblbank_trans where Tran_Date > (now()- interval 30 day) group by 1 order by 1 asc ) s) as 'Trend[Sparkline]', 'largeline' as '[style]' from hilmark.tblbank_trans a where a.Tran_Date = (select max(b.Tran_Date) from hilmark.tblbank_trans b where a.Acc_ID = b.Acc_ID);

    Posted 3 years ago #
  4. myDBR Team, Key Master

    You are showing the result in a popup window?

    There is a timing issue when a sparkline is called before the element is visible. You can set the element visible before calling the sparkline (#popup is the ID of the popup used):

    select 'dbr.javascript', "
    $('#popup').closest('table').show();
    $('.largeline .spark').sparkline('html', { type: 'line', height: '2.0em', width: '12em' });
    ", 'onload';

    --
    myDBR Team

    Posted 3 years ago #
  5. ajdjackson, Member

    Perfect - Thanks.

    Jake

    Posted 3 years ago #
  6. cris, Member

    Is there a way to force sparklines to display when they are run with a cursor inside of a loop? They display fine when a cursor is not used, but with the cursor the sparkline is incorrect and when hovering over the sparkline it displays:

    top;"width="4"height="24">
    24px;vertical-align
    4px;height
    inline-block;width

    I'm hoping there is a solution similar to the solution above?

    Thanks,
    Cris

    Posted 2 years ago #
  7. myDBR Team, Key Master

    Cris,
    there is no correlation with using a cursor and a sparkline chart. Sounds like an error in the report code. You can open a support ticket and show the report code and the SQL export of the report so we can replicate the issue.

    --
    myDBR Team

    Posted 2 years ago #
  8. cris, Member

    Thank you. After exporting the report to SQL, I figured it out. I had the sparkline javascript inside the loop. When I moved it outside the loop, everything worked as expected.

    Posted 2 years ago #
  9. ajdjackson, Member

    Good morning

    Resurrecting this old thread as I have a similar issue when exporting the report to a pdf.

    Instead of the sparklines I just get the data.

    Is there a workaround?

    Thanks

    Jake

    Posted 4 months ago #
  10. myDBR Team, Key Master

    Jake,
    there seems to be a conflict between the sparkline libray, latest jQuery and the wkhtmltopdf's JavaScript engine. We can take a look if we see what is causing this.

    --
    myDBR Team

    Posted 4 months ago #
  11. ajdjackson, Member

    Many thanks.

    Jake

    Posted 4 months ago #
  12. myDBR Team, Key Master

    The conflict between jQuery and wkhtmltopd causing the sparklines not appear in PDF has now been resolved. Run the automatic updater to get the latest build.

    --
    myDBR Team

    Posted 4 months ago #

Reply

You must log in to post.