Tagged: google charts php mysql example

Google API Line Chart with JSON PHP & Mysql 0

Google API Line Chart with JSON PHP & Mysql

Google API Line Chart with JSON PHP & Mysql

In this Post We Will Explain About is Google API Line Chart with JSON PHP & Mysql With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Google Charts with PHP, Mysql and AJAX Example

In this post we will show you Best way to implement How to Make Google Line Chart by using PHP JSON Data, hear for GOOGLE CHART TOOLS WITH JSON, JQUERY AND MYSQL/PHP with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Include External Libs

 //include Extteral Libs
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <!-- include jquery-->
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

index.js

   google.charts.load('current', {'packages':['corechart']});
   google.charts.setOnLoadCallback(drawChart);
   function drawChart()
   {
    var data = new google.visualization.DataTable(<?php echo $score_table; ?>);

    var options = {
     title:'Sensors Data',
     legend:{position:'bottom'},
     chartArea:{width:'100%', height:'75%'}
    };

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

    chart.draw(data, options);
   }

style.css

  .page-wrapper
  {
   width:1135px;
   margin:0 auto;
  }

index.php

<?php
//index.php
$connect = mysqli_connect("localhost", "YOUR_USER_NAME", "YOUR_PASSWORD", "DATABASE_NAME");
$query = '
SELECT live_cricket_Score, 
UNIX_TIMESTAMP(CONCAT_WS(" ", Match_live_date, mathc_live_time)) AS datetime 
FROM tbl_live_match_score 
ORDER BY Match_live_date DESC, mathc_live_time DESC
';
$result = mysqli_query($connect, $query);
$rows = array();
$table = array();

$table['cols'] = array(
 array(
  'label' => 'Date Time', 
  'type' => 'datetime'
 ),
 array(
  'label' => 'Score (run)', 
  'type' => 'number'
 )
);

while($row = mysqli_fetch_array($result))
{
 $score_array = array();
 $datetime = explode(".", $row["datetime"]);
 $score_array[] =  array(
      "v" => 'Date(' . $datetime[0] . '000)'
     );
 $score_array[] =  array(
      "v" => $row["live_cricket_Score"]
     );
 $rows[] =  array(
     "c" => $score_array
    );
}
$table['rows'] = $rows;
$score_table = json_encode($table);

?>


<html>
 <head>
 </head>  
 <body>
  <div class="page-wrapper">
   <br />
   <h2 align="center">Display Simple Google Line Chart with JSON  Data PHP & Mysql</h2>
   <div id="line_chart" style="width: 100%; height: 600px"></div>
  </div>
 </body>
</html>

Database(Table structure for table `tbl_live_match_score`)

