How to use google column chart in php using ajax

how to use google column chart in php using ajax
Reading Time: 2 minutes

Steps to use google column chart

In this example, I am using google column chart, you can use any chart as per you need, you have to just replace the last line of code, everything else is somewhat similar. In the google column chart docs, they have used static array, I am using ajax to populate the chart dynamically without page refresh. You can use in any button click or any event. To customise chart according to you need please visit official google docs.

  1. First create one HTML file and put the above code . In this we have div container, which will load the chart data. Now , we will call ajax and pass the JSON data and draw the chart.
  2. In the second step, you have to put the above code in js file. It will call the ajax URL and load the data. After success function, you can see we have option variable, you can customise according to you need. You can see official google docs

    This is our php code to send JSON data. You can use any server side language to send the data in JSON format. First, I have created one multi dimensional array. I have put the two column name on the basis of my chart will appear. To add custom color in graph, I have added one more array of role with a value style. Now i have put the db query and getting the results from db and pushing the result to same array. When all the data will be added then I will encode this data in JSON format. After the ajax success, ajax function will read this data and draw the column chart for you.

Leave a Reply

Your email address will not be published. Required fields are marked *