CODEWITHSUNDEEP
javascriptgraphicssvg
EML
EML

Reputation: 10281

SVG editors, or: SVG vs. JavaScript?

I'd like to create SVG charts from a database app. However, I know nothing about creating SVG, so I'd like to start with an editor, if I can find one. This should ideally let me -

1 - place a zoom control in the image

2 - place a pan control in the image

3 - do various things on mouseovers - pop up a data box, highlight chart points

4 - create scatter and time-line charts from my own dataset, with legends, axes, and so on.

The idea is that, once I get a basic template from the editor, I can write C code to directly generate the SVG code.

I've spent hours looking, and I can't find any commercial or free apps that can do anything like this. "SVG editors" primarily draw circles and rectangles, which isn't much use to me. Have I missed something? It seems that SVG editor development stopped several years ago, and various editors have been discontinued. I can't even find example SVG code that does anything similar to this.

In fact, the more I read the more it seems that I need to do this in JavaScript, rather than directly creating images (but I don't know JavaScript either). Any thoughts on which way I should go? I've looked at maybe 20 javascript libs that will do charting, but none of them seem to tick all of 1 to 3 above. I also need to overlay polylines on scatter plots, and few of them will do that. Google charts is close, but it won't do the last one.

Oh, I've got a captive audience, and they'll upgrade their browsers if I ask nicely.

Thanks -

Al

Upvotes: 2

Views: 640

Answers (3)

Peter Collingridge
Peter Collingridge

Reputation: 10979

If you're going to write C to generate the SVG code, then you can make it write EMCAScript within the SVG itself for panning, zooming and various mouseover effects. I've written a description of how to add a pan and zoom control at: http://www.petercollingridge.co.uk/interactive-svg-components/pan-and-zoom-control

Upvotes: 0

Keith
Keith

Reputation: 43024

The Inkscape program is an SVG editor. It also allows you to attach javascript to elements of it. It doesn't actually show you the effects, however. But if you then load it into a modern browser you can see the interactive effects. You do have have to know Javascript, but it mainly involves adding handlers and adjusting the CSS properties or changing attributes.

Upvotes: 1

user170934
user170934

Reputation:

I think Google charts will do the last ones:

Annotated Time Line: http://code.google.com/apis/ajax/playground/?type=visualization#annotated_time_line

Scatter: http://code.google.com/apis/ajax/playground/?type=visualization#scatter_chart

Upvotes: 0

Related Questions