I’m creating a simple bar chart using Google Charts with the data fetched from Mysql Database. The chart is displayed properly but I’m unable to format the title of the graph. I have referred to many sites and I’m sure the syntax for ‘titleTextStyle’ is fine. But the title does not change with the options at all. Can somebody tell me where the problem lies ? I have attached my full code below. Thanks in advance.
<?php include("toconnect.php"); $result = mysqli_query($connection,"SELECT Product_name,COUNT(*) FROM Items_Sold GROUP BY Product_name"); ?> <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Product Name', 'Frequency'], <?php if(mysqli_num_rows($result) > 0){ while($row = mysqli_fetch_array($result)) { echo "['".$row["Product_name"]."','".$row["COUNT(*)"]."'],"; } } ?> ]); var options = { chart: { title: "Frequently Bought items",titleTextStyle:{ color: '#007DB0',fontName: "Times",fontSize: 60,bold: true}, } }; var chart = new google.charts.Bar(document.getElementById('columnchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="columnchart_material" style="width: 800px; height: 500px;display:inline-block;"></div> </body> </html>
Advertisement
Answer
you are working with a material chart…
google.charts.Bar
the list of features not working in Material charts can be found here…
Tracking Issue for Material Chart Feature Parity #2143
which includes…
titleTextStyle
try working with a classic chart instead…
google.visualization.ColumnChart
with option…
theme: 'material'