Avatar billede hoejgaard Juniormester
08. januar 2015 - 23:29 Der er 30 kommentarer og
1 løsning

Hvordan lave grafer, blokdiagram og lign på webside

Hej,
Jeg skal have lavet en webside i PHP og MySQL samt HTML, hvor brugere kan indtaste nogle værdier, som så skal afbildes i kurver, diagrammer og lign på websiden. Hvordan får jeg omsat disse værdier fra en database til disse kurver og diagrammer på websiden ?
Kan godt programmere i PHP, men ved ikke lige hvordan jeg får tal omsat til kurver og diagrammer på websiden ?

Håber i kan hjælpe.
Avatar billede erikjacobsen Ekspert
09. januar 2015 - 00:25 #1
Du kan overveje https://developers.google.com/chart/ - ingen decideret programmering, blot angivelse af værdier og parametre.
Avatar billede arne_v Ekspert
09. januar 2015 - 03:06 #2
Eller er der masser af PHP libs til det.

Google finder bl.a.:

http://jpgraph.net/

http://phpchart.org/

http://pchart.sourceforge.net/

http://www.pchart.net/
Avatar billede olsensweb.dk Ekspert
09. januar 2015 - 03:26 #3
js
http://www.rgraph.net/
http://www.highcharts.com/download kræver jquery

php
http://www.phpclasses.org/package/2735-PHP-Render-bar-and-line-charts-as-images.html (kræver medlemsskab, hvilke er gratis)

jeg vil vælge et js lib, til det da det belaster serveren mindst.
så enten google som erikjacobsen forslår, eller en af ovenstående js lib

har ikke lige leget med dem som arne_v forslår, men gode erfaringer med de 3 js lib
Avatar billede C:\> Juniormester
09. januar 2015 - 09:42 #4
Prøv at tage et kig på D3 - https://github.com/mbostock/d3/wiki/Tutorials
Avatar billede hoejgaard Juniormester
09. januar 2015 - 10:53 #5
Taak for alle jeres råd :-)
Det der js lib, eks det øverste som ronols henviser til, bruger det parametre fra en database eller hvordan ?
Avatar billede olsensweb.dk Ekspert
09. januar 2015 - 12:14 #6
de behøver ikke bruge data fra en database, men det vil oplagt at hente data fra en database, og skrive data i js

kig på alle demoer her http://www.rgraph.net/demos/ alle rene html filer
kig på alle demoer her http://www.highcharts.com/demo

kig evt på dette spm http://www.eksperten.dk/spm/957790
eks ligger her http://experten.olsensweb.dk/957790.zip
Avatar billede hoejgaard Juniormester
10. januar 2015 - 12:06 #7
Ronols,
Det er jeg spændt på at afprøve senere idag dit eks.
Håber det er noget med at overføre data fra en database som kan genererer en graf el. lign på websiden :-)
Avatar billede olsensweb.dk Ekspert
10. januar 2015 - 13:06 #8
jeg anvender ikke direkte databaser i de 2 eksempler, MEN det er meget nemt at rette, kig i request.php erstat switch med dit sql udtræk.

så der serverside kun generares de rå data, der retuneres til clienten i json format, så må clienten formatere og presentere.
Avatar billede hoejgaard Juniormester
10. januar 2015 - 13:31 #9
ronols,
nu er jeg ikke så god til at gennemskue de funktioner, så kan du ikke kort skrive hvordan  sql indsættes i request.php istedet for switch ? :-)
Avatar billede olsensweb.dk Ekspert
10. januar 2015 - 16:01 #10
en hurtig omskrivning af graph

database test

--
-- Database: `test`
--

-- --------------------------------------------------------

--
-- Struktur-dump for tabellen `tbl_udbytte`
--