CREATE TABLE IF NOT EXISTS `tbl_live_match_score` (
  `live_match_id` int(11) NOT NULL,
  `live_cricket_Score` varchar(30) NOT NULL,
  `Match_live_date` date NOT NULL,
  `mathc_live_time` time NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=484 DEFAULT CHARSET=latin1;

Dumping data for table `tbl_live_match_score`

INSERT INTO `tbl_live_match_score` (`live_match_id`, `live_cricket_Score`, `Match_live_date`, `mathc_live_time`) VALUES
(539, '28', '2018-11-11', '10:00:00'),
(540, '26', '2018-11-11', '10:10:00'),
(541, '36', '2018-11-11', '10:20:00'),
(542, '31', '2018-11-11', '10:30:00'),
(543, '30', '2018-11-11', '10:40:00'),
(544, '27', '2018-11-11', '10:50:00'),
(545, '28', '2018-11-02', '11:00:00'),
(546, '25', '2018-11-01', '11:10:00'),
(547, '27', '2018-11-31', '11:20:00'),
(548, '27', '2018-11-30', '11:30:00'),
(549, '36', '2018-11-29', '11:40:00'),
(550, '30', '2018-11-28', '11:50:00'),
(551, '39', '2018-11-27', '12:00:00'),
(552, '36', '2018-11-26', '12:10:00'),
(553, '32', '2018-11-25', '12:20:00'),
(554, '33', '2018-11-09', '12:30:00'),
(555, '40', '2018-11-09', '12:40:00'),
(556, '33', '2018-11-09', '12:50:00'),
(557, '25', '2018-11-09', '13:00:00'),
(558, '33', '2018-11-09', '13:10:00'),
(559, '26', '2018-11-09', '13:20:00'),
(560, '38', '2018-11-24', '13:30:00'),
(561, '33', '2018-11-23', '13:40:00'),
(562, '37', '2018-11-22', '13:50:00'),
(563, '35', '2018-11-21', '14:00:00'),
(564, '39', '2018-11-20', '14:10:00'),
(565, '26', '2018-11-19', '14:20:00'),
(566, '29', '2018-11-18', '14:30:00'),
(567, '40', '2018-11-17', '14:40:00'),
(568, '40', '2018-11-16', '14:50:00'),
(569, '37', '2018-11-15', '15:00:00'),
(570, '28', '2018-11-14', '15:10:00'),
(571, '26', '2018-11-13', '15:20:00'),
(572, '32', '2018-11-12', '15:30:00'),
(573, '34', '2018-11-11', '15:40:00'),
(574, '31', '2018-11-10', '15:50:00'),
(575, '34', '2018-11-09', '16:00:00'),
(576, '37', '2018-11-11', '16:10:00'),
(577, '31', '2018-11-11', '16:20:00'),
(578, '36', '2018-11-11', '16:30:00'),
(579, '40', '2018-11-11', '16:40:00'),
(580, '27', '2018-11-11', '16:50:00'),
(581, '26', '2018-11-11', '17:00:00'),
(582, '38', '2018-11-02', '17:10:00'),
(583, '39', '2018-11-01', '17:20:00'),
(584, '33', '2018-11-30', '17:30:00'),
(585, '31', '2018-11-29', '17:40:00'),
(586, '38', '2018-11-28', '17:50:00'),
(587, '26', '2018-11-27', '18:00:00'),
(588, '32', '2018-11-26', '18:10:00'),
(589, '30', '2018-11-25', '18:20:00'),
(590, '27', '2018-11-24', '18:30:00'),
(591, '29', '2018-11-23', '18:40:00'),
(592, '39', '2018-11-22', '18:50:00'),
(593, '40', '2018-11-21', '19:00:00'),
(594, '39', '2018-11-20', '19:10:00'),
(595, '38', '2018-11-19', '19:20:00'),
(596, '25', '2018-11-18', '19:30:00'),
(597, '28', '2018-11-17', '19:40:00'),
(598, '37', '2018-11-16', '19:50:00'),
(599, '40', '2018-11-15', '20:00:00'),
(600, '40', '2018-11-14', '20:10:00'),
(601, '40', '2018-11-13', '20:20:00'),
(602, '25', '2018-11-12', '20:30:00'),
(611, '32', '2018-11-11', '20:40:00'),
(611, '34', '2018-11-10', '20:50:00'),
(611, '32', '2018-11-09', '21:00:00'),
(611, '25', '2018-11-11', '21:10:00'),
(611, '31', '2018-11-11', '21:20:00'),
(611, '39', '2018-11-11', '21:30:00'),
(609, '37', '2018-11-11', '21:40:00'),
(610, '30', '2018-11-11', '21:50:00'),
(611, '26', '2018-11-11', '22:00:00'),
(612, '38', '2018-11-02', '22:10:00'),
(613, '28', '2018-11-01', '22:20:00'),
(614, '40', '2018-11-31', '22:30:00'),
(615, '31', '2018-11-30', '22:40:00'),
(616, '34', '2018-11-29', '22:50:00'),
(617, '37', '2018-11-28', '23:00:00'),
(618, '33', '2018-11-27', '23:10:00'),
(619, '25', '2018-11-26', '23:20:00'),
(620, '27', '2018-11-25', '23:30:00'),
(621, '35', '2018-11-24', '23:40:00'),
(622, '30', '2018-11-23', '23:50:00'),
(623, '25', '2018-11-22', '00:00:00'),
(624, '35', '2018-11-21', '00:10:00'),
(625, '29', '2018-11-20', '00:20:00'),
(626, '38', '2018-11-19', '00:30:00'),
(627, '36', '2018-11-18', '00:40:00'),
(628, '32', '2018-11-17', '00:50:00'),
(629, '35', '2018-11-16', '01:00:00'),
(630, '35', '2018-11-15', '01:10:00'),
(631, '32', '2018-11-14', '01:20:00'),
(632, '35', '2018-11-13', '01:30:00'),
(633, '36', '2018-11-12', '01:40:00'),
(634, '39', '2018-11-11', '01:50:00'),
(635, '28', '2018-11-10', '02:00:00'),
(636, '28', '2018-11-09', '02:10:00'),
(637, '40', '2018-11-11', '02:20:00'),
(638, '35', '2018-11-11', '02:30:00'),
(639, '26', '2018-11-11', '02:40:00'),
(640, '36', '2018-11-11', '02:50:00'),
(641, '25', '2018-11-11', '11:00:00'),
(642, '28', '2018-11-11', '11:10:00'),
(643, '34', '2018-11-02', '11:20:00'),
(644, '28', '2018-11-01', '11:30:00'),
(645, '27', '2018-11-30', '11:40:00'),
(646, '25', '2018-11-29', '11:50:00'),
(647, '37', '2018-11-28', '11:00:00'),
(648, '39', '2018-11-27', '11:10:00'),
(649, '33', '2018-11-26', '11:20:00'),
(650, '38', '2018-11-25', '11:30:00'),
(651, '25', '2018-11-24', '11:40:00'),
(652, '28', '2018-11-23', '11:50:00'),
(653, '27', '2018-11-22', '11:00:00'),
(654, '26', '2018-11-21', '11:10:00'),
(655, '38', '2018-11-20', '11:20:00'),
(656, '32', '2018-11-19', '11:30:00'),
(657, '39', '2018-11-18', '11:40:00'),
(658, '33', '2018-11-17', '11:50:00'),
(659, '39', '2018-11-16', '11:00:00'),
(660, '34', '2018-11-15', '11:10:00'),
(661, '28', '2018-11-14', '11:20:00'),
(662, '31', '2018-11-13', '11:30:00'),
(663, '28', '2018-11-12', '11:40:00'),
(664, '40', '2018-11-11', '11:50:00'),
(665, '29', '2018-11-10', '11:00:00'),
(666, '32', '2018-11-09', '11:10:00'),
(667, '27', '2018-11-11', '11:20:00'),
(668, '28', '2018-11-11', '11:30:00'),
(669, '26', '2018-11-11', '11:40:00'),
(670, '29', '2018-11-11', '11:50:00'),
(671, '40', '2018-11-11', '11:00:00'),
(672, '26', '2018-11-11', '11:10:00'),
(673, '32', '2018-11-02', '11:20:00'),
(674, '34', '2018-11-01', '11:30:00'),
(675, '29', '2018-11-31', '11:40:00'),
(676, '35', '2018-11-30', '11:50:00'),
(677, '34', '2018-11-29', '09:00:00'),
(678, '26', '2018-11-28', '09:10:00'),
(679, '33', '2018-11-27', '09:20:00'),
(680, '27', '2018-11-26', '09:30:00'),
(681, '39', '2018-11-25', '09:40:00'),
(682, '34', '2018-11-24', '09:50:00'),
(683, '30', '2018-11-23', '10:00:00');

ALTER TABLE

ALTER TABLE `tbl_live_match_score`
  ADD PRIMARY KEY (`live_match_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_live_match_score`
--
ALTER TABLE `tbl_live_match_score`
  MODIFY `live_match_id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=484;

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is Line Chart in PHP with MySql using Google API Tutorial And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.