1. เริ่มแรกให้ดูส่วน API ที่เราทำกราฟแท่ง ซึ่งจะใช้เป็นคำสั่งสร้างไฟล์รูปของกราฟที่ไปใช้บน PDF ของกราฟแท่ง
โค้ด: เลือกทั้งหมด
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = new google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333', ],
['Silver', 10.49, 'silver'],
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ]
]);
var options = {
width:'auto',
legend: { position: 'none' },
chart: {
title: null,
top:0,
left:20,width:'20%'
},
bars: 'vertical',
axes: {
x: {
Density: {side: 'top', label: 'Percentage'},
}
},bar: { groupWidth: "40%" }
};
var chart = new google.visualization.ColumnChart(document.getElementById('dual_x_div')); //----ส่วนการสร้างกราฟในหน้า View ของเราปกติ
google.visualization.events.addListener(chart, 'ready', function () { //----เป็นคำสั่งทำเมื่อมีการสร้างกราฟให้สร้างรูปภาพขึ้นเลย หรือจะทำ action ภายใต้คำสั่งนี้ได้
document.getElementById('hdd_chart_pic').value = chart.getImageURI(); //------เก็บรูปใส่ใน input ที่ type="hidden" ที่ id="hdd_chart_pic"
});
chart.draw(data, options);
});
//----เพิ่ม code ในส่วนนี้โดยใช้ id =dual_x_div อันเดียวกับแสดงกราฟบนเว็บของเรา
google.load('dual_x_div', '1', {packages:['corechart'], callback: drawVisualizationDaily
});
</script>
โค้ด: เลือกทั้งหมด
<?php echo Html::hiddenInput('hdd_chart_pic','',array('id'=>'hdd_chart_pic')); ?>
โค้ด: เลือกทั้งหมด
$_SESSION['img']=$_POST['hdd_chart_pic'];
โค้ด: เลือกทั้งหมด
<img src="<?php echo $_SESSION['img']; ?>" width="90%" />
- https://stackoverflow.com/questions/480 ... ogle-chart
- วิธีใช้ Google Charts ให้แสดงบน PDF โดยใช้ MPDF : viewtopic.php?f=72&t=71777
- สามารถอ่านข้อมูลเพิ่มของ MPDF ได้ที่ https://mpdf.github.io/