CREATE TABLE IF NOT EXISTS `tbl_udbytte` (
  `month` varchar(5) COLLATE utf8_danish_ci NOT NULL COMMENT 'kunne god være et tal 1-12',
  `value` int(11) NOT NULL,
  `year` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_danish_ci;

--
-- Data dump for tabellen `tbl_udbytte`
--

INSERT INTO `tbl_udbytte` (`month`, `value`, `year`) VALUES
('Jan', 12, 2010),
('Feb', 13, 2010),
('Mar', 16, 2010),
('Apr', 15, 2010),
('May', 16, 2010),
('Jun', 19, 2010),
('Jul', 19, 2010),
('Aug', 12, 2010),
('Sep', 33, 2010),
('Oct', 16, 2010),
('Nov', 13, 2010),
('Dec', 24, 2010),
('Jan', 12, 2011),
('Feb', 13, 2011),
('Mar', 16, 2011),
('Apr', 15, 2011),
('May', 16, 2011),
('Jun', 19, 2011),
('Jul', 19, 2011),
('Aug', 12, 2011),
('Sep', 3, 2011),
('Oct', 16, 2011),
('Nov', 13, 2011),
('Dec', 24, 2011);


hele request.php ser sådan ud

<?php   
$id = $_POST['id'];   
// $id = $_GET['id'];   
$info=array();
$conn = new PDO("mysql:host=localhost;dbname=test;charset=utf8", "root", "");
$sql = "SELECT *  FROM tbl_udbytte WHERE year = $id";
$rs = $conn->query($sql);
while ($obj = $rs->fetch(PDO::FETCH_OBJ)) {
    $info[] = array('month'=>$obj->month, 'value'=>$obj->value);
}
echo json_encode($info);
?>


OBS: value vil være en string, og ikke en int!!! så der skal laves en lille rettelse i index filen.
ln 43
ar_value[j] = aTmp[j]['value'];
skal passes som int
ar_value[j] = parseInt(aTmp[j]['value']);
Avatar billede hoejgaard Juniormester
11. januar 2015 - 22:54 #11
fedt, mange tak !
Det vil jeg kigge på og se om jeg kan få til at virke :-)
Vender lige tilbage når jeg har afprøvet det.
Avatar billede hoejgaard Juniormester
12. februar 2015 - 04:35 #12
Hej ronols :-)
Nu har jeg endelig tid til at kigge på det :-)

Jeg har lidt svært ved at gennemskue hvordan filerne her: http://experten.olsensweb.dk/957790.zip ,skal placeres på serveren ?
Og hvad jeg skal downloade fra highcharts.com for at få det til at virke sammen ?

Håber du kan hjælpe :-)
Avatar billede olsensweb.dk Ekspert
12. februar 2015 - 13:44 #13
>Jeg har lidt svært ved at gennemskue hvordan filerne her:
bare opload folderen Highcharts til et sted på din webserver, kald evt folderen noget andet

>Og hvad jeg skal downloade fra highcharts.com for at få det til at virke sammen ?
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="exporting.js"></script> 
ligger i code.highcharts.com/zips/Highcharts-4.0.4.zip
under
js\highcharts.js
js\modules\exporting.js

alterneativ kan de hentes fra deres CDN http://code.highcharts.com/
http://code.highcharts.com/highcharts.js
http://code.highcharts.com/modules/exporting.js

du opnår den bedste performance ved selv at hoste js filerne

du får dog ikke de seneste opdateringer, hvilke bevirker der ikke sker uforudsete ting med din app, iforhold til din test
Avatar billede hoejgaard Juniormester
13. februar 2015 - 00:03 #14
Hej igen,
Jeg har nu placeret highcharts.js og exporting.js  i roden på mit domæne, og Higcharts folderen også i roden.
Det eneste der sker når jeg kører index.php er at der står: Click 2010 Click 2011
Når jeg klikker på dem sker der ingenting ?
Noget jeg har gjort forkert ?
Avatar billede hoejgaard Juniormester
13. februar 2015 - 00:19 #15
nu placerede jeg så i stedet highcharts.js og exporting.js 
i samme mappe som index.php og request.php, men så tegner den:
var startgraph = '[{"name":"Year 2010","data":[170,1,35,203,2]},{"name":"Year 2011","data":[107,31,35,23,24]},{"name":"Year 2012","data":[107,21,635,20,12]}]';

