Loading ...
Sorry, an error occurred while loading the content.

SVG graphing using Illustrator 10

Expand Messages
  • Steve Cooper
    Hi All, I am interested in using Illustrator ( v10 ) and its SVG capabilities to help me produce dynamic graphs over the web. I came across a demo on the Adobe
    Message 1 of 6 , Jul 31, 2002
    • 0 Attachment
      Hi All,

      I am interested in using Illustrator ( v10 ) and its SVG capabilities to
      help me produce dynamic graphs over the web. I came across a demo on the
      Adobe website that is exactly what I am trying to do:
      http://www.adobe.com/svg/demos/chart.svgz

      If I view the source of the svg file through Notepad I can see several
      Javascript functions listed. E.g. ShowPie, ShowBar etc. However, when I
      open this file in Illustrator, I can't seem to find these functions stored
      anywhere. The OnClick event of the buttons call the functions ... but
      nowhere can I get to the code in the functions themselves.

      Can anyone tell me what I am doing wrong ? Alteratively, can anyone point
      me in the direction of some tutorials / examples that use Illustrator / SVG
      for graphing ? I found in the Archives that someone ( sorry, forgot who )
      had done something like this last month ... but the link to sample file is
      dead.

      thanks in advance,

      Steve



      _________________________________________________________________
      Send and receive Hotmail on your mobile device: http://mobile.msn.com
    • Michael Bierman
      The demo you are looking at was not done with AI10 (or AI9 for that matter.) It was hand coded. I am not aware of a trivial way to use AI10 to create dymanic
      Message 2 of 6 , Jul 31, 2002
      • 0 Attachment
        The demo you are looking at was not done with AI10 (or AI9 for that matter.)
        It was hand coded. I am not aware of a trivial way to use AI10 to create
        dymanic SVG graphs unless you use AlterCast (
        http://www.adobe.com/products/altercast/main.html ). The basic method would
        be to export with the 'Include Extended Syntax for Variable Data' in the
        Advanced properties. I suppose it is possible to use this data to
        manipulate the graph outside of AlterCast, if you choose to.

        I haven't tried it, but you might also be able to hook up the JavaScript
        from that demo to create other graphs in Illustrator. You will want to make
        the JavaScript external, and then link to it from the "SVG Interactivity
        Palate". Then you could use Illustrator to modify the underlying template
        for the pie, bar, and graph examples. If I get a chance, I'll try to get
        this working and post the results.

        Michael

        > -----Original Message-----
        > From: Steve Cooper [mailto:steve_m_cooper@...]
        > Sent: Wednesday, July 31, 2002 6:44 AM
        > To: svg-developers@yahoogroups.com
        > Subject: [svg-developers] SVG graphing using Illustrator 10
        >
        >
        > Hi All,
        >
        > I am interested in using Illustrator ( v10 ) and its SVG capabilities to
        > help me produce dynamic graphs over the web. I came across a demo on the
        > Adobe website that is exactly what I am trying to do:
        > http://www.adobe.com/svg/demos/chart.svgz
        >
        > If I view the source of the svg file through Notepad I can see several
        > Javascript functions listed. E.g. ShowPie, ShowBar etc. However, when I
        > open this file in Illustrator, I can't seem to find these
        > functions stored
        > anywhere. The OnClick event of the buttons call the functions ... but
        > nowhere can I get to the code in the functions themselves.
        >
        > Can anyone tell me what I am doing wrong ? Alteratively, can
        > anyone point
        > me in the direction of some tutorials / examples that use
        > Illustrator / SVG
        > for graphing ? I found in the Archives that someone ( sorry,
        > forgot who )
        > had done something like this last month ... but the link to
        > sample file is
        > dead.
        >
        > thanks in advance,
        >
        > Steve
      • Steve Cooper
        ... If you think it was hand coded, how can adobe show it as a demo under Illustrator on their website ?! To me that is almost false advertising ! I had
        Message 3 of 6 , Aug 1, 2002
        • 0 Attachment
          Michael Wrote:

          >The demo you are looking at was not done with AI10 (or AI9 for that
          >matter.)
          >It was hand coded.

          If you think it was hand coded, how can adobe show it as a demo under
          Illustrator on their website ?! To me that is almost false advertising ! I
          had assumed I would need AI to be able to easily perform the functionality I
          am after.

          >I am not aware of a trivial way to use AI10 to create
          >dymanic SVG graphs unless you use AlterCast (
          http://www.adobe.com/products/altercast/main.html

          I can't / don't really want to start buying other software if I can help it.
          I am trying to come up with a proof-of-concept idea for my boss... and
          getting him to part with money isn't easy.

          >Then you could use Illustrator to modify the underlying template
          >for the pie, bar, and graph examples. If I get a chance, I'll try to get
          >this working and post the results.

          Don't worry about trying to get something sorted using AI ... from what I
          have read it won't really make my life any easier ( which I has assumed it
          would ).

          <Newbie Question>
          Essentially I have a very simple XML data set that I need to transform into
          a Bar / Pie Chart. I just need pointers as to the best way to do this ?
          Examples where I can see the code would be ideal as I learn fastest trying
          to rip apart something someone else has already done !
          </NQ>

          Thanks again for your help Michael,

          Steve




          _________________________________________________________________
          Chat with friends online, try MSN Messenger: http://messenger.msn.com
        • Chris Lilley
          On Thursday, August 1, 2002, 9:57:24 AM, Steve wrote: ... SC If you think it was hand coded, how can adobe show it as a demo under SC Illustrator on their
          Message 4 of 6 , Aug 1, 2002
          • 0 Attachment
            On Thursday, August 1, 2002, 9:57:24 AM, Steve wrote:

            SC> Michael Wrote:

            >>The demo you are looking at was not done with AI10 (or AI9 for that
            >>matter.)
            >>It was hand coded.

            SC> If you think it was hand coded, how can adobe show it as a demo under
            SC> Illustrator on their website ?! To me that is almost false advertising ! I
            SC> had assumed I would need AI to be able to easily perform the functionality I
            SC> am after.

            >>I am not aware of a trivial way to use AI10 to create
            >>dymanic SVG graphs unless you use AlterCast (
            SC> http://www.adobe.com/products/altercast/main.html

            SC> I can't / don't really want to start buying other software if I can help it.
            SC> I am trying to come up with a proof-of-concept idea for my boss... and
            SC> getting him to part with money isn't easy.

            >>Then you could use Illustrator to modify the underlying template
            >>for the pie, bar, and graph examples. If I get a chance, I'll try to get
            >>this working and post the results.

            SC> Don't worry about trying to get something sorted using AI ... from what I
            SC> have read it won't really make my life any easier ( which I has assumed it
            SC> would ).

            SC> <Newbie Question>
            SC> Essentially I have a very simple XML data set that I need to transform into
            SC> a Bar / Pie Chart. I just need pointers as to the best way to do this ?
            SC> Examples where I can see the code would be ideal as I learn fastest trying
            SC> to rip apart something someone else has already done !
            SC> </NQ>

            Have you looked at GraPL?

            http://www.grapl.com/desktop/

            it exports SVG (and also VML)

            http://www.grapl.com/vmlnotes/introduction/vml_and_svg_compared.htm

            There is also GraPL.NET for automated, server-side graph generation
            http://www.grapl.com/net/index.html


            --
            Chris mailto:chris@...
          • Michael Bierman
            I was the Senior Product Manager for SVG at Adobe, so I m familiar with how each demo was created. I disagree that there was any deception involved here. This
            Message 5 of 6 , Aug 1, 2002
            • 0 Attachment
              I was the Senior Product Manager for SVG at Adobe, so I'm familiar with how
              each demo was created.

              I disagree that there was any deception involved here. This tutorial was
              under the "See SVG in Action" area, not an Illustrator tutorial. Since
              Adobe has several products that produce SVG, there should be no expectation
              that this was created with Illustrator per se; it could have been InDesign.
              :)

              All kidding aside, and to be more precise, the basic design of the graph was
              done in AI9. That includes the background, the style sheet for the pie
              wedges, etc. But at a certain point in the development, we took the AI SVG
              output and hand coded the JavaScript. This was necessary, as one can not do
              100% of the features in Illustrator. For example, Illustrator will not write
              the JavaScript for you. As I said, I believe that this could have done
              better, by including the JavaScript in a separate file and using
              Illustrator's "SVG Interactivity Palate" (which perhaps should have been
              called, the "JavaScript Interactivity Palate" since that's what it does...)

              Having said that, Illustrator is a useful tool for creating SVG. Is there
              more functionality it could have viz a viz SVG? Of course! Though Adobe
              doesn't have anyone dedicated to looking after SVG features in their
              products, I hope they will continue along the path they are on now and
              future versions will do more of what you want.

              By the way, as I also mentioned earlier, if you use Illustrator with Adobe
              AlterCast, you would get an automated work flow for what you want today, out
              of the box.


              Michael

              > -----Original Message-----
              > From: Steve Cooper [mailto:steve_m_cooper@...]
              > Sent: Thursday, August 01, 2002 12:57 AM
              > To: svg-developers@yahoogroups.com
              > Subject: [svg-developers] RE: SVG graphing using Illustrator 10
              >
              >
              > Michael Wrote:
              >
              > >The demo you are looking at was not done with AI10 (or AI9 for that
              > >matter.)
              > >It was hand coded.
              >
              > If you think it was hand coded, how can adobe show it as a demo under
              > Illustrator on their website ?! To me that is almost false
              > advertising ! I
              > had assumed I would need AI to be able to easily perform the
              > functionality I
              > am after.
              >
              > >I am not aware of a trivial way to use AI10 to create
              > >dymanic SVG graphs unless you use AlterCast (
              > http://www.adobe.com/products/altercast/main.html
              >
              > I can't / don't really want to start buying other software if I
              > can help it.
              > I am trying to come up with a proof-of-concept idea for my boss... and
              > getting him to part with money isn't easy.
              >
              > >Then you could use Illustrator to modify the underlying template
              > >for the pie, bar, and graph examples. If I get a chance, I'll try to get
              > >this working and post the results.
              >
              > Don't worry about trying to get something sorted using AI ... from what I
              > have read it won't really make my life any easier ( which I has
              > assumed it
              > would ).
              >
              > <Newbie Question>
              > Essentially I have a very simple XML data set that I need to
              > transform into
              > a Bar / Pie Chart. I just need pointers as to the best way to do this ?
              > Examples where I can see the code would be ideal as I learn
              > fastest trying
              > to rip apart something someone else has already done !
              > </NQ>
              >
              > Thanks again for your help Michael,
              >
              > Steve
            • Jim Ley
              Chris Lilley ... Not really relevant, but that page does misrepresent VML somewhat claiming it can t rotate text, and can t position text,
              Message 6 of 6 , Aug 1, 2002
              • 0 Attachment
                "Chris Lilley" <chris@...>
                > http://www.grapl.com/desktop/
                >
                > it exports SVG (and also VML)
                >
                > http://www.grapl.com/vmlnotes/introduction/vml_and_svg_compared.htm

                Not really relevant, but that page does misrepresent VML somewhat
                claiming it can't rotate text, and can't position text, which it can:

                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
                <html lang="en">
                <head>
                <STYLE>v\:* { behavior: url(#default#VML); }</STYLE>
                <XML:NAMESPACE NS="urn:schemas-microsoft-com:vml" PREFIX="v"/>
                <title>Blank Page</title>
                </head>
                <body>

                <v:shape id="text01" style="rotation:20;"
                coordorigin="-100 100" coordsize="200 200"
                path="m 0,200 l 100,200 x e"
                style='position:relative;top:.1in;left:1in;width:3in;height:1.5in'
                strokecolor="red" strokeweight=".5pt">
                <v:path textpathok="True" />
                <v:fill on="True" color="red" type="solid"/>
                <v:textpath on="True" id="mytp" style="font:normal normal normal 36pt
                Arial;"
                xscale="True" string="Hello VML"/>
                </v:shape>
                </body>
                </html>

                Not that, that is a good reason to use VML of course!

                Jim.
              Your message has been successfully submitted and would be delivered to recipients shortly.