Google charts and MySQL

11:43 PM Unknown 0 Comments


 I was working on some projects that needs to use charts in the application ,so ,after a long search in the web ,here is my solution . 
right now I am developing two types of charts 
  •  real Time 
  • Static charts 
In this article, I will show your how to fetch data from database to use it on the google Line charts to create beautiful and customisable charts for your future projects. . 

1.Introduction

It is practically impossible to imagine any dashboard without graphs and charts. They present complex statistics quickly and effectively. Additionally, a good graph also enhances the overall design of your website.

2.What is google charts ?

The Google Chart API is a tool that lets people easily create a chart from some data and embed it in a web page. Google creates a PNG image of a chart from data and formatting parameters in an HTTP request.
read more :GoogleAPI

3.Files

start your Wamp server and then create this files in WWW folder (C:/wamp/www)

 config.php:define the settings for the application
get_feeds:fetch data from data base 

4.Create database

Database name is :google_charts
table name:mychart     

CREATE TABLE IF NOT EXISTS `mychart` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `axe_x` text NOT NULL,
  `axe_y` text NOT NULL,
  `time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=101 ;

--
-- Contenu de la table `mychart`
--

INSERT INTO `mychart` (`id`, `axe_x`, `axe_y`, `time`) VALUES
(1, '0', '30', '2016-04-13 20:52:15'),
(2, '1', '90', '2016-04-13 20:52:15'),
(3, '2', '36', '2016-04-13 20:52:16'),
(4, '3', '85', '2016-04-13 20:52:16'),
(5, '4', '87', '2016-04-13 20:52:16'),
(6, '5', '10', '2016-04-13 20:52:16'),
(7, '6', '25', '2016-04-13 20:52:16'),
(8, '7', '87', '2016-04-13 20:52:16'),
(9, '8', '28', '2016-04-13 20:52:16'),
(10, '9', '32', '2016-04-13 20:52:16'),
(11, '10', '68', '2016-04-13 20:52:16'),
(12, '11', '42', '2016-04-13 20:52:16'),
(13, '12', '11', '2016-04-13 20:52:16'),
(14, '13', '60', '2016-04-13 20:52:16'),
(15, '14', '91', '2016-04-13 20:52:16'),
(16, '15', '85', '2016-04-13 20:52:16'),
(17, '16', '7', '2016-04-13 20:52:16'),
(18, '17', '75', '2016-04-13 20:52:16'),
(19, '18', '29', '2016-04-13 20:52:16'),
(20, '19', '40', '2016-04-13 20:52:16'),
(21, '20', '22', '2016-04-13 20:52:16'),
(22, '21', '92', '2016-04-13 20:52:17'),
(23, '22', '28', '2016-04-13 20:52:17'),
(24, '23', '30', '2016-04-13 20:52:17'),
(25, '24', '56', '2016-04-13 20:52:17'),
(26, '25', '45', '2016-04-13 20:52:17'),
(27, '26', '86', '2016-04-13 20:52:17'),
(28, '27', '18', '2016-04-13 20:52:17'),
(29, '28', '74', '2016-04-13 20:52:17'),
(30, '29', '84', '2016-04-13 20:52:17'),
(31, '30', '29', '2016-04-13 20:52:17'),
(32, '31', '4', '2016-04-13 20:52:17'),
(33, '32', '73', '2016-04-13 20:52:17'),
(34, '33', '65', '2016-04-13 20:52:17'),
(35, '34', '89', '2016-04-13 20:52:17'),
(36, '35', '59', '2016-04-13 20:52:17'),
(37, '36', '75', '2016-04-13 20:52:17'),
(38, '37', '13', '2016-04-13 20:52:17'),
(39, '38', '46', '2016-04-13 20:52:17'),
(40, '39', '2', '2016-04-13 20:52:17'),
(41, '40', '45', '2016-04-13 20:52:18'),
(42, '41', '13', '2016-04-13 20:52:18'),
(43, '42', '44', '2016-04-13 20:52:18'),
(44, '43', '55', '2016-04-13 20:52:18'),
(45, '44', '73', '2016-04-13 20:52:18'),
(46, '45', '34', '2016-04-13 20:52:18'),
(47, '46', '40', '2016-04-13 20:52:18'),
(48, '47', '79', '2016-04-13 20:52:18'),
(49, '48', '8', '2016-04-13 20:52:18'),
(50, '49', '68', '2016-04-13 20:52:18'),
(51, '50', '19', '2016-04-13 20:52:18'),
(52, '51', '30', '2016-04-13 20:52:18'),
(53, '52', '60', '2016-04-13 20:52:18'),
(54, '53', '46', '2016-04-13 20:52:18'),
(55, '54', '60', '2016-04-13 20:52:18'),
(56, '55', '15', '2016-04-13 20:52:18'),
(57, '56', '91', '2016-04-13 20:52:18'),
(58, '57', '45', '2016-04-13 20:52:18'),
(59, '58', '33', '2016-04-13 20:52:18'),
(60, '59', '65', '2016-04-13 20:52:19'),
(61, '60', '28', '2016-04-13 20:52:19'),
(62, '61', '61', '2016-04-13 20:52:19'),
(63, '62', '68', '2016-04-13 20:52:19'),
(64, '63', '1', '2016-04-13 20:52:19'),
(65, '64', '26', '2016-04-13 20:52:19'),
(66, '65', '57', '2016-04-13 20:52:19'),
(67, '66', '60', '2016-04-13 20:52:19'),
(68, '67', '100', '2016-04-13 20:52:19'),
(69, '68', '70', '2016-04-13 20:52:19'),
(70, '69', '5', '2016-04-13 20:52:19'),
(71, '70', '2', '2016-04-13 20:52:19'),
(72, '71', '14', '2016-04-13 20:52:19'),
(73, '72', '18', '2016-04-13 20:52:19'),
(74, '73', '45', '2016-04-13 20:52:19'),
(75, '74', '68', '2016-04-13 20:52:19'),
(76, '75', '90', '2016-04-13 20:52:19'),
(77, '76', '79', '2016-04-13 20:52:19'),
(78, '77', '7', '2016-04-13 20:52:19'),
(79, '78', '69', '2016-04-13 20:52:19'),
(80, '79', '87', '2016-04-13 20:52:19'),
(81, '80', '75', '2016-04-13 20:52:19'),
(82, '81', '87', '2016-04-13 20:52:19'),
(83, '82', '16', '2016-04-13 20:52:20'),
(84, '83', '34', '2016-04-13 20:52:20'),
(85, '84', '33', '2016-04-13 20:52:20'),
(86, '85', '76', '2016-04-13 20:52:20'),
(87, '86', '49', '2016-04-13 20:52:20'),
(88, '87', '24', '2016-04-13 20:52:20'),
(89, '88', '20', '2016-04-13 20:52:20'),
(90, '89', '81', '2016-04-13 20:52:20'),
(91, '90', '88', '2016-04-13 20:52:20'),
(92, '91', '48', '2016-04-13 20:52:20'),
(93, '92', '42', '2016-04-13 20:52:20'),
(94, '93', '56', '2016-04-13 20:52:20'),
(95, '94', '48', '2016-04-13 20:52:20'),
(96, '95', '67', '2016-04-13 20:52:20'),
(97, '96', '13', '2016-04-13 20:52:20'),
(98, '97', '7', '2016-04-13 20:52:20'),
(99, '98', '66', '2016-04-13 20:52:20'),
(100, '99', '82', '2016-04-13 20:52:20');

5.Config.php

<?php
define("host","127.0.0.1");
define("username","_YOUR_USERNAME_");
define("pwd","YOUR_PASSWORD_");
define("db","test");
?>

6.index.php


<?php
require("get_feeds.php");
?>

<h3 align="center">Google LineCharts</h3>

<!-- CDN charts   !-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!--END CDN charts   !-->


<!-- div to include the chart   !-->

<div id="chart_div"></div>

<!-- END div to include the chart   !-->


      
<script>
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCrosshairs);

function drawCrosshairs() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'consumption');
      data.addRows(<?php echo $out; ?>);

      var options = {
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Percentage'
        },
        colors: ['#536dfe'],
        crosshair: {
          color: '#000',
          trigger: 'selection'
        }
      };

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

      chart.draw(data, options);
      chart.setSelection([{row: 38, column: 1}]);

    }
    </script>

7.Screenshot


8.Download demo

9.Watch the live demo here :


Unknown