TCPDF is a php library to generate dynamic pdf.Tcpdf do not create/generate vertical bar charts,
so to generate vertical bar chart we can use SVG.
Step: 1
Create chart.svg file and add below svg code
<svg width="960" height="600">
<g transform="translate(40,20)">
<g class="x axis" transform="translate(0,450)">
<g class="tick" transform="translate(25.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">A</text>
</g>
<g class="tick" transform="translate(59.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">B</text>
</g>
<g class="tick" transform="translate(93.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">C</text>
</g>
<g class="tick" transform="translate(127.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">D</text>
</g>
<g class="tick" transform="translate(161.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">E</text>
</g>
<g class="tick" transform="translate(195.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">F</text>
</g>
<g class="tick" transform="translate(229.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">G</text>
</g>
<g class="tick" transform="translate(263.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">H</text>
</g>
<g class="tick" transform="translate(297.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">I</text>
</g>
<g class="tick" transform="translate(331.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">J</text>
</g>
<g class="tick" transform="translate(365.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">K</text>
</g>
<g class="tick" transform="translate(399.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">L</text>
</g>
<g class="tick" transform="translate(433.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">M</text>
</g>
<g class="tick" transform="translate(467.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">N</text>
</g>
<g class="tick" transform="translate(501.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">O</text>
</g>
<g class="tick" transform="translate(535.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">P</text>
</g>
<g class="tick" transform="translate(569.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">Q</text>
</g>
<g class="tick" transform="translate(603.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">R</text>
</g>
<g class="tick" transform="translate(637.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">S</text>
</g>
<g class="tick" transform="translate(671.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">T</text>
</g>
<g class="tick" transform="translate(705.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">U</text>
</g>
<g class="tick" transform="translate(739.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">V</text>
</g>
<g class="tick" transform="translate(773.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">W</text>
</g>
<g class="tick" transform="translate(807.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">X</text>
</g>
<g class="tick" transform="translate(841.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">Y</text>
</g>
<g class="tick" transform="translate(875.5,0)" style="opacity: 1;"><line y2="6" x2="0"></line>
<text dy=".71em" y="20" x="0" style="text-anchor: middle;">Z</text>
</g>
<path class="domain" d="M0,6V0H900V6"></path>
</g>
<g class="y axis">
<g class="tick" transform="translate(0,450)" style="opacity: 1;"><line x2="-6" y2="0"></line>
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">0%</text>
</g>
<g class="tick" transform="translate(0,414.57250826641473)" style="opacity: 1;"><line x2="-6" y2="0"></line>
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">1%</text>
</g>
<g class="tick" transform="translate(0,379.14501653282946)" style="opacity: 1;"><line x2="-6" y2="0"></line>
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">2%</text>
</g>
<g class="tick" transform="translate(0,343.71752479924425)" style="opacity: 1;"><line x2="-6" y2="0"></line>
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">3%</text>
</g>
<g class="tick" transform="translate(0,308.290033065659)" style="opacity: 1;"><line x2="-6" y2="0"></line>
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">4%</text>
</g>
<g class="tick" transform="translate(0,272.86254133207365)" style="opacity: 1;"><line x2="-6" y2="0"></line>
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">5%</text>
</g>
<g class="tick" transform="translate(0,237.43504959848843)" style="opacity: 1;"><line x2="-6" y2="0"></line>
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">6%</text>
</g>
<g class="tick" transform="translate(0,202.0075578649031)" style="opacity: 1;"><line x2="-6" y2="0"></line>
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">7%</text>
</g>
<g class="tick" transform="translate(0,166.5800661313179)" style="opacity: 1;"><line x2="-6" y2="0"></line>
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">8%</text>
</g>
<g class="tick" transform="translate(0,131.15257439773262)" style="opacity: 1;"><line x2="-6" y2="0"></line>
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">9%</text>
</g>
<g class="tick" transform="translate(0,95.72508266414734)" style="opacity: 1;"><line x2="-6" y2="0"></line>
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">10%</text>
</g>
<g class="tick" transform="translate(0,60.297590930562116)" style="opacity: 1;"><line x2="-6" y2="0"></line>
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">11%</text>
</g>
<g class="tick" transform="translate(0,24.87009919697684)" style="opacity: 1;"><line x2="-6" y2="0"></line>
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">12%</text>
</g>
<path class="domain" d="M-6,0H0V450H-6"></path>
<text transform="rotate(-90)" y="6" dy=".71em" style="text-anchor: end;">Frequency</text>
</g>
<!-- Bars -->
<rect style="fill: #add8e6;" class="bar" x="10" width="31" y="160.66367501180912" height="289.3363249881909"></rect>
<rect style="fill: #add8e6;" class="bar" x="44" width="31" y="397.1421823334908" height="52.85781766650922"></rect>
<rect style="fill: #add8e6;" class="bar" x="78" width="31" y="351.4407179971658" height="98.55928200283421"></rect>
<rect style="fill: #add8e6;" class="bar" x="112" width="31" y="299.3268776570619" height="150.6731223429381"></rect>
<rect style="fill: #add8e6;" class="bar" x="146" width="31" y="0" height="450"></rect>
<rect style="fill: #add8e6;" class="bar" x="180" width="31" y="368.94189891355694" height="81.05810108644306"></rect>
<rect style="fill: #add8e6;" class="bar" x="214" width="31" y="378.61360415682566" height="71.38639584317434"></rect>
<rect style="fill: #add8e6;" class="bar" x="248" width="31" y="234.10486537553143" height="215.89513462446857"></rect>
<rect style="fill: #add8e6;" class="bar" x="282" width="31" y="203.21209258384505" height="246.78790741615495"></rect>
<rect style="fill: #add8e6;" class="bar" x="316" width="31" y="444.57959376476146" height="5.420406235238545"></rect>
<rect style="fill: #add8e6;" class="bar" x="350" width="31" y="422.64997638167216" height="27.35002361832784"></rect>
<rect style="fill: #add8e6;" class="bar" x="384" width="31" y="307.4043457723193" height="142.5956542276807"></rect>
<rect style="fill: #add8e6;" class="bar" x="418" width="31" y="364.76145488899385" height="85.23854511100615"></rect>
<rect style="fill: #add8e6;" class="bar" x="452" width="31" y="210.89985829003308" height="239.10014170996692"></rect>
<rect style="fill: #add8e6;" class="bar" x="486" width="31" y="184.0458195559754" height="265.9541804440246"></rect>
<rect style="fill: #add8e6;" class="bar" x="520" width="31" y="381.660368445914" height="68.339631554086"></rect>
<rect style="fill: #add8e6;" class="bar" x="554" width="31" y="446.6343882853094" height="3.3656117146906013"></rect>
<rect style="fill: #add8e6;" class="bar" x="588" width="31" y="237.89560699102503" height="212.10439300897497"></rect>
<rect style="fill: #add8e6;" class="bar" x="622" width="31" y="225.850259801606" height="224.149740198394"></rect>
<rect style="fill: #add8e6;" class="bar" x="656" width="31" y="129.16863486065182" height="320.8313651393482"></rect>
<rect style="fill: #add8e6;" class="bar" x="690" width="31" y="352.29097779877185" height="97.70902220122815"></rect>
<rect style="fill: #add8e6;" class="bar" x="724" width="31" y="415.3519130845536" height="34.64808691544641"></rect>
<rect style="fill: #add8e6;" class="bar" x="758" width="31" y="366.39111950873877" height="83.60888049126123"></rect>
<rect style="fill: #add8e6;" class="bar" x="792" width="31" y="444.68587623996217" height="5.31412376003783"></rect>
<rect style="fill: #add8e6;" class="bar" x="826" width="31" y="380.06613131790266" height="69.93386868209734"></rect>
<rect style="fill: #add8e6;" class="bar" x="860" width="31" y="447.3783656117147" height="2.6216343882853153"></rect>
</g>
</svg>
Step: 2
After installation and configuring tcpdf.Use below code.
// create new PDF document
$pdf = new TCPDF('P', PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
// set document information
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('Nicola Asuni');
$pdf->SetTitle('TCPDF Example 020');
$pdf->SetSubject('TCPDF Tutorial');
$pdf->SetKeywords('TCPDF, PDF, example, test, guide');
// set default header data
$pdf->SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE.' 020', PDF_HEADER_STRING);
// disable header and footer.
$pdf->setPrintHeader(true);
$pdf->setPrintFooter(false);
// set margins
$pdf->SetMargins(PDF_MARGIN_LEFT, 10, PDF_MARGIN_RIGHT);
// set auto page breaks
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
// set image scale factor
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);
$pdf->AddPage();
$svg_file = 'chart.svg';
$pdf->ImageSVG($target_file,30, 100, '', 100, '', '', '', 0, false);
$mpdf->Output(); // output pdf
Run the above code
Step: 3
You will see output pdf
If you need any further guideline then please comment below.
0 Comments