og ikke som den skulle, det i tabellen tbl_udbytte ?
Avatar billede olsensweb.dk Ekspert
13. februar 2015 - 14:21 #16
jeg bliver lidt forviret, snakker vi rgraph eksemplet eller Highcharts eksemplet ??

de 2 eksempler har intet med hinnanden at gøre

til rgraph eksemplet:
har du hentet js filerne til rgraph ??
de hentes her http://www.rgraph.net/download#stable
læs evt ændringer http://www.rgraph.net/docs/backwards-compatibility.html

OK man har tilsyneladende opdateret RGraph.bar.js siden 2012 så den nu kræver jquery :(
den aktuelle ver er fra version: 2014-11-15, og den vertion jeg lavede den til er fra 2012-01-13
så omdøber du bare index_jq.php til index.php
og husker rettelsen med parseint, hvis du henter fra databasen.

til Highcharts eksemplet:
>men så tegner den:
>var startgraph = '[{"name":"Year 2010","data":[170,1,35,203,2]},{"name":"Year 2011","data":[107,31,35,23,24]},{"name":"Year 2012","data":[107,21,635,20,12]}]';
>og ikke som den skulle, det i tabellen tbl_udbytte ?
det er jo også det den skal gøre, det er kun rgraph eksemplet der anvender databasen.
jeg har lavet en database til  Highcharts eksemplet, ligger i den opdaterede zip fil nedenfor

----------------------------------

jeg har lagt en komplet udgave af bægge eksempler, med alle filer, der er nødvendige
http://experten.olsensweb.dk/graph.zip
http://experten.olsensweb.dk/highcharts.zip
husk at rette db setting i request.php
Avatar billede hoejgaard Juniormester
21. februar 2015 - 23:56 #17
Jeg har nu forsøgt med Highcharts eksemplet.
Jeg har benyttet de filer du har i denne mappe:
http://experten.olsensweb.dk/highcharts.zip
og har rettet db setting i request.php
Exporting.js og Highcharts.js har jeg placeret i samme mappe som ovenstående filer.

Når jeg så kører index.php filen, så kommer dette op på skærmen:
Click 1800 Click 1900 Click 2008 Click 2010

Når jeg så klikker på de enkelte links sker der ikke noget ?
Jeg ved ikke rigtig hvad jeg gør forkert her ?
Håber du kan hjælpe.
Avatar billede hoejgaard Juniormester
22. februar 2015 - 05:48 #18
Nå nu fik jeg det til at virke..havde fået skrevet mine db setting forkert...

Jeg har kigget lidt på de forskellig muligheder for kurver og det vil passe fint til mit formål med en af disse 3:
 
http://www.rgraph.net/demos/line-basic.html
http://www.rgraph.net/demos/line-html-key.html
eller denne:

http://www.highcharts.com/demo/line-labels

Jeg har kigget på dem, men kan ikke helt gennemskue hvad jeg skal ændre i de eksempler du har givet i #16 for at komme frem til disse 3 ?

Og hvad er egentlig bedst at benytte rgraph eller higchchart ?
Avatar billede hoejgaard Juniormester
22. februar 2015 - 05:55 #19
Det kunne i øvrigt være super godt, hvis kurverne kommer frem med det samme man kalder siden frem, i stedet for at man skal klikke på et link for at få kurven frem.. er det simpelt at lave om ? 
Med  de linier jeg skal lave, har jeg ikke behov for flere årstals link at vælge imellem, som i dine eksempler.
Avatar billede olsensweb.dk Ekspert
22. februar 2015 - 13:54 #20
>Og hvad er egentlig bedst at benytte rgraph eller higchchart ?
det mest simple er rgraph
en hurtig omskrivning af deres line-html-key.html eksempel, så den anvender en database
database
--
-- Database: `test`
--
-- --------------------------------------------------------
--
-- Struktur-dump for tabellen `tmp`
--
CREATE TABLE IF NOT EXISTS `tmp` (
  `day_1` int(11) NOT NULL,
  `day_2` int(11) NOT NULL,
  `day_3` int(11) NOT NULL,
  `day_4` int(11) NOT NULL,
  `day_5` int(11) NOT NULL,
  `day_6` int(11) NOT NULL,
  `day_7` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_danish_ci;

--
-- Data dump for tabellen `tmp`
--

INSERT INTO `tmp` (`day_1`, `day_2`, `day_3`, `day_4`, `day_5`, `day_6`, `day_7`) VALUES
(5, 4, 1, 6, 8, 5, 3),
(23, 26, 24, 21, 24, 25, 26);


php file
<?php
$conn = new PDO("mysql:host=localhost;dbname=test;charset=utf8", "root", "");
$sql = "SELECT *  FROM tmp";
$rs = $conn->query($sql);
while ($obj = $rs->fetch(PDO::FETCH_OBJ)) {
    $info[] = array((int) $obj->day_1, (int) $obj->day_2, (int) $obj->day_3, (int) $obj->day_4, (int) $obj->day_5, (int) $obj->day_6, (int) $obj->day_7);
}
?>

<!DOCTYPE html>
<!-- saved from url=(0046)http://www.rgraph.net/demos/line-html-key.html -->
<html>
    <head>
        <meta charset="utf-8">
        <script src="RGraph.common.core.js"></script>
        <script src="RGraph.common.key.js"></script>
        <script src="RGraph.line.js"></script>
        <script src="jquery.min.js"></script>
        <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
        <TITLE>A Line chart</TITLE>
    </head>
    <body>
        <H1>A line chart with an html key</H1>
        <div style="position: relative;"><canvas width="600" height="250" id="cvs">[No canvas support]</canvas>
            <div id="myKey" style="left: 600px; top: 25px; position: absolute;"></div></div>
        <script>
            $(document).ready(function () {
                var line = new RGraph.Line({
                    id: 'cvs',
                    data: <?php echo json_encode($info); ?>,
                    options: {
                        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
                    }
                }).draw();
            })
        </script>
    </body>
</html>
Avatar billede hoejgaard Juniormester
27. februar 2015 - 23:32 #21
Ser godt ud, men der kommer kun dette op på skærmen ?? :
"A line chart with an html key"

Jeg har indsat det hele du har skrevet under "php file" i en index.php fil. Har også lavet tabellen i databasen.

Kan ikke lige gennemskue hvorfor der ikke kommer en linie frem ?
Avatar billede hoejgaard Juniormester
28. februar 2015 - 02:43 #22
Nu satte jeg det her ind:
<style type="text/css">
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
og så kan jeg se de to grafer.

Er der mulighed for at jeg her kan hente labels fra databasen i stedet og sætte ind her  ?? :

options: {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
                    }
Avatar billede hoejgaard Juniormester
28. februar 2015 - 02:56 #23
Og det ville være helt perfekt hvis antallet af labels på x-aksen kunne være variabelt, så antallet ikke nødvendigvis er 7 som det er her. Er det muligt ? :-)
Avatar billede hoejgaard Juniormester
04. marts 2015 - 19:25 #24
ronols
Er det noget du kan hjælpe med #22 og #23 ? ;.)
Avatar billede olsensweb.dk Ekspert
04. marts 2015 - 20:35 #25
>Er der mulighed for at jeg her kan hente labels fra databasen i stedet og sætte ind her  ?? :
det er bare at ligge en dimention mere på info arrayet.
$info['headline']=array(inholdt evt via et sql udtræk);
$info['data'][]=array(sql udtræk);
det eneste man skal være opmærksom på at at antallet at elementer i alle rækker skal være ens, så er der 7 elementer i headline arrayet, skal der også være 7 elementer i hver række i data arrayet


<?php
$info=array();
$info['headline']=array("mandag","tirsdag","onsdag","torsdag","fredag","lørdag","søndag");
$conn = new PDO("mysql:host=localhost;dbname=test;charset=utf8", "root", "");
$sql = "SELECT *  FROM tmp";
$rs = $conn->query($sql);
while ($obj = $rs->fetch(PDO::FETCH_OBJ)) {
    $info['data'][] = array((int) $obj->day_1, (int) $obj->day_2, (int) $obj->day_3, (int) $obj->day_4, (int) $obj->day_5, (int) $obj->day_6, (int) $obj->day_7);
}
?>



<script>
    $(document).ready(function () {
        var line = new RGraph.Line({
            id: 'cvs',
            data: <?php echo json_encode($info['data']); ?>,
            options: {
                labels: <?php echo json_encode($info['headline']); ?>
            }
        }).draw();
    })
</script>
Avatar billede hoejgaard Juniormester
04. marts 2015 - 21:59 #26
mange tak ronols :-)

