How to make Forena render my SVG Graph properly?
The issue you described in your custom graph, is pretty sure similar to what is also happening when viewing the delivered graphs. So make sure that the delivered graphs work before moving on to custom graphs, such as the SVG Graph Demo, which is one of the delivered SQLite sample reports and graphs. Visit relative path /reports/sample.svg_demo in your own site. If you don't get the very same graphs in your own site, then use this checklist to get that issue resolved:


After you installed/enabled Forena, complete the required setup to Enable SVGGraph library (reports/help.setup#svggraph in your own site is where you can find the same). Pay special attention to this part documented around there:


  If you don't see a nicely formatted graph, but only some square with a gray background (about the size of the SVG graph you should see if it would have worked), or you're getting some error messages, you may want to checkout the issue queue on Drupal.org (search for html filter) ...


Obviously, if you change "gray" to "white", your first screenprint is pretty similar to "... some square with a gray background ..." (more details on that "html filter" in the next bullet).
Quite often the reason why Forena doesn't seem to render SVG Graphs correctly, is because the input format used by Forena is simply stripping out the SVG tags. To remedy this, this is what's needed:


  go to admin/config/content/forena in your site and ensure that the Text Format specified does NOT strip out SVG tags.



Additional info: have a look at "Prepare a text format to be used by forena" within the Installation and Configuration section of the Setup guide. At the very end of it there is this note:


  Especially if you're planning to use SVG graphs it is important to avoid that tags are being stripped out, as this could cause such graphs to not be shown at all or with errors.