ChartJS - PHP-MySQL-HTML - Dropdownlist

April 19, 2017

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 April 19, 2017 by Kn0xx

April 20, 2017

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

Sign In

ChartJS - PHP-MySQL-HTML - Dropdownlist

Recommended Posts

Kn0xx 0

Share this post

Link to post

Share on other sites

devgoncalo 2

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information