Re: Pie chart

Hello Christian,

The following SVG will draw a simple pie with one slice slightly exploded.
This is taken from one of the samples that are included with the IBM
SVGView program. You may want to grab the other samples as I also have
exmples of bar charts and line graphs in the package (from
http://www.alphaWorks.ibm.com/tech/svgview)

Here's the SVG to draw a pie...
<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg SYSTEM "svg-20000303-stylable.dtd" >
<!-- ========================================================= -->
<!-- charts1.svg                                               -->
<!--                                                           -->
<!-- Simple file to test various SVG path creation features.   -->
<!--                                                           -->
<!-- This file defines a simple pie and bar chart using SVG    -->
<!-- paths.                                                    -->
<!--                                                           -->
<!-- Author : Kelvin R. Lawrence   9th-April-1999              -->
<!--                                                           -->
<!-- History:                                                  -->
<!--  13-Oct-1999 -KRL- Updated to the 19990812 spec           -->
<!--  14-Oct-1999 -KRL- Fix pie chart midpoint problem.        -->
<!--  10-Dec-1999 -KRL- Verified with svg-19991203.dtd         -->
<!--  29-Mar-2000 -KRL- Verified with the 20000303 DTD.        -->
<!--                                                           -->
<!-- ========================================================= -->
<svg width="500" height="500" >
  <g style="text-rendering:optimizeLegibility;shape-rendering:auto">
    <text x="5" y="20" style="font-size:24">SVG Demo: Exploded pie and
bar</text>

    <g style="stroke:black ; stroke-width:2 ; fill-rule:evenodd" >

      <path style="fill:none" d="M 300, 60 v  200 h 200 " />
      <path style="fill:red"  d="M 310,260 v -150 h 40 v 150 z" />
      <path style="fill:lime" d="M 370,260 v -110 h 40 v 110 z" />
      <path style="fill:blue" d="M 430,260 v -80  h 40 v  80 z" />

      <path style="fill:#bb00ff" d="M 100 220 A 80 80 0 1 1 180 140 L
100,140 Z" />
      <path style="fill:#ff00bb" d="M 120 240 A 80 80 0 0 0 200 160 L
120,160 Z" />
    </g>
  </g>
</svg>


Regards
Kelvin Lawrence
IBM


"Schmitt, Christian" <Christian.Schmitt@dresdner-bank.com> on 06/08/2000
03:49:33 AM

To:   "'www-svg@w3.org'" <www-svg@w3.org>
cc:
Subject:  Pie chart




Hi,
I have this challenge here to create an HTML page form XML (sales) data.
That so far is no problem. Whar is a problem that there is a pie chart to
be
included. I've been playing around with SVG using rotate() and paths with
arcs and the like but I haven't found a solution yet to produce a pie
chart.

Does anyone have a hint for me on how to go about doing that?

Thanks in advance,
Christian Schmitt

Received on Thursday, 8 June 2000 16:42:35 UTC