NewsTicker

HighCharts Demo

On this page we will be showing demos of various HighCharts.Com charts and maps. Stay tuned.

Highcharts Pie Chart Example

Run this code on your web server to see some cool pie charts. You will need to save it with a .php file extension to make it work and run it on a server that has a full LAMP stack setup so the file extension will render as php.


<!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>