mirror of https://github.com/Kozea/pygal.git
Python to generate nice looking SVG graph
http://pygal.org/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.0 KiB
79 lines
2.0 KiB
10 years ago
|
===============
|
||
|
|
Documentation
|
||
|
|
===============
|
||
|
|
|
||
|
|
|
||
|
|
Embedding in a web page
|
||
|
|
=======================
|
||
|
|
|
||
|
|
.. contents::
|
||
|
|
|
||
|
|
|
||
|
|
Within an embed tag
|
||
|
|
-------------------
|
||
|
|
|
||
|
|
First setup an url entry point for you svg: `/mysvg.svg` don't forget to set the mime-type to `image/svg+xml`. (If you are using flask you can use the `render_response` method.)
|
||
|
|
|
||
|
|
Then in your html put an embed tag like this:
|
||
|
|
|
||
|
|
.. code-block:: html
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<!-- ... -->
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<figure>
|
||
|
|
<embed type="image/svg+xml" src="/mysvg.svg" />
|
||
|
|
</figure>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
You can also use an iframe tag, but automatic sizing with `width: 100%` will not work.
|
||
|
|
|
||
|
|
|
||
|
|
Directly in the html
|
||
|
|
--------------------
|
||
|
|
|
||
|
|
You can insert it directly in a html page with the use of `disable_xml_declaration`.
|
||
|
|
You have to put the javascript manually in you webpage, for instance:
|
||
|
|
|
||
|
|
|
||
|
|
.. code-block:: html
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<script type="text/javascript" src="http://kozea.github.com/pygal.js/javascripts/svg.jquery.js"></script>
|
||
|
|
<script type="text/javascript" src="http://kozea.github.com/pygal.js/javascripts/pygal-tooltips.js"></script>
|
||
|
|
<!-- ... -->
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<figure>
|
||
|
|
<!-- Pygal render() result: -->
|
||
|
|
<svg
|
||
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
id="chart-e6700c90-7a2b-4602-961c-83ccf5e59204"
|
||
|
|
class="pygal-chart"
|
||
|
|
viewBox="0 0 800 600">
|
||
|
|
<!--Generated with pygal 1.0.0 ©Kozea 2011-2013 on 2013-06-25-->
|
||
|
|
<!--http://pygal.org-->
|
||
|
|
<!--http://github.com/Kozea/pygal-->
|
||
|
|
<defs>
|
||
|
|
<!-- ... -->
|
||
|
|
</defs>
|
||
|
|
<title>Pygal</title>
|
||
|
|
<g class="graph bar-graph vertical">
|
||
|
|
<!-- ... -->
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<!-- End of Pygal render() result: -->
|
||
|
|
</figure>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
You can use `explicit_size` to set the svg size from the `width`, `height` properties.
|
||
|
|
|