How can I put in my Database in a Google Line chart?

Question

I have this database with this table that I want to put in on my .jsp page that I coded in basic HTML. The project is in Spring mvc.

CREATE TABLE `status` (
  `idStatus` int(11) NOT NULL AUTO_INCREMENT,
  `timeStamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `value` varchar(45) NOT NULL,
  `unit` varchar(45) NOT NULL,
  `idCategory` int(11) NOT NULL,
  PRIMARY KEY (`idStatus`),
  UNIQUE KEY `idStatus_UNIQUE` (`idStatus`),
  KEY `timeStampIndex` (`timeStamp`),
  KEY `statusTocategory_idx` (`idCategory`),
  CONSTRAINT `statusTocategory` FOREIGN KEY (`idCategory`) REFERENCES `category` (`idCategory`) ON DELETE NO ACTION ON UPDATE NO ACTION
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8$$

So far I can get the basic google line chart on the webpage, but not with the values. I want it o show the Value based on time.

This is the code I have so far:

<head>



<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {
        packages : [ "corechart" ]
    });
    google.setOnLoadCallback(drawChart);
    function drawChart(serverData) {

        var serverData = [ [ 'Year', 'Sales', 'Expenses' ],
                [ '2004', 1000, 400 ], [ '2005', 1170, 460 ],
                [ '2006', 660, 1120 ], [ '2007', 1030, 540 ] ];
        var data = google.visualization.arrayToDataTable(serverData);

        var options = {
            title : 'Company Performance'
        };

        var chart = new google.visualization.LineChart(document
                .getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>

</head>
<body>

How can I replace the Serverdata inputs with Value over time? (I don't have any knowledge in php) The google code is in javascript, but does it work to merge it with pure java or php code? Please help!

score 0 · Answer 1 · answered Jun 14 '13 at 21:13

0

What you're attempting is quite common, and I used AJAX the two times that I had to do this (both using python and php).

http://api.jquery.com/jQuery.ajax/

You'll need to do a bit of php programming to accomplish this. A quick example would be writing an AJAX variable that called url.com/serverdata.php and set the output equal to your serverData variable.

The server.php file just needs to output a JSON encoded variable something like:

<?php
$arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);

echo json_encode($arr);
?>

Where $arr would be your array after pulling data from the database. Someone else might respond with the exact code, but this should get you started since php programming is definitely required.

http://www.w3schools.com/php/php_mysql_intro.asp

Also reference that w3 tutorial on pulling data from mysql using php.

answered Jun 14 '13 at 21:13

kevando

275
4
17

Okay thanks, Im gonna start learning some php then... But still if somone would help me with the exact code that would save me a lot of time and would be very grateful! – benskiiii Jun 15 '13 at 15:46
What you're trying to do is rather common, so it would not be very useful to re-post everything. Below are two links to quality introductions to this with specific code: http://www.w3schools.com/php/php_ajax_database.asp http://stackoverflow.com/questions/5298401/basic-php-and-ajax – kevando Jun 17 '13 at 17:18
Both your links uses PHP, I've read that there is a way with just javascript/html and thats why I posted it here. Since I dont know how to use php, I wanted some help. – benskiiii Jun 18 '13 at 08:16

How can I put in my Database in a Google Line chart?

1 Answers1