Webwereld

jQuery Highcharts in combinatie met PHP/MySQL

Gestart doorKjeld9 reacties1.063 weergaven
Log in om mee te praten

10 berichten · pagina 1 van 1

Kjeld

Lid · Topicstarter

Berichten
6.201
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
//EDIT!!!!

Ik heb het nu zo ver dat ik de data van 1 jaar in mijn grafiek krijg..
Hoe moet ik mijn query/php-script zo ombouwen dat ik van alle records in de data, het aantal records per maand krijg, maar van ieder jaar een andere kleur staaf? yummie
//

Hoi!

Ik ben weer een beetje aan het kloten..

Door middel van deze query (met behulp van Luuk), haal ik het aantal berichten per maand op in een bepaald jaar.

[COLOR= #0000BB]<?php

  $query[/COLOR] [COLOR= #007700]=[/COLOR] [URL="http://www.php.net/mysql_query"]mysql_query[/URL][COLOR= #007700]([/COLOR][COLOR= #DD0000]"
    SELECT
        COUNT(id) aantal,
        MONTH(datum) maand
    FROM
        gastenboek
    WHERE
        YEAR(datum) = 2011
    GROUP BY
        MONTH(datum)
    "[/COLOR][COLOR= #007700])[/COLOR]or [URL="http://www.php.net/die"]die[/URL][COLOR= #007700]([/COLOR][URL="http://www.php.net/mysql_error"]mysql_error[/URL][COLOR= #007700]());[/COLOR]
  
    [URL="http://www.php.net/if"]if[/URL][COLOR= #007700]([/COLOR][URL="http://www.php.net/mysql_num_rows"]mysql_num_rows[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$query[/COLOR][COLOR= #007700]))
    {[/COLOR]
        [COLOR= #0000BB]$data[/COLOR] [COLOR= #007700]=[/COLOR] [URL="http://www.php.net/array"]array[/URL][COLOR= #007700]();[/COLOR]
        [URL="http://www.php.net/while"]while[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$maand[/COLOR] [COLOR= #007700]=[/COLOR] [URL="http://www.php.net/mysql_fetch_assoc"]mysql_fetch_assoc[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$query[/COLOR][COLOR= #007700]))
        {[/COLOR]

            [COLOR= #0000BB]$maandnaam[/COLOR] [COLOR= #007700]=[/COLOR] [URL="http://www.php.net/array"]array[/URL][COLOR= #007700]([/COLOR][COLOR= #DD0000]Januari[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Februari[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Maart[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]April[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Mei[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Juni[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Julli[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Augustus[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]September[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Oktober[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]November[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]December[/COLOR][COLOR= #007700]);[/COLOR]
            [COLOR= #0000BB]$maandnummer[/COLOR] [COLOR= #007700]= ([/COLOR][COLOR= #0000BB]$maand[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]maand[/COLOR][COLOR= #007700]] -[/COLOR] [COLOR= #0000BB]1[/COLOR][COLOR= #007700]);[/COLOR]

            [URL="http://www.php.net/echo"]echo[/URL] [COLOR= #0000BB]$maandnaam[/COLOR][COLOR= #007700][[/COLOR][COLOR= #0000BB]$maandnummer[/COLOR][COLOR= #007700]] .[/COLOR] [COLOR= #DD0000]: [/COLOR] [COLOR= #007700].[/COLOR] [COLOR= #0000BB]$maand[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]aantal[/COLOR][COLOR= #007700]] .[/COLOR] [COLOR= #DD0000]<br />[/COLOR][COLOR= #007700];[/COLOR]
            [COLOR= #0000BB]$data[/COLOR][COLOR= #007700][] =[/COLOR] [COLOR= #0000BB]$maand[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]aantal[/COLOR][COLOR= #007700]];
        
        }
    
    }[/COLOR]
    
?>


Nu wil ik deze echter verwerken in een mooi staafdiagram met behulp van Highcharts.
Ik heb echter nog niet echt een idee hoe ik dit aan moet gaan pakken..

Met deze javascript-code wordt het diagram aangemaakt:

<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {
                renderTo: container_highchart,
                type: column
            },

            title: {
                text: Gastenboekberichten 2011
            },

            subtitle: {
                text: Bron: www.derampestampers.nl
            },

            xAxis: {
                categories: [                                
                    Jan,
                    Feb,
                    Mar,
                    Apr,
                    May,
                    Jun,
                    Jul,
                    Aug,
                    Sep,
                    Oct,
                    Nov,
                    Dec
                ]
            },

            yAxis: {
                min: 0,
                title: {
                    text: Aantal berichten
                }
            },

            legend: {
                layout: vertical,
                backgroundColor: #FFFFFF,
                align: left,
                verticalAlign: top,
                x: 100,
                y: 70,
                floating: true,
                shadow: true
            },

            tooltip: {

                formatter: function() {

                    return +

                        this.x +: + this.y + mm;

                }

            },

            plotOptions: {

                column: {

                    pointPadding: 0.2,

                    borderWidth: 0

                }

            },

                series: [{

                name: 2008,

                data: [[COLOR= #0000BB]<?php[/COLOR] [URL="http://www.php.net/echo"]echo[/URL] [URL="http://www.php.net/join"]join[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$data[/COLOR][COLOR= #007700],[/COLOR] [COLOR= #DD0000],[/COLOR][COLOR= #007700])[/COLOR] ?>]

            }]

        });

    });
    
});
</script>


Wat ik in principe wil bereiken is:

- De maanden moeten automatisch worden ingevuld
- De waardes die bij die maand horen moeten automatisch worden ingevuld

Ik wil het per jaar kunnen selecteren, maar alle jaren bij elkaar zou ook mooi zijn, zodat ik kan zien in welk jaar, in welke maand, het gastenboek het meest actief is wink
Kan iemand me een hele grote schop in de goede richting geven? hypocrite
Danku!
0
Rogier

Lid

Berichten
6.485
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Highstock (zelfde site als highcharts) kan je ook gebruiken. Dan gebeurt scalen automatisch en hoef je alleen json data in te vullen.
0
Kjeld

Lid · Topicstarter

Berichten
6.201
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Ik heb het nu werkend door middel van een stukje php dat ik in de FAQ heb gevonden, ik ben echter nog op zoek naar de juiste query om dan de juiste data in mijn grafiek te krijgen..
0
Lennard

Lid

Berichten
35.796
Reputatie
1
Punten
0,00
Lid sinds
Laatst gezien
Queries biggrin pompom
Wat wil je als output hebben?
0
Jeffreyy

Lid

Berichten
6.144
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Je join functie moet andersom, toch?

[COLOR= #0000BB]<?php[/COLOR]
[URL="http://www.php.net/join"]join[/URL][COLOR= #007700]([/COLOR][COLOR= #DD0000],[/COLOR][COLOR= #007700],[/COLOR] [COLOR= #0000BB]$data[/COLOR][COLOR= #007700]);[/COLOR]
?>
0
Luukvdo

Lid

Berichten
18.482
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Join functie moet andersom inderdaad. Was de output in je broncode wel goed?
0
Kjeld

Lid · Topicstarter

Berichten
6.201
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Output in broncode is dit: data: [118,70,61,74,71,50,33,14,21,31,72,89]

Als output wil ik graag, zoals ik nu voor 2011 heb:

data: [118,70,61,74,71,50,33,14,21,31,72,89] <-- die waardes

Op dit moment kan ik zelf een jaartal invullen, ik zou graag echter hebben dat ik alle jaartallen die in de database voorkomen worden weergegeven in de grafiek..

Ik heb nu per maand een balk in de grafiek, die het aantal weergeeft..
Dit wil ik uiteraard uitbreiden met:

Blauwe balk: 2010
Rode balk: 2011

en zo voor ieder jaar dat voorkomt in de database smile
Link met voorbeeldje via pm verkrijgbaar!
0
Daoloth

Lid

Berichten
3.283
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Ik zou het op de volgende manier oplossen: 

[COLOR= #0000BB]<?php
$query[/COLOR] [COLOR= #007700]=[/COLOR] [URL="http://www.php.net/mysql_query"]mysql_query[/URL][COLOR= #007700]([/COLOR][COLOR= #DD0000]"
                        SELECT
                            COUNT(1) aantal,
                            YEAR(datum) jaar
                            MONTH(datum) maand
                        FROM
                            gastenboek
                        GROUP BY
                            YEAR(datum),
                            MONTH(datum)
                        ORDER by datum
                    "[/COLOR][COLOR= #007700])[/COLOR]or [URL="http://www.php.net/die"]die[/URL][COLOR= #007700]([/COLOR][URL="http://www.php.net/mysql_error"]mysql_error[/URL][COLOR= #007700]());[/COLOR]
  
[URL="http://www.php.net/if"]if[/URL][COLOR= #007700]([/COLOR][URL="http://www.php.net/mysql_num_rows"]mysql_num_rows[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$query[/COLOR][COLOR= #007700])){[/COLOR]

    [COLOR= #0000BB]$data[/COLOR] [COLOR= #007700]=[/COLOR] [URL="http://www.php.net/array"]array[/URL][COLOR= #007700]();[/COLOR]
    
    [URL="http://www.php.net/while"]while[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$maand[/COLOR] [COLOR= #007700]=[/COLOR] [URL="http://www.php.net/mysql_fetch_assoc"]mysql_fetch_assoc[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$query[/COLOR][COLOR= #007700])){[/COLOR]

        [COLOR= #0000BB]$maandnaam[/COLOR] [COLOR= #007700]=[/COLOR] [URL="http://www.php.net/array"]array[/URL][COLOR= #007700]([/COLOR][COLOR= #DD0000]Januari[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Februari[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Maart[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]April[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Mei[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Juni[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Julli[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Augustus[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]September[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]Oktober[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]November[/COLOR][COLOR= #007700],[/COLOR][COLOR= #DD0000]December[/COLOR][COLOR= #007700]);[/COLOR]
        [COLOR= #0000BB]$maandnummer[/COLOR] [COLOR= #007700]= ([/COLOR][COLOR= #0000BB]$maand[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]maand[/COLOR][COLOR= #007700]] -[/COLOR] [COLOR= #0000BB]1[/COLOR][COLOR= #007700]);[/COLOR]

        [URL="http://www.php.net/echo"]echo[/URL] [COLOR= #0000BB]$maandnaam[/COLOR][COLOR= #007700][[/COLOR][COLOR= #0000BB]$maandnummer[/COLOR][COLOR= #007700]] .[/COLOR] [COLOR= #DD0000] [/COLOR][COLOR= #007700].[/COLOR][COLOR= #0000BB]$maand[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]jaar[/COLOR][COLOR= #007700]].[/COLOR][COLOR= #DD0000]: [/COLOR] [COLOR= #007700].[/COLOR] [COLOR= #0000BB]$maand[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]aantal[/COLOR][COLOR= #007700]] .[/COLOR] [COLOR= #DD0000]<br />[/COLOR][COLOR= #007700];[/COLOR]
        
        [COLOR= #0000BB]$data[/COLOR][COLOR= #007700][[/COLOR][COLOR= #0000BB]$maand[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]jaar[/COLOR][COLOR= #007700]]][[/COLOR][COLOR= #0000BB]$maand[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]maand[/COLOR][COLOR= #007700]]] =[/COLOR] [COLOR= #0000BB]$maand[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]aantal[/COLOR][COLOR= #007700]];
        
    }
    
}[/COLOR]
?>
<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {
                renderTo: container_highchart,
                type: column
            },

            title: {
                text: Gastenboekberichten 2011
            },

            subtitle: {
                text: Bron: www.derampestampers.nl
            },

            xAxis: {
                categories: [                                
                    Jan,
                    Feb,
                    Mar,
                    Apr,
                    May,
                    Jun,
                    Jul,
                    Aug,
                    Sep,
                    Oct,
                    Nov,
                    Dec
                ]
            },

            yAxis: {
                min: 0,
                title: {
                    text: Aantal berichten
                }
            },

            legend: {
                layout: vertical,
                backgroundColor: #FFFFFF,
                align: left,
                verticalAlign: top,
                x: 100,
                y: 70,
                floating: true,
                shadow: true
            },

            tooltip: {

                formatter: function() {

                    return +

                        this.x +: + this.y + mm;

                }

            },

            plotOptions: {

                column: {

                    pointPadding: 0.2,

                    borderWidth: 0

                }

            },

            series: [[COLOR= #0000BB]<?php[/COLOR] 

    [URL="http://www.php.net/foreach"]foreach[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$data[/COLOR] [COLOR= #007700]AS[/COLOR] [COLOR= #0000BB]$jaar[/COLOR] [COLOR= #007700]=>[/COLOR] [COLOR= #0000BB]$maanden[/COLOR][COLOR= #007700]){[/COLOR]

        [URL="http://www.php.net/echo"]echo[/URL] [COLOR= #DD0000]"{name: "[/COLOR][COLOR= #007700].[/COLOR][COLOR= #0000BB]$jaar[/COLOR][COLOR= #007700].[/COLOR][COLOR= #DD0000]", "[/COLOR][COLOR= #007700];[/COLOR]
        
        [URL="http://www.php.net/echo"]echo[/URL] [COLOR= #DD0000]data: [[/COLOR][COLOR= #007700];[/COLOR]
        
        [URL="http://www.php.net/for"]for[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$i[/COLOR] [COLOR= #007700]=[/COLOR] [COLOR= #0000BB]1[/COLOR][COLOR= #007700];[/COLOR] [COLOR= #0000BB]$i[/COLOR] [COLOR= #007700]<=[/COLOR] [COLOR= #0000BB]12[/COLOR][COLOR= #007700];[/COLOR] [COLOR= #0000BB]$i[/COLOR][COLOR= #007700]++){[/COLOR]
            
            [URL="http://www.php.net/echo"]echo[/URL] [COLOR= #007700]([/COLOR][URL="http://www.php.net/array_key_exists"]array_key_exists[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$i[/COLOR][COLOR= #007700],[/COLOR] [COLOR= #0000BB]$maanden[/COLOR][COLOR= #007700]) ?[/COLOR] [COLOR= #0000BB]$maanden[/COLOR][COLOR= #007700][[/COLOR][COLOR= #0000BB]$i[/COLOR][COLOR= #007700]] :[/COLOR] [COLOR= #0000BB]0[/COLOR][COLOR= #007700]).([/COLOR][COLOR= #0000BB]$i[/COLOR] [COLOR= #007700]!=[/COLOR] [COLOR= #0000BB]12[/COLOR] [COLOR= #007700]?[/COLOR] [COLOR= #DD0000],[/COLOR] [COLOR= #007700]:[/COLOR] [COLOR= #DD0000][/COLOR][COLOR= #007700]);
            
        }[/COLOR]
        
        [URL="http://www.php.net/echo"]echo[/URL] [COLOR= #DD0000]]}[/COLOR][COLOR= #007700].([/COLOR][COLOR= #0000BB]$jaar[/COLOR] [COLOR= #007700]!=[/COLOR] [URL="http://www.php.net/max"]max[/URL][COLOR= #007700]([/COLOR][URL="http://www.php.net/array_keys"]array_keys[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$data[/COLOR][COLOR= #007700])) ?[/COLOR] [COLOR= #DD0000], [/COLOR] [COLOR= #007700]:[/COLOR] [COLOR= #DD0000][/COLOR][COLOR= #007700]);

    }[/COLOR]
    
?>]

        });

    });
    
});
</script>


Kijk maar of het werkt, succes ermee!
0
Kjeld

Lid · Topicstarter

Berichten
6.201
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Yay, bedankt Marijn!

Met een klein beetje aanpassen heb ik precies gekregen zoals ik wilde smile
0
Daoloth

Lid

Berichten
3.283
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Graag gedaan! wink
0

Jouw reactie

Deel je idee, stel een vraag of help een ander verder.

Editor laden…

Praat mee met de One2xs-community.

Inloggen om te reageren