SVG graph maker

I am working on a program that will generate 'clean' svg (vector graphics) graphs from data sets.
It is still very much in it's infancy - so much so that I would not even yet announce it except for the fact that it came up in another discussion.  I figured I could open this thread to move the svg discussion here.
My current plans are for relatively simple barplots and scatter/line plots.  I'd like them to remain simple as they are created in such a way that they can be easily edited by the user after the fact.
This is in contrast to other tools I have used to create svg image files.  The R statistical package will create svg graphs, and programs like inkscape (or illustrator) can "trace" most image files to produce a vector image.  I see two major drawbacks of these methods.  First they create *enormous* files due to an extensive and unnecessary use of svg 'paths'.  Secondly, the resulting files may look good, but they are very hard to edit because 1) they are huge, and 2) they are quite 'convoluted' - if one looks at the resulting code, it is essentially unreadable.
I don't really see this as a criticism of the existing methods - as they do what they are supposed to.  My goal is to create a tool that does something different: create the skeleton of svg code that is easily human-readable and human-editable.
Prior to starting this tool I would make my svg's "by hand" with just a text editor.  By doing it this way I had complete control over the results, and my graphs would be several orders of magnitude smaller than similar ones generated by R or inkscape.
A bar graph, for example, can be some CSS styling, a couple axes, and some '<rect>'s for bars.  This could be just a dozen lines of svg code.  R, in contrast, would generate thousands of lines of svg '<path>'s for the same  result.
Later today I will get what I have so far up on my drop-box.  But I want to warn, again, that due to the expedited posting of this topic, the program is far from even "beta" ready.   I have tested it to generate some nice simple bar graphs currently with no axis labels, no error bars, nothing: just an x + y axis, and the data bars.
I'll put the dropbox link here, and post updates here.  I'd love to get feedback or feature requests once this gets rolling.
EDIT: here's the source
Last edited by Trilby (2012-01-14 21:33:10)

To follow up - I still suspect when this tool is doing what I want it to, I will still edit my svg's by hand in a text editor.  The primary goal of this tool is to automate many of the repetitive steps of coordinate conversions, and laying out the groups and tags appropriately.

