Diagrams' svg code maker
how it works

The 'DiaFactory' application helps you to create diagrams on cartesian coordinates, generate their svg code, to insert it on your website.

Creating the diagrams

Application's frame is:

In text fields write the following values:

the size of the diagram (width and height) and the padding, all in pixels

the numeric data of the diagram's curves, 'x-data' and 'y-data'
the coordinates lists 'x-tick' and 'y-tick' of the grid lines

All the values inserted above should be written in the decimal number system, separated by a comma.

By clicking on either of the two 'UPDATE' buttons, you'll get a preview of the diagram with the data you inserted, as shown below:

Editing the visual elements

The diagram you created above has three types of visual elements:

line
dots
bars

You can edit the visual elements from this section:

check the corresponding box to have the element visible on the diagram; uncheck the box to hide it
click on the corresponding 'edit' button to set the color and the size of each visual element

When you click on 'edit' a pop-up window will appear with the editing options.

This is the pop-up window for the 'line' element:

This is the pop-up window for the 'dots' element:

This is the pop-up window for the 'bars' element:

In the window for editing the 'bars' there is a text field where you need to insert the base value. On the diagram, you'll see all the bars as having this base value. Example:

base = 9:

base = 13:

To write the 'Title' and 'legend' of the diagram, type them in the corresponding text fields. When you complete them, the diagram will look like this:

You can also edit the title text font, size and style.

Multiple diagrams

The 'DiaFactory' application offers the possibility to create diagrams with multiple data sets, overlayed on the same cartesian coordinates.

To insert a new set of data, click on 'new y-data serie' and a new y-data field will appear. Fill in the new data, click on 'UPDATE' and the graph will get updated.

If you want to remove any of the data series, click on the 'remove' button to the right of the respective 'y-data' serie. Select 'yes' in the pop-up window and the graph will automatically update.

The visual elements of the newly added series can be set just as explained before. First, make sure that you select the series for which you'd like to edit them, on the left side of the box, as shown below.

A two sets of data diagram:

looks like this:

Subinterval diagrams

To create diagrams that have intervals smaller than the data set in 'x-data', delete the non-existent positions from the 'y-data' list, but make sure to leave the corresponding commas (as signaled in the screenshot below).

Below you can see a diagram with two series of data, one of which being defined as a subdomain of the main one.

Finally

After you have created the diagram that you wish, click on the button 'click to copy diagram's svg code' to download it.

By clicking on the button, the svg code is copied on your computer's clipboard. Open any html document and paste the code there (ctrl+V).

Note: if you're using an Internet Explorer browser and the version is older than IE9, the svg code will not be copied on your clipboard, but you can copy it from the text field to the right of the aforementioned button.