Jump to content
Kn0xx

ChartJS - PHP-MySQL-HTML - Dropdownlist

Recommended Posts

Kn0xx

Boa Tarde!

o meu know-how nestas coisas é bastante limitado.

Ando a vários dias a batalhar aqui num projecto de Dashboard com o uso do ChartJS. 
Até consigo,ir buscar os dados da BD MySQL -> PHP-> JSON e apresentar o grafico. até aqui tudo fantastico.

A parte que estou a batalhar é que pretendia um dropdownlist no HTML que fizesse o ChartJS apresentar outros dados. neste caso por exemplo apenas o mês (os dados têm data).

 

Tentei usar este video como refencia, mas também não ajudou muito.

https://www.youtube.com/embed/MCieBWwddEY?feature=oembed

 

 

Alguma dica de como conseguir isto ? 

 

 

Segue o HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>ChartJS - LineGraph</title>
        <style>
            .chart-container {
                width: 780px;
                height: 400px;
            }
        </style>
    </head>
    <body>
  
        <div class="chart-container">
            <canvas id="mycanvas"></canvas>
            <canvas id="mycanvas2"></canvas>
            <canvas id="mycanvas3"></canvas>
        </div>
        
        
        <!-- javascript -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/Chart.min.js"></script>
        <script type="text/javascript" src="js/linegraph.js"></script>
        <script type="text/javascript" src="js/bargraph.js"></script>
        <script type="text/javascript" src="js/bargraph2.js"></script>
    </body>
</html>

e este é o PHP:

 

 

<?php

include "db.php";
//setting header to json
header('Content-Type: application/json');


//query to get data from the table
$query = sprintf("SELECT DATE_FORMAT(dataid, '%%d-%%m-%%Y') as dataid, facebook, twitter, googleplus, playerme FROM (SELECT * FROM followers ORDER BY userid DESC ) followers ORDER  BY userid DESC LIMIT 50");


