Initial

Highcharts Chart PHP with MySQL Example
pesima · Sep 6, 2014 · 999b7d0 · 999b7d0
commit 999b7d0
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 0 deletions.
diff --git a/conn/connection.php b/conn/connection.php
@@ -0,0 +1,11 @@
+<?php
+$con = mysql_connect("localhost","root","");
+
+if (!$con) {
+  die('Could not connect: ' . mysql_error());
+}
+
+mysql_select_db("db_highcharts", $con);
+
+
+?>
diff --git a/db_highcharts.sql b/db_highcharts.sql
@@ -0,0 +1,53 @@
+-- phpMyAdmin SQL Dump
+-- version 4.0.9
+-- http://www.phpmyadmin.net
+--
+-- Host: localhost
+-- Generation Time: Sep 06, 2014 at 04:38 AM
+-- Server version: 5.5.34
+-- PHP Version: 5.4.22
+
+SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
+SET time_zone = "+00:00";
+
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8 */;
+
+--
+-- Database: `db_highcharts`
+--
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `web_marketing`
+--
+
+CREATE TABLE IF NOT EXISTS `web_marketing` (
+  `name` varchar(50) DEFAULT NULL,
+  `val` decimal(10,2) DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Dumping data for table `web_marketing`
+--
+
+INSERT INTO `web_marketing` (`name`, `val`) VALUES
+('Direct Sales', '20.00'),
+('Search Engine Marketing', '15.00'),
+('PPC Advertising', '15.00'),
+('Website Marketing', '10.00'),
+('Blog Marketing', '10.00'),
+('Social Media Marketing', '10.00'),
+('Email Marketing', '10.00'),
+('Online PR', '2.50'),
+('Multimedia Marketing', '2.50'),
+('Mobile Marketing', '2.50'),
+('Display Advertising', '2.50');
+
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
diff --git a/nbproject/private/private.properties b/nbproject/private/private.properties
@@ -0,0 +1,6 @@
+copy.src.files=false
+copy.src.on.open=false
+copy.src.target=
+index.file=index.php
+run.as=LOCAL
+url=http://localhost/highcharts/
diff --git a/nbproject/project.properties b/nbproject/project.properties
@@ -0,0 +1,7 @@
+include.path=${php.global.include.path}
+php.version=PHP_54
+source.encoding=UTF-8
+src.dir=.
+tags.asp=false
+tags.short=false
+web.root=.
diff --git a/nbproject/project.xml b/nbproject/project.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://www.netbeans.org/ns/project/1">
+    <type>org.netbeans.modules.php.project</type>
+    <configuration>
+        <data xmlns="http://www.netbeans.org/ns/php-project/1">
+            <name>highcharts</name>
+        </data>
+    </configuration>
+</project>
diff --git a/pie/data.php b/pie/data.php
@@ -0,0 +1,22 @@
+<?php
+
+require '../conn/connection.php';
+
+$result = mysql_query("SELECT name, val FROM web_marketing");
+
+//$rows = array();
+$rows['type'] = 'pie';
+$rows['name'] = 'Revenue';
+
+while ($r = mysql_fetch_array($result)) {
+    $rows['data'][] = array($r['name'], $r['val']);    
+
+
+}
+$rslt = array();
+array_push($rslt,$rows);
+print json_encode($rslt, JSON_NUMERIC_CHECK);
+
+mysql_close($con);
+
+
diff --git a/pie/index.php b/pie/index.php
@@ -0,0 +1,71 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <title>Highcharts Pie Chart</title>
+        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+        <script type="text/javascript">
+            $(document).ready(function() {
+                var options = {
+                    chart: {
+                        renderTo: 'container',
+                        plotBackgroundColor: null,
+                        plotBorderWidth: null,
+                        plotShadow: false
+                    },
+                    title: {
+                        text: 'Web Sales & Marketing Efforts'
+                    },
+                    tooltip: {
+                        formatter: function() {
+                            return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
+                        }
+                    },
+                    plotOptions: {
+                        pie: {
+                            allowPointSelect: true,
+                            cursor: 'pointer',
+                            dataLabels: {
+                                enabled: true,
+                                color: '#000000',
+                                connectorColor: '#000000',
+                                formatter: function() {
+                                    return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
+                                }
+                            }
+                        }
+                    },
+                    series: []
+                    //Bentuk data sebenar
+                    /*series: [{
+                            "type":"pie",
+                            "name":"Revenue",
+                            "data":[
+                                ["Direct Sales",20],
+                                ["Search Engine Marketing",15],
+                                ["PPC Advertising",15],
+                                ["Website Marketing",10],
+                                ["Blog Marketing",10],
+                                ["Social Media Marketing",10],
+                                ["Email Marketing",10],
+                                ["Online PR",2.5],
+                                ["Multimedia Marketing",2.5],
+                                ["Mobile Marketing",2.5],
+                                ["Display Advertising",2.5]
+                            ]
+                        }]*/
+                }
+
+                $.getJSON("data.php", function(json) {
+                    options.series = json;
+                    chart = new Highcharts.Chart(options);
+                });
+            });
+        </script>
+        <script src="http://code.highcharts.com/highcharts.js"></script>
+        <script src="http://code.highcharts.com/modules/exporting.js"></script>
+    </head>
+    <body>
+        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+    </body>
+</html>