Creating a SVG element with a Javascript function

Question

I need to learn how to create a SVG element with a javascript function

The style of my html file essentially:

     <body>
     <svg></svg>
     <script></script>
     </body>

My script contains a function that creates a chart, if the function was hypothetically called create(chartName, chartAxises) how would I create a chart inside my svg element?

Thank you in advance, and I apologize for my unorganized thoughts. I just need to know the syntax, I have tried multiple things for hours so now I'm hoping for a different perspective

score 0 · Accepted Answer · answered Sep 19 '16 at 04:39

0

Rather than reinvent the wheel, what you could do is, use some svg libraries to populate your graph based on the data and attributes. https://d3js.org/

answered Sep 19 '16 at 04:39

Tharsan Sivakumar

6,351
3
19
28

1

Totally agree, d3 is a powerful tool for your said requirements. – S.Dan Sep 19 '16 at 04:40
What's the error are you getting ? – Tharsan Sivakumar Sep 19 '16 at 06:18
It doesn't run, for example if I take the code from this websitse: http://bl.ocks.org/weiglemc/6185069 I get a blank webpage :( I get two errors, XMLHttpRequest cannot load and ncaught TypeError: Cannot read property 'forEach' of undefined – IWantToLearn Sep 19 '16 at 06:51
Seems data is undefined. . Your data has to have some values. Check and see why it's unable to read the data data.forEach(function(d) { – Tharsan Sivakumar Sep 19 '16 at 07:07

Creating a SVG element with a Javascript function

1 Answers1