Geek Answers Handbook

Pygal embedding in web2py

pygal, displays svg and returns in the chart dictionary. I am trying to embed it in a web2py page. It works. But I can’t figure out how to reduce the size of the graphs on the page.

view:

{{extend 'layout.html'}} <h1>Hello {{=request.vars.simulation_id}}</h1> <figure> {{=XML(one)}} {{=XML(two)}} </figure>

and default.py function:

 def run_simulation(): simulation = start.Simulation() graphs = simulation.run() return graphs
+6
source share
1 answer

It seems that pygal supports sizing directly in the code: http://pygal.org/web/#iddirectly-in-the-html

Alternatively, you can override the width and height parameters of an SVG element using CSS:

 .svg-container svg { height: 240px; width: 240px; }

NOTE. I use the class selector under the assumption that you may need different sizes for different SVG images. If you want to have the same size for all images, then you should be fine with svg in the CSS selector. It is also worth mentioning that you need to redefine the height and width if you just make one image that will not change.

Here is a complete example using CSS embedded in an HTML file. It shows that you can use absolute scaling (fixed px values) as well as relative scaling.

 <html> <head> <!-- CSS embedded in HTML here. For reusability you could put the CSS in a separate file and link to it here instead --> <style> /* Add svg-small class to an element to scale the child SVG element(s) to fixed width and height */ .svg-small svg { height: 24px; width: 24px; } /* Add svg-halfwidth class to an element to scale the child SVG element(s) to half the page width The height will scale automatically to preserve the aspect ratio. */ .svg-halfwidth svg { width: 50%; height: auto; } </style> </head> <body> <figure class="svg-small"> <caption>A small droid</caption> <svg fill="#000000" height="240" viewBox="0 0 24 24" width="240" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/> </svg> </figure> <figure class="svg-halfwidth"> <caption>A scaled droid</caption> <svg fill="#000000" height="240" viewBox="0 0 24 24" width="240" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/> </svg> </figure> </body> </html>

Depending on how you create these files, it may be easier to make inline CSS as shown above, but in general I would like to separate my CSS into a separate file:

 <html> <head> <link rel="stylesheet" href="styles.css"/> <head> <body> ... as before ... </body> </html>

Then styles.css is the same content as the <style> in the previous example:

 .svg-small svg { height: 24px; width: 24px; } .svg-halfwidth svg { width: 50%; height: auto; }
+5
source

More articles:


All Articles