Kn0xx Posted April 19, 2017 at 01:28 PM Report #603710 Posted April 19, 2017 at 01:28 PM 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!
devgoncalo Posted April 20, 2017 at 11:10 AM Report #603732 Posted April 20, 2017 at 11:10 AM 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
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now