Jeg kan ikke helt se hvordan  jeg her:
$info['headline']=array("mandag","tirsdag","onsdag","torsdag","fredag","lørdag","søndag");
får lavet et sql udtræk hvor der skal kunne være et variabelt antal elementer ( ikke nøvendigvis 7 som her i eks)

her:
$info['data'][] = array((int) $obj->day_1, (int) $obj->day_2, (int) $obj->day_3, (int) $obj->day_4, (int) $obj->day_5, (int) $obj->day_6, (int) $obj->day_7);

vil det jo også skulle være et variabelt antal....
Avatar billede olsensweb.dk Ekspert
04. marts 2015 - 22:29 #27
prøv dette

<?php
$info=array();
$info['headline']=array("mandag","torsdag","fredag","søndag");
$conn = new PDO("mysql:host=localhost;dbname=test;charset=utf8", "root", "");
$sql = "SELECT *  FROM tmp";
$rs = $conn->query($sql);
while ($obj = $rs->fetch(PDO::FETCH_OBJ)) {
    $info['data'][] = array((int) $obj->day_1, (int) $obj->day_4, (int) $obj->day_5, (int) $obj->day_7);
}
?>
Avatar billede hoejgaard Juniormester
04. marts 2015 - 23:56 #28
Tak.
Det jeg vil gøre det er at en bruger taster n antal datoer ind og tilhørende n antal værdier ind som her:

