1. 

   gjsmith66, Member

   Would be nice to have a chart style that would allow the chart to re-size based on browser window dimensions.
2. 

   myDBR Team, Key Master

   We'll put SVG support in for the next relase. This way you can scale a chart as you wish.

   --
   myDBR Team
3. 

   pgatram, Member

   The svg charts are not resizing. The generated <object> tag (for the svg) has height and width hardcoded that prevent it from scaling automatically.
4. 

   myDBR Team, Key Master

   Each report element has a size, therefore the object tag sizes. What is your use case for resizable chart so that we might come up with a suitable solution?

   You can always change the fixed width to 100% by using dbr.purehtml.

   select 'dbr.purehtml', '<script language="javascript">$("#chart0").width("100%");$("#chart0").height("100%");</script>';

   --
   myDBR Team
5. 

   pgatram, Member

   ah, v nice. Thank you :)
6. 

   Philip, Member

   How do you implement the dbr.purehtml solution above? I tried pasting the line into my code and nothing changed. I'm not familiar with javascript.

   If there are any other solutions to re-sizing the chart in your browser window, please advise. Thanks.
7. 

   myDBR Team, Key Master

   If you just want scale a chart to fill your browser window, first run the updater to make sure you using the latest build. Then take a look at a demo of a Full screen scaled SVG chart.

   What the report does that it adds a CSS-class to the resultset (the SVG chart) and then using JavaScript sets the width and the height of the chart to fill the browser windows. As the chart is a SVG chart, you will get a full quality chart in every size.

   --
   myDBR Team
8. 

   Philip, Member

   The demo does not have the usual 'Show how this report is done' button, it's just an example graph. How do I make an SVG chart? Is there anything in the manual?
9. 

   myDBR Team, Key Master

   The Show how this report is done'-button code button is added to the demo report.

   You can define the individual chart format using 'format' chart option (see documentation) or you can set the default chart format by adding line:

   $mydbr_defaults['chart']['default_image_format'] = 'svg';

   into the mydbr/user/defaults.php (use Server side files in admin tool).

   --
   myDBR Team
10. 

    Philip, Member

    That works great, thanks very much.

    For anyone else trying this, the three key lines in the source code for that demo would appear to be:

    select 'dbr.resultclass', 'mychart';
    select 'dbr.chart.options', 'format', 'svg';
    select 'dbr.javascript', '$(".mychart").width("90%").height("90%");', 'onload';

    The value 'mychart' in lines 1 and 3 can be anything but they must match each other. In the demo source, the 3rd line comes after the main query, but that does not seem to be necessary. I put all three at the top.

    Copy the three lines into your script and change the % values as required.
11. 

    Philip, Member

    Hi, this has recently stopped working. I did not touch any of the script that uses this resize feature, and the chart no longer resizes. Then I tried adjusting the width/height parameters again and nothing happens.

    I recently updated to myDBR 3.9.1. Would this have anything to do with it?

    Thanks.
12. 

    myDBR Team, Key Master

    There was a bug where the dbr.resultclass did not apply to SVG charts. It is fixed now in 3.9.2.

    --
    myDBR Team
13. 

    Philip, Member

    Thanks... when will 3.9.2 be out?
14. 

    myDBR Team, Key Master

    It is out. We just do not want to bug people with every minor update as the changes in the minor version will not affect most of the users. To make sure you always have the latest release, you can run the updater.

    --
    myDBR Team
15. 

    Philip, Member

    Thanks... does that mean if I run an update now, it will be 3.9.2?
16. 

    myDBR Team, Key Master

    Yes, your version will be updated to 3.9.2.

    --
    myDBR Team
17. 

    Philip, Member

    I've updated and it works now. Thanks.
18. 

    jjr, Member

    Hi,
    This doesn't seem to work with clickable/tooltip charts (i.e. the scaling does not seem to scale the clickable map overlay properly). Is there a way to scale clickable charts too?
    I am adding these three lines as suggested above:
    select 'dbr.resultclass', 'mychart';
    select 'dbr.chart.options', 'format', 'svg';
    select 'dbr.javascript', '$(".mychart").width("98%").height("30%");', 'onload';
    Thanks,
    Justin.
19. 

    myDBR Team, Key Master

    HTML image consists of an image and an imagemap. If you scale the image you should also scale it's imagemap as the imagemap coordinates are not scaled when you scale the image itself. Usually it is just easier to create smaller image.

    --
    myDBR Team
20. 

    jjr, Member

    Understood, but I'm actually trying to scale up the image.
    I'm happy to scale up the imagemap too - but can't find how to do this in the documentation. Please can you point me in the right direction or give and example. Thanks.
21. 

    myDBR Team, Key Master

    Why not just adjust the image size?

    --
    myDBR Team
22. 

    jjr, Member

    Unless I'm mistaken, if I specify an image size by pixels then this is fixed. The purpose of this thread is to establish a way to scale the image according to screen size. From what I gather this can only be done using the technique in this thread - which in turn does not scale the imagemap so the technique isn't suitable for clickable charts - hence my question....
    Or have I missed something?
23. 

    jjr, Member

    (if you can tell me how to scale the image according to screensize so that the imagemap is also scaled then that would be great! Otherwise it would be be good to know how to scale the imagemap in line with the javascript solution above, as you suggested earlier)
24. 

    myDBR Team, Key Master

    There are jQuery plugins you can try. One is Matt Stow's jQuery RWD Image Maps.

    See demo.

    --
    myDBR Team
25. 

    jjr, Member

    Ok, thanks. This works (albeit not quite perfectly, but good enough for now).

    For any others reading this, what I found most successful was:

    - I installed the jquery RWD Image Maps plugin (put it in a subdirectory) and then adjusted it's code to scale by 25% of what it was (I divided the percent by 400, not 100). This gave me better results visually.

    - I then used these lines in the MyDBR report (adjusted as necessary):

    select 'dbr.chart', <chart_type>, <title>, 4 * <natural width of chart>, 4 * <natural height of chart>;
    select 'dbr.chart.options', 'chart.scale', 100;
    select 'dbr.chart.options','axis_font_size', <adjust as necessary to get best results>;
    select 'dbr.chart.options','label_font_size', <adjust as necessary to get best results>;
    select 'dbr.chart.options','legend_font_size', <adjust as necessary to get best results>;
    select 'dbr.html', '<script src="extensions/RWDImageMaps/jquery.rwdImageMaps.min.js"></script>';
    select 'dbr.javascript', '$("document").ready(function() {$(\'img[usemap]\').rwdImageMaps();});';

    NB: I used Chrome's webpage inspect (right click on page) to find the natural width/height of the image.
26. 

    myDBR Team, Key Master

    If you use SVG charts and make the chart responsive, the fonts resize automatically (see demo above). If you want to adjust all the font sizes, the easier method is to use:

    select 'dbr.chart.options', 'font', 12;

    Another note about the location of your own files. Place the files under /user-dirctory as this is a directory which is quaranteed not to be overwritten by updater.

    --
    myDBR Team

Reply

You must log in to post.