//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
	$data[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

//now print the data
print json_encode($data);

 

Javascript:

$(document).ready(function(){
	$.ajax({
		url : "followersdata.php",
		type : "GET",
		success : function(data){
			console.log(data);

            var dataid = [];
			var facebook_follower = [];
			var twitter_follower = [];
			var googleplus_follower = [];
            var playerme_follower = [];


			for(var i in data) {
				dataid.push(data[i].dataid);
				facebook_follower.push(data[i].facebook);
				twitter_follower.push(data[i].twitter);
				googleplus_follower.push(data[i].googleplus);
                playerme_follower.push(data[i].playerme);
			}

			var chartdata = {
				labels: dataid,
				datasets: [
					{
						label: "facebook",
						fill: false,
						lineTension: 0.1,
						backgroundColor: "rgba(59, 89, 152, 0.75)",
						borderColor: "rgba(59, 89, 152, 1)",
						pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
						pointHoverBorderColor: "rgba(59, 89, 152, 1)",
						data: facebook_follower
					},
					{
						label: "twitter",
						fill: false,
						lineTension: 0.1,
						backgroundColor: "rgba(29, 202, 255, 0.75)",
						borderColor: "rgba(29, 202, 255, 1)",
						pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
						pointHoverBorderColor: "rgba(29, 202, 255, 1)",
						data: twitter_follower
					},
					{
						label: "googleplus",
						fill: false,
						lineTension: 0.1,
						backgroundColor: "rgba(211, 72, 54, 0.75)",
						borderColor: "rgba(211, 72, 54, 1)",
						pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
						pointHoverBorderColor: "rgba(211, 72, 54, 1)",
						data: googleplus_follower
					},
                    {
						label: "playerme",
						fill: false,
						lineTension: 0.1,
						backgroundColor: "rgba(49, 72, 54, 0.75)",
						borderColor: "rgba(49, 72, 54, 1)",
						pointHoverBackgroundColor: "rgba(49, 72, 54, 1)",
						pointHoverBorderColor: "rgba(49, 72, 54, 1)",
						data: playerme_follower
					}
 
				]      
                
			};

			var ctx = $("#mycanvas");

			var LineGraph = new Chart(ctx, {
				type: 'line',
				data: chartdata,                 
			});
            
		},
		error : function(data) {

		}
	});
    
});

 

 

 

 

Data Sample CSV:

Spoiler

userid;dataid;facebook;twitter;googleplus;playerme
1;01/01/2014 00:00;100;200;80;0
2;02/01/2014 00:00;60;150;180;0
3;03/01/2014 00:00;50;90;120;0
4;01/05/2016 00:00;52;100;100;73
5;02/05/2016 00:00;80;89;99;82
6;03/05/2016 00:00;76;554;125;99
7;04/05/2016 00:00;42;34;34;26
8;05/05/2016 00:00;61;31;31;28
9;06/05/2016 00:00;33;68;58;50
10;07/05/2016 00:00;36;37;71;56
11;08/05/2016 00:00;88;53;110;94
12;09/05/2016 00:00;15;88;34;24
13;10/05/2016 00:00;50;79;31;26
14;11/05/2016 00:00;49;24;68;61
15;12/05/2016 00:00;73;41;37;24
16;13/05/2016 00:00;31;48;53;31
17;14/05/2016 00:00;29;46;88;72
18;15/05/2016 00:00;18;56;79;60
19;16/05/2016 00:00;25;69;24;11
20;17/05/2016 00:00;29;49;41;29
21;18/05/2016 00:00;46;22;48;34
22;19/05/2016 00:00;69;17;46;40
23;20/05/2016 00:00;24;42;56;48
24;21/05/2016 00:00;15;88;34;24
25;22/05/2016 00:00;50;79;31;26
26;23/05/2016 00:00;49;24;68;61
27;24/05/2016 00:00;73;41;37;24
28;25/05/2016 00:00;31;48;53;31
29;26/05/2016 00:00;29;46;88;72
30;27/05/2016 00:00;18;56;79;60
31;28/05/2016 00:00;25;69;24;11
32;29/05/2016 00:00;29;49;41;29
33;30/05/2016 00:00;46;22;48;34
34;31/05/2016 00:00;19;15;46;36
35;01/06/2016 00:00;68;50;108;88
36;02/06/2016 00:00;61;49;19;15
37;03/06/2016 00:00;88;73;68;50
38;04/06/2016 00:00;45;31;61;49
39;05/06/2016 00:00;43;29;88;73
40;06/06/2016 00:00;23;18;45;31
41;07/06/2016 00:00;30;25;43;29
42;08/06/2016 00:00;38;29;23;18
43;09/06/2016 00:00;57;46;30;25
44;10/06/2016 00:00;87;69;38;29
45;11/06/2016 00:00;34;24;57;46
46;12/06/2016 00:00;34;24;87;69
47;13/06/2016 00:00;34;28;34;24
48;14/06/2016 00:00;24;42;56;48
49;15/06/2016 00:00;15;88;34;24
50;16/06/2016 00:00;50;79;31;26
51;17/06/2016 00:00;49;24;68;61
52;18/06/2016 00:00;73;41;37;24
53;19/06/2016 00:00;31;48;53;31
54;20/06/2016 00:00;29;46;88;72
55;21/06/2016 00:00;18;56;79;60
56;22/06/2016 00:00;25;69;24;11
57;23/06/2016 00:00;29;49;41;29
58;24/06/2016 00:00;24;33;46;39
59;25/06/2016 00:00;24;36;38;32
60;26/06/2016 00:00;28;88;81;59
61;27/06/2016 00:00;42;15;25;13
62;28/06/2016 00:00;88;50;19;10
63;29/06/2016 00:00;79;49;32;21
64;30/06/2016 00:00;24;73;45;31
65;01/07/2016 00:00;41;31;58;46
66;02/07/2016 00:00;48;29;77;55
67;03/07/2016 00:00;46;18;81;63
68;04/07/2016 00:00;56;25;43;24
69;05/07/2016 00:00;69;29;34;23
70;06/07/2016 00:00;49;46;30;19
71;07/07/2016 00:00;33;69;41;29
72;08/07/2016 00:00;36;24;62;35
73;09/07/2016 00:00;18;15;69;52
74;10/07/2016 00:00;25;50;99;66
75;11/07/2016 00:00;29;49;31;25
76;12/07/2016 00:00;46;41;29;24
77;13/07/2016 00:00;69;62;22;20
78;14/07/2016 00:00;24;69;22;14
79;15/07/2016 00:00;24;99;38;21
80;16/07/2016 00:00;28;31;77;50
81;17/07/2016 00:00;42;29;58;39
82;18/07/2016 00:00;88;22;35;18
83;19/07/2016 00:00;79;22;33;28
84;20/07/2016 00:00;24;38;20;12
85;21/07/2016 00:00;41;77;31;26
86;22/07/2016 00:00;23;58;43;31
87;23/07/2016 00:00;19;35;52;40
88;24/07/2016 00:00;29;33;78;56
89;25/07/2016 00:00;35;20;32;28
90;26/07/2016 00:00;52;31;39;30
91;27/07/2016 00:00;66;43;35;26
92;28/07/2016 00:00;15;88;34;24
93;29/07/2016 00:00;50;79;31;26
94;30/07/2016 00:00;49;24;68;61
95;31/07/2016 00:00;73;41;37;24
96;01/08/2016 00:00;31;48;53;31
97;02/08/2016 00:00;29;46;88;72
98;03/08/2016 00:00;18;56;79;60
99;04/08/2016 00:00;25;69;24;11
100;05/08/2016 00:00;29;49;41;29
101;06/08/2016 00:00;46;22;48;34
102;07/08/2016 00:00;19;15;46;36
103;08/08/2016 00:00;68;50;108;88
104;09/08/2016 00:00;61;49;19;15
105;10/08/2016 00:00;88;73;68;50
106;11/08/2016 00:00;45;31;61;49
107;12/08/2016 00:00;43;29;88;73
108;13/08/2016 00:00;23;18;45;31
109;14/08/2016 00:00;30;25;43;29
110;15/08/2016 00:00;38;29;23;18
111;16/08/2016 00:00;57;46;30;25
112;17/08/2016 00:00;87;69;38;29
113;18/08/2016 00:00;34;24;57;46
114;19/08/2016 00:00;34;24;87;69
115;20/08/2016 00:00;24;33;56;43
116;21/08/2016 00:00;24;36;62;40
117;22/08/2016 00:00;28;88;32;27
118;23/08/2016 00:00;42;15;25;14
119;24/08/2016 00:00;88;50;41;32
120;25/08/2016 00:00;79;49;48;36
121;26/08/2016 00:00;24;73;47;37
122;27/08/2016 00:00;41;31;36;29
123;28/08/2016 00:00;48;29;85;69
124;29/08/2016 00:00;46;18;24;22
125;30/08/2016 00:00;56;25;28;14
126;31/08/2016 00:00;24;33;40;32
127;01/09/2016 00:00;24;36;33;25
128;02/09/2016 00:00;28;88;37;32
129;03/09/2016 00:00;42;15;71;55
130;04/09/2016 00:00;88;50;75;64
131;05/09/2016 00:00;79;49;30;19
132;06/09/2016 00:00;24;73;40;27
133;07/09/2016 00:00;41;31;27;19
134;08/09/2016 00:00;48;29;39;32
135;09/09/2016 00:00;46;18;58;43
136;10/09/2016 00:00;56;25;45;33
137;11/09/2016 00:00;69;29;61;45
138;12/09/2016 00:00;49;46;34;30
139;13/09/2016 00:00;33;69;17;5
140;14/09/2016 00:00;36;24;35;27
141;15/09/2016 00:00;18;15;24;14
142;16/09/2016 00:00;25;50;35;30
143;17/09/2016 00:00;29;49;52;40
144;18/09/2016 00:00;46;41;64;53
145;19/09/2016 00:00;69;62;29;20
146;20/09/2016 00:00;24;69;33;21
147;21/09/2016 00:00;24;99;22;17
148;22/09/2016 00:00;28;31;20;15
149;23/09/2016 00:00;42;29;36;32
150;24/09/2016 00:00;88;22;64;33
151;25/09/2016 00:00;79;22;82;73
152;26/09/2016 00:00;24;38;26;18
153;27/09/2016 00:00;41;77;17;14
154;28/09/2016 00:00;24;33;30;25
155;29/09/2016 00:00;24;36;36;30
156;30/09/2016 00:00;28;88;51;34
157;01/10/2016 00:00;42;15;79;61
158;02/10/2016 00:00;88;50;81;69
159;03/10/2016 00:00;79;49;31;24
160;04/10/2016 00:00;24;73;47;27
161;05/10/2016 00:00;41;31;23;18
162;06/10/2016 00:00;48;29;37;24
163;07/10/2016 00:00;46;18;46;33
164;08/10/2016 00:00;56;25;61;54
165;09/10/2016 00:00;69;29;96;77
166;10/10/2016 00:00;49;46;20;13
167;11/10/2016 00:00;33;69;39;29
168;12/10/2016 00:00;36;24;14;10
169;13/10/2016 00:00;18;15;25;22
170;14/10/2016 00:00;25;50;45;40
171;15/10/2016 00:00;29;49;44;34
172;16/10/2016 00:00;46;41;72;50
173;17/10/2016 00:00;69;62;15;13
174;18/10/2016 00:00;24;69;18;14
175;19/10/2016 00:00;24;99;21;15
176;20/10/2016 00:00;28;31;22;18
177;21/10/2016 00:00;42;29;39;24
178;22/10/2016 00:00;88;22;62;52
179;23/10/2016 00:00;79;22;67;46
180;24/10/2016 00:00;24;38;25;16
181;25/10/2016 00:00;41;77;27;21
182;26/10/2016 00:00;24;33;18;12
183;27/10/2016 00:00;24;36;20;13
184;28/10/2016 00:00;28;88;59;47
185;29/10/2016 00:00;42;15;69;57
186;30/10/2016 00:00;88;50;53;31
187;31/10/2016 00:00;79;49;23;18
188;01/11/2016 00:00;24;73;27;22
189;02/11/2016 00:00;41;31;70;47
190;03/11/2016 00:00;48;29;44;34
191;04/11/2016 00:00;46;18;25;19
192;05/11/2016 00:00;56;25;30;23
193;06/11/2016 00:00;69;29;76;65
194;07/11/2016 00:00;49;46;13;7
195;08/11/2016 00:00;33;69;31;25
196;09/11/2016 00:00;36;24;40;23
197;10/11/2016 00:00;18;15;31;21
198;11/11/2016 00:00;25;50;61;45
199;12/11/2016 00:00;29;49;41;37
200;13/11/2016 00:00;46;41;35;33
 


Um Abraço!

Edited by Kn0xx

Share this post


Link to post
Share on other sites
devgoncalo

olá

tens que mudar a estrutura do código.

a ideia é criares um <select> no html, no javascript captas o "onchange" do select com o jquery, que chama uma nova função onde vai estar a criação do gráfico (o que tens depois de $(document).ready(function(){). 

esta função pode receber como parametro o "val()" do select, para depois mandares este valor por ajax para o php, através do "data{}". no php recebes a variável e consoante o seu valor vais buscar ou não novos dados à bd.

cumps

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.