Similar Messages

  • How can I reduce the hight of the Legend in the SVG graph

    I need to reduce the height of the legend box in the SVG graph by 50%. From what I have read I soul be able to this with the CSS, but I can not figure it out. This is the current CSS that is in place.
    text{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;fill:#000000;}
    tspan{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;fill:#000000;}
    text.title{font-weight:bold;font-size:14;fill:#000000;}
    text.moredatafound{font-size:12;}
    rect.legend{fill:#EEEEEE;stroke:#000000;stroke-width:1;}
    text.legend{font-size:10;}
    #background{fill:#FFFFFF;stroke:none;}
    rect.chartholderbackground{fill:#ffffff;stroke:#000000;stroke-width:1;}
    #timestamp{text-anchor:start;font-size:9;}
    text.tic{stroke:none;fill:#000000;font-size:12}
    line.tic{stroke:#000000;stroke-width:1px;fill:none;}
    #dial{stroke:#336699;stroke-width:2px;fill:#336699;fill-opacity:.5;}
    #dial.alert{fill:#FF0000;fill-opacity:.5;}
    #dialbackground{stroke:#000000;stroke-width:none;fill:none;filter:url(#MyFilter);}
    #dialcenter{stroke:none;fill:#111111;filter:url(#MyFilter);}
    #dialbackground-border{stroke:#DDDDDD;stroke-width:2px;fill:none;filter:url(#MyFilter);}#low{stroke-width:3;stroke:#336699;}
    #high{stroke-width:3;stroke:#FF0000;}
    #XAxisTitle{letter-spacing:2;kerning:auto;font-size:14;fill:#000000;text-anchor:middle;}
    #YAxisTitle{letter-spacing:2;kerning:auto;font-size:14;fill:#000000;text-anchor:middle;writing-mode:tb;}
    .XAxisValue{font-size:8;fill:#000000;}
    .YAxisValue{font-size:8;fill:#000000;text-anchor:end;}
    .AxisLabel{font-size:8;fill:#000000;}
    .nodatafound{stroke:#000000;stroke-width:1;font-size:12;}
    .AxisLine{stroke:#000000;stroke-width:2;fill:#FFFFFF;}
    .GridLine{stroke:#000000;stroke-width:0.3;stroke-dasharray:2,4;fill:none;}
    g.dataholder rect{stroke:#000000;stroke-width:0.5;}
    .legenditem rect{stroke:#000000;stroke-width:0.5;}
    Please help.

    Hello,
    Well here's your fix all the code is on the page.
    http://htmldb.oracle.com/pls/otn/f?p=11933:81
    The code all goes into the chart attributes area in the onload and the header section.
    Make sure to pay close attention to the onload
    }catch(er){}try{ChangeLegendHeight();
    I was a little overzealous in catching javascript errors in the built in SVG so it doesn't work in Firefox unless you split the try and catch statements. This will get fixed in next version.
    Also this statement
    if(document){svgDoc = document;} // this fixes Adobe Vs FF difference
    should go into the first line of any custom javascript that you use in the SVG as it fixes a difference in the FF 1.5 implementation and Adobe Plugin again it will be fixed in next version.
    Making these changes should allow you to run almost any javascript in the Builtin SVG charts so it opens up a lot of possibilities for customization and adding interaction.
    Have fun,
    Carl

  • How to...download the SVG Graph in PDF format or Email it

    I have generated a line chart using SVG Graph, I need to download it in PDF format and email it.
    Please help, How do I do that ?

    FYI, Adobe has announced it will no longer support the SVG Viewer as of Jan 1st, 2009 (link), so you should probably switch over to flash charts in APEX (introduced in 3.0).
    BI Publisher supports charts embedded in PDFs. You can also have the PDF automatically emailed via this technique.
    Tyler
    Message was edited by:
    Tyler

  • SVG Graph problem

    I have an SVG graph with 2 series and I have 2 check boxes (let me call them Series1 and Series2 for this example) that control the display of this series. When I check Series1 , only the first series is to be displayed and on checking on series2 , the 2nd is to be displayed, if both are chcecked, both the series are displayed on the same SVG chart.
    This actually works well but the problem is that if series 2 is checked without checking series 1 only a shadow of the series 2 is displayed, I guess the SVG chart attributes determining the X,Y coordinates and labels are not being invoked. However , if series 1 is checked it is displyed correctly, a proper chart with only Series 1, and if both are checked, it displays it correctly too. But if only Series2 is checked I get a shadow of the series against a white background, though the shape of the series output is right. The graph background, the legend, the X,Y corordinates etc are missing.It looks like the chart attributes are determined from the first series and so if that is not invoked, only a shadow if the other series are displyed. Can anyone help with this?
    Thanks

    i see what you mean re the second series depending on the first. i've logged it as a bug, too, thanks. consider working around the issue for now by setting up multiple svg regions on your page that fire conditionally based on the series to be shown. so for your example case you could have three regions - one for series1, one for series2, and one for both. you could then show the appropriate region based on whether series1, series2, or both series are to be displayed.
    hope this helps,
    raj

  • SVG Graphs displaying wrong graph

    I have three SVG graphs which display based on the value of a hidden variable passed by clicking on a "driver" graph bar. All graphs are on the same page. Everything works fine until I have selected all the graph bars from the driver graph and then regardless of the bar I select from the driver, the dependent graphs all display the last graph shown(i.e. it's acting as if the SVG graphs are being displayed from cache). Seems like the children graphs should display correctly because the URL string changes every time a new graph bar is chosen in the driver graph. What am I doing wrong?

    Hi,
    Your requirement is explained by John
    http://obiee101.blogspot.in/2009/04/obiee-showing-zero-in-bargraph.html
    OR try below:
    '0' is not viewable. Try using any case statement for changing the '0' values to some minimum value.
    Hope this helps and resolves.
    Regards
    MuRam

  • Displaying SVG Graph

    I have developed an SVG graph that displays my XML document
    (generated by an .XSQL file) in a graph.
    It works perfectly on most computers that I have tried it on,
    but in two cases the browser, instead of displaying the page,
    asks me if I would like to download or open the file xx.xsql.
    And if I open it it doesn't work.
    I have put my svg code in the XSL with the following output
    methode type:
    <xsl:output method="html"
    standalone="no"
    doctype-public="-//W3C//DTD SVG 20001102//EN"
    doctype-system="http://www.w3.org/TR/2000/CR-SVG-
    20001102/DTD/svg-20001102.dtd"
    media-type="image/svg"/>
    Do anybody knows what the problem could be?

    This is a well know problem of IE 5.x version.
    Explorer do not use mime header to launch the or show the content, instead of use url extension mechanism, then changing your xsql pages to .svg extension will work ok.
    Another solutions is to pass a dummy parameter with the .svg extension, for example http://server:port/your_path/xx.xsql?dummy=xx.svg
    Look at this address for full explanation, http://support.microsoft.com/support/kb/articles/Q177/3/21.ASP
    Best regards, Marcelo.

  • SVG Graph link

    Is there an example how links are used in a sql for SVG Graph? The only documentation I found was in the help under section 7.3.1.
    I've tried the syntax below: It would error out.
    f?p=#APP_ID#:4:#APP_SESSION#::::P3_ID,P3_ID2:#COL03#,#COL02#

    select 'f?p='||:APP_ID||':4:'||:APP_SESSION||'::::P4_SHOW:'||awm_status link, awm_status, count (awm_status) value
    from awm_quality
    group by null, awm_status
    order by awm_status

  • How can I use a graph make with ppt for Window on a ppt for Mac

    Dear Sir,
    A colleague of me is working with a Window PC. He make a powerpoint presentation which contain graphic.
    He sent it to another colleague who work with a Mac and Office 2011 for Mac. He can open the file, bur some sientific caratere are "damaged".
    However, if he open the same file with Office 2008 for mac, it's work.
    Do you have an idea how to make the Office 2011 for make able to read sientific caratere from a powerpoit file which come from the Window powerpoint?
    Is there a plugin for that?
    many thank

    Try "Save as" and save it in Office 2008 format.

  • Graph maker

    i compiled a little graph making app for a school project but i don't know java too much and i think i made some mistake
    the app is supposed to read the data(numerical values) from an ASCII file and use it to build a graph (each coupple of values is the x and the y of a point in the graph) and the data of the file are refreshed constantly by a fortran program that i don't know (my teacher will do it and i don't know notting about it).... that's the code
    import java.io.*;
    import java.awt.*;
    import javax.swing.*;
    int record1 = new int [3000]
    class graficatore {
         public class MyCanvas extends Canvas {
              public void paint {
                   for ( ; i < 300; i++) { // per disegnare pi di 300 cerchi aumentare il valore della condizione
                   graphics.setColor(Color.white);
                   graphics.fillOval(xcentro, ycentro[i], raggio1[raggio_cerchio], raggio2[raggio_cerchio]);
                        /*vedere se questo basta oppure ci vuole anche quello sotto
                   graphics.setColor(Color.blue);
                   graphics.drawOval(xcentro[i], ycentro[i], raggio1[raggio_cerchio], raggio2[raggio_cerchio]); */
         public static void main (String[] args) {
              int i = 0;//variabile di controllo del ciclo while per il disegno dei cerchi
              int j = 0;
              MyCanvas canvas = new MyCanvas();
    JFrame frame = new JFrame();
    frame.setSize(400, 400);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.getContentPane().add(canvas);
    frame.setVisible(true); // questo blocco di codice ? per fare il frame
              //FileReadTest t = new FileReadTest();
    //t.readMyFile(); questo blocco di codice per lanciare il File Reader
              double xcentro = new int[2000];
              double ycentro = new int[2000];// array per i cerchi per disegnare pi di 300 cerchi aumentare il valore della condizione
              int raggio_cerchio = 5;
              for (; j>300; j+5) {
                   xcentro[] = record(j);
                   FileReadTest t = new FileReadTest();
                   t.readMyFile(); //questo blocco di codice per lanciare il File Reader
                   graphic_create g = new graphic_create();
                   g.paint();
         void readMyFile() {
    String record = null;
    int recCount = 0;
    try {
                   FileReader fr FileReader("data file location");
                   BufferedReader br = new BufferedReader(fr);
                   record = new String();
                   while ((record = br.readLine()) != null) {
                        recCount++;
                        System.out.println(recCount + ": " + record);
                   record = record1[]
              catch (IOException e) {
                   // catch possible io errors from readLine()
                   System.out.println("Uh oh, got an IOException error!");
                   e.printStackTrace();
         } // end of readMyFile()
    } // end of classi hope that you could help me and say thank you to all who reply me
    Edited by: filopelor92 on Sep 12, 2010 3:06 AM                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

    filopelor92 wrote:
    wait if i could ask my teacher help i would have done it but unfortunately he doesn't know it so i can't do it he's not computing teacher but a math and phisics one Then what the hell is the program for? What is the course? What were the course requirements (or as many people like to say "prequirements")?
    and of course i'm going to learn java (at the university)So, either this is a course were Java (or some other language) was required and you either lied about that or ignored it. Both of which is your fault, correct it or live with the consequences. Or this is a Java course and you're just interested in someone doing your homework for you which spells danger for your college "aspirations".
    but now i don't have neither the time (i'm in the last year of study in italy of high school and this year we have a really tough exam to prepare and i can't spend time in other things) nor some teacher or someone to ask for helpYou can ask for "help", right here. Unfortunately you're not asking for help, you're asking for a handout that will only hurt you in the future. Two very different things.
    so at the moment i Wont learn java i'll Wait for next year's university courseWell, my second reply in this post spells out what I think of this remark.

  • Refresh/Redraw SVG Graph onChange of DatePicker

    Hi,
    Is it possible to redraw/refresh a graph when I change the time in a datepicker?
    The graph is dependent on the datetime value for where it shows the corresponding graph values. The idea is that the user can change the time and either automatically refreshes graph or on pressing a button the graph will change to start at the new time
    I've tried a general web search and nothing looks promising. I've also tried asynchronous autorefresh but this doesn't appear to obtain the new value of the date picker even if I change it.
    Any ideas on how I could implement this in any way possible?
    Thanks in advance
    Regards,
    Rory

    Hi thols,
    I pressume based on the description you made and the result after I run the code which you have attached, you have an issue with the missing Plot 0 when Plot 1 passes it? Have you tried removing the flat sequence structure?
    Warmest regards,
    Lennard.C
    Learning new things everyday...

  • SVG graphs: microsoft jscript run time error

    I have an application that uses SVG pie charts. A few months ago, we suddenly started to get an error message saying, "Microsoft JScript Runtime Error: Object expected, line: 1, column 26". After you click ok, the pie charts are displayed.
    The only thing that has changed is that the application is now being run from Juniper. Also, if i run the application using Firefox instead of IE 7, we don't get the Microsoft JScript error. ( We are using Adobe SVG viewer for IE 7 given that IE doesn't have native support for SVG graphics).
    Does anybody else have any similar problems or know what can be the cause of the error?

    Hello,
    What is Juniper?
    Regards,
    Carl
    blog : http://carlback.blogspot.com/
    apex examples : http://apex.oracle.com/pls/otn/f?p=11933:5

  • How can I easily make a screen shot of a polar graph?

    Hi everyone,
    I am using the very simple VI I have attached to display points (up to 50000 points) on a polar graph. When the screen moves over to the area where there is the graph, the big number of dots included in the graph makes everything become very very slow. I would like to know if there is an easy way to make a print screen of the graph so that I initialize back the graph to no points (or make it invisible) and just display the print screen shot of the graph.
    I have already used the print screen function (+ cutting off the parts of the picture I don’t want) but this is a bit fastidious to do. Would an already made print screen function exist for this kind of graph?
    Thanks a lot,
    User
    Solved!
    Go to Solution.
    Attachments:
    Forum 29 07 10.vi ‏27 KB
    Forum 29 07 10.doc ‏85 KB

    This example show how to do it in two ways
    Besides which, my opinion is that Express VIs Carthage must be destroyed deleted
    (Sorry no Labview "brag list" so far)
    Attachments:
    Forum 29 07 10_v2.vi ‏31 KB

  • How to make file associations in my java apps

    I am making a Graph maker in Java. Just give x = 1,2,3,4,5 and corresponding y = f(x) and get the discreate graph.
    The graph can then be saved as a file of extention .grf (say) on the hard disk, and can be opened in my graph maker software for editing, viewing e.t.c.
    Now my problem is that I want that when I dubble click on a file xyz.grf my graph maker should open automatically with this file opened in it, like other applications on windows say Notepad - dubble click on xyz.txt it will automatically launch Notepade with this file.
    In other way I want that any .grf file gets associated to my graf maker.
    Please help me and tell me the way, how should I proceed and how can I do this.

    aashishjava wrote:
    Yes Yes Yes It is 99% what I wanted to have. Thanks a lot ....You're welcome.
    But now I want some thing more,(hand to forehead) They always want more. ;)
    (a) There is a splash screen in my app. but JNLP always show its own splash screen, ...Webstart splash screens work differently to those of plain Jar files (which is unfortunate). A webstart splash screen has to be not included in the Jar, but available as a separate resource. The splash is defined in the JNLP launch file. For further details see the [JNLP File Syntax|http://java.sun.com/j2se/1.4.2/docs/guide/jws/developersguide/syntax.html].
    <quote>
    The optional kind="splash" attribute may be used in an icon element to indicate that the image is to be used as a "splash" screen during the launch of an application. If the JNLP file does not contain an icon element with a kind="splash" attribute, but does contain another icon tag, Java Web Start will display a splash screen consisting of the image specified by the icon element on the left and the application's title and vendor on the right.
    The first time an application is launched following the addition or modification of the icon element in the JNLP file, the old splash image will still be displayed. The new splash image will appear on the second and subsequent launches of the application.
    </quote>
    The 'ignored first time' is because the webstart client is more focused on getting the app. downloaded, cached and launched, than showing splashes. Once the app. is on-screen, it will download the splash in the background.
    One other 'gotcha' of splash screens is that the JNLP file must define a href in the JNLP element for the splash to be used. The webstart client assumes that a JNLP with no href is dynamically generated, and will not be the same twice. Because of that it ignores the splash!
    Edit 1:
    Unfortunately, I do not have any direct examples of using splash screens A splash is usually on my 'To Do' list for projects, but it is a very low priority.
    Edited by: AndrewThompson64 on Dec 10, 2009 11:35 AM

  • Script to open SVGs in a folder and save them to one multipage PDF

    Hi.
    I'm using Illustrator for work and I love it, I never needed scripts yet.
    Now I have couple houndred svgs coming in per day,
    I would like to have a script that opens every svg one by one in the selected directory and add them to a pdf
    as pages of the same size and than save it.
    Is this possible? How many files I could put in 1 pdf this way?
    I'm using Illustrator CS5 on Win7 x64.
    Thanks in advance.
    Istvan

    I think there is a 100 file limit on artboards ( not tested ) but the size would also affect that… You can't straight place *.svg but you can make group from them would that do you?
    #target Illustrator
    function filesToArtboards() {
              // My function variables…
              var doc, fileList, i, inFolder, mm, svgFile;
              // Get the user to select a folder
              inFolder = Folder.selectDialog( 'Please choose your Folder of files to place…' );
              // Check they ain't cancelled
              if ( inFolder != null ) {
                        // Gets just the SVG files…
                        fileList = inFolder.getFiles( /\.svg$/i );
                        // Make sure it has AI files in it…
                        if ( fileList.length > 0 ) {
                                  mm = 2.83464567 // Metric MM converter…
                                  // Set the script to work with artboard rulers
                                  app.coordinateSystem =
                                  CoordinateSystem.ARTBOARDCOORDINATESYSTEM;
                                  // Add new multi-page document
                                  doc = app.documents.add(
                                             DocumentColorSpace.RGB,
                                             width = 148.5*mm,
                                             height = 210*mm,
                                             numArtboards = fileList.length, // The number of SVG files
                                             DocumentArtboardLayout.GridByCol,
                                             artboardSpacing = 20*mm,
                                             artboardRowsOrCols = Math.round( Math.sqrt( fileList.length ) )
                                  // Loop thru the counter
                                  for ( i = 0; i < fileList.length; i++ ) {
                                            // Set the active artboard rulers based on this 
                                            doc.artboards.setActiveArtboardIndex( i );
                                            // Create group from SVG
                                            svgFile = doc.groupItems.createFromFile( fileList[i] );
                                            // Move relative to this artboards rulers
                                            // Top Left
                                            sgvFile.position = [ 0, 0 ];
    filesToArtboards();

  • How to put a side-value to a svg

    Hello,
    how can I put a page-item-value to a svg?
    SELECT NULL
           ,v.datum
           ,round(v.q_month,2) wert
    FROM   v_mp v
    WHERE  v.datum >= add_months(SYSDATE,-1)
    AND    v.PC = :P1_PCThe result is 'no data found'
    SELECT NULL
           ,v.datum
           ,round(v.q_month,2) wert
    FROM   v_mp v
    WHERE  v.datum >= add_months(SYSDATE,-1)
    AND    v.PC = 1That shows the right svg-graph...

    Hello,
    how can I put a page-item-value to a svg?
    SELECT NULL
           ,v.datum
           ,round(v.q_month,2) wert
    FROM   v_mp v
    WHERE  v.datum >= add_months(SYSDATE,-1)
    AND    v.PC = :P1_PCThe result is 'no data found'
    SELECT NULL
           ,v.datum
           ,round(v.q_month,2) wert
    FROM   v_mp v
    WHERE  v.datum >= add_months(SYSDATE,-1)
    AND    v.PC = 1That shows the right svg-graph...

Maybe you are looking for