Using the PHP Everywhere Plugin

Mar 8, 2023

—

mmcginn2020

Highcharts Pie Chart Example

To put this php code on your WordPress site simply install the PHP Everywhere plugin and put a block on your post or page and then put this code into your block. Publish and enjoy.

<!DOCTYPE html>
<html>
<head>
  <title>Highcharts Pie Chart Example</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
  <div id="commercial-chart"></div>
  <div id="opensource-chart"></div>

  <?php
  // Data arrays
  $commercial_data = array(
    array("WordPress VIP", 4.27),
    array("Adobe Experience Manager", 2.34),
    array("Sitecore", 1.64),
    array("Wix", 1.39),
    array("Kentico", 1.01),
    array("Squarespace", 0.81),
    array("Episerver", 0.68),
    array("Crownpeak", 0.53),
    array("IBM Digital Experience Manager", 0.37),
    array("Contently", 0.25)
  );
  $opensource_data = array(
    array("WordPress", 62.23),
    array("Joomla!", 4.24),
    array("Drupal", 2.34),
    array("Magento", 1.14),
    array("PrestaShop", 0.43),
    array("OpenCart", 0.31),
    array("Typo3", 0.29),
    array("Plone", 0.13),
    array("SilverStripe", 0.12),
    array("Umbraco", 0.1)
  );
  ?>

  <script>
    // Commercial CMS chart
    Highcharts.chart('commercial-chart', {
      chart: {
        type: 'pie'
      },
      title: {
        text: 'Global Market Share of Top 10 Commercial CMS'
      },
      series: [{
        name: 'Market Share',
        data: <?php echo json_encode($commercial_data); ?>
      }]
    });

    // Open-source CMS chart
    Highcharts.chart('opensource-chart', {
      chart: {
        type: 'pie'
      },
      title: {
        text: 'Global Market Share of Top 10 Open-source CMS'
      },
      series: [{
        name: 'Market Share',
        data: <?php echo json_encode($opensource_data); ?>
      }]
    });
  </script>
</body>
</html>