SVG is the perfect solution for graphing, requiring a bit of math to convert the values into something scaled correctly for the size available within the graph, but very small in code size. Styling and many more possibilities exist, however this generator provides as start point, as well as usable line graphs for simple tasks.
Number of columns + 1
Number of rows + 1
MUST be same amount of number as Y Axis Points
MUST be same amount of numbers as X Axis Points
Change the settings above in order to generate the graph SVG.
Basic CSS below can be altered for font, line style, line size and color.
.axis-lines{ stroke:black; stroke-dasharray: 5; stroke-width: 0.5; } .graphline{ stroke:green; stroke-width: 3; fill: none; } .x-labels{ text-anchor: middle; } .y-labels{ text-anchor: end; text-anchor: middle; } .x-heading{ text-anchor: middle; } .y-heading{ text-anchor: middle; }