INSERT INTO `tmp` (`dato_n1`, `dato_n2`, `dato_n3`, `dato_n4`,`dato_n.` `dato_nn`) VALUES(n1,n2,n2,n3,n4,n.,nn),(y1, y2,y3,y4,y.,yn);

derfor skal der vel her:
$info['headline']=array("mandag","torsdag","fredag","søndag");

ikke være 4 fastsatte variable men noget med et variabelt antal datoer der indlæses ??


og her :

while ($obj = $rs->fetch(PDO::FETCH_OBJ)) {    $info['data'][] = array((int) $obj->day_1, (int) $obj->day_4, (int) $obj->day_5, (int) $obj->day_7);}

skal day1 day4 osv. vel også indlæses fra database som et variabelt antal ??
Avatar billede hoejgaard Juniormester
05. marts 2015 - 21:44 #29
Ronols
Eller er der noget jeg har misforstået i forhold til din kommentar i #27 i forhold til om det gør det jeg forklarer i #28 ? :-)
Avatar billede olsensweb.dk Ekspert
06. marts 2015 - 10:51 #30
>ikke være 4 fastsatte variable men noget med et variabelt antal datoer der indlæses ??
JA, indlæs fra databasen

skal day1 day4 osv. vel også indlæses fra database som et variabelt antal ??
JA

det eneste der er at forstå er at antallet af data i de 2 array's skal være ens.
dvs. du skal generarer dine labels ud fra en SQL

din eneste opgave er at lave en database
lav 1-2 SQL kald der ligger data i headline og data arrayet, på baggrund af den database du har lavet.

jeg syntes jeg har brugt mer end rigeligt tid på denne tråd, opret evt et nyt spørgsmål, så andre kan bidrage, jeg hopper af her.
Avatar billede hoejgaard Juniormester
06. marts 2015 - 18:26 #31
Ronols
Ja og mange tak for din fine hjælp ! ;-)
Forstår det udmærket, mit problem er bare at jeg ikke ved hvordan de variable skal skrives/se ud i:
array("mandag","torsdag","fredag","søndag");

og i

array((int) $obj->day_1, (int) $obj->day_2, (int) $obj->day_3, (int) $obj->day_4, (int) $obj->day_5, (int) $obj->day_6, (int) $obj->day_7);

Men vil oprette et nyt spørgsmål.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester