How to draw solid/dotted/dashed lines using most basic HTML/CSS possible (for tcpdf to render them correctly)

0
votes

Observe Image below. It is a composite of two graphs, where different curves are shown in solid lines, dotted lines, and variations of dashed lines with different length of stroke.

image of graph with dashes

TL;DR

I need a way to generate solid lines, dashed lines, dotted lines using basic/simplest HTML/CSS possible in hopes that tcpdf rendering engine will understand, since tcpdf does not deal well with lastest and greatest HTML/CSS markup. How?

Details you may not need, but may appreciate:

I am using flot + tcpdf to generate these, where graphs are first generated on canvas, and canvas are then transferred to PDF engine and everything seems to work fine except the legend. The legend of the curves is not being transferred to canvas, due to flot not having the capacity just yet to write its legend onto canvas. It writes it onto DIV in HTML/CSS, and the legend code generated by flot translates horribly (i.e. it did big ugly rectangles instead of lines) to tcpdf's native weak HTML-to-pdf rendering engine. In other words, I need to create my own legend using most basic HTML/CSS, and hope that tcpdf will understand and render it correctly.

1
htmlcsstcpdf

1 Answers

0
votes

use SVG, not HTML/CSS.

http://www.tcpdf.org/doc/code/classTCPDF.html#a56536508fb1b5aede7d2ed27f56c2353

<svg height="30" width="100">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="20,10" d="M5 2 300 0" />
  </g>
</svg>