How to add Charts in WordPress Development

Google charts are very powerful and easy to use so I recommend using google charts in WordPress to design and develop your dashboards, statistics, and charts. It is easy to add google charts in WordPress plugins and Themes.

Introduction to Google Charts in WordPress

Click the link given below to read more about Google charts. An example of a Google line chart is added in this article so read about the line charts by clicking the button of a line chart.

// Data Should be in JS array form
[
   ['Year', 'Sales', 'Expenses'],
   ['2004',  1000,      400],
   ['2005',  1170,      460],
   ['2006',  660,       1120],
   ['2007',  1030,      540]
]

Enqueue script to add google chart library

wp_enqueue_script( 'google-charts', 'https://www.gstatic.com/charts/loader.js' );

Add JS Code in your JS file

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable( {Your data array} );

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }

Include div in your page/section

<div id="curve_chart" style="width: 900px; height: 500px"></div>

How to create a PHP array of data and convert it into a JS Array

Create a two-dimensional array of PHP and encode it in JSON format. Localize your data and send it to JS File. Then use JSON.parse() method to convert a JSON formatted string to a JS array.

Create a two-dimensional PHP array. (Step 1)

$array = array(
	array( 'Date', 'Product 1 Sales', 'Product 2 sale', 'Product 3 sale'),
	array( '25-05-2022', 'Product 1 Sales', 'Product 2 sale', 'Product 3 sale'),
	array( '26-05-2022', 'Product 1 Sales', 'Product 2 sale', 'Product 3 sale'),
	array( '27-05-2022', 'Product 1 Sales', 'Product 2 sale', 'Product 3 sale'),
	array( '28-05-2022', 'Product 1 Sales', 'Product 2 sale', 'Product 3 sale'),
);

Localize script to pass data to JS file ( Step 2)

$php_var = array(
	‘chart_data'         => $array,
);
wp_localize_script( 'Your file handler', 'php_var', $php_var );

Parse JSON data in JS (Step 3)

var chart_data = JSON.parse( php_var. chart_data );

Use your data in google charts ( Step 4)

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable(chart_data);
        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }

Use AJAX to update google charts in WordPress plugins and themes

Send your data using wp_send_json() method.

https://developer.wordpress.org/reference/functions/wp_send_json/

$array = array(
	array( 'Date', 'Product 1 Sales', 'Product 2 sale', 'Product 3 sale'),
	array( '25-05-2022', 'Product 1 Sales', 'Product 2 sale', 'Product 3 sale'),
	array( '26-05-2022', 'Product 1 Sales', 'Product 2 sale', 'Product 3 sale'),
	array( '27-05-2022', 'Product 1 Sales', 'Product 2 sale', 'Product 3 sale'),
	array( '28-05-2022', 'Product 1 Sales', 'Product 2 sale', 'Product 3 sale'),
);
wp_send_json( array( ‘chart_data’ => $array) );

Get the data in the AJAX response and use it to draw a chart as given in the above example.

function( response ){
     var data = response.chart_data;
     google.charts.load('current', {'packages':['corechart']});
     google.charts.setOnLoadCallback(drawChart);
}

Read More Articles similar to Google Charts in WordPress

Raja Aman Ullah

Raja Aman Ullah is a highly skilled WordPress and WooCommerce plugin developer working as a lead plugin developer. He developed numerous famous extensions including b2b, request a quote, ultimate membership, custom fields, and many others for WooCommerce that are trending on Extension Store. His products on WooCommerce have more than 100,000 active subscriptions and happy clients.
Hire me