kawtar Posted February 4, 2015 Share Posted February 4, 2015 Hello, I have a php web page that contains graphics, and I want to incorporate into this web page a drop-down list, selecting the year, we display the graphic that matches this year at the same page ... I created the drop-down list in html but I know how to have when you click on an item in the drop-down list displays all my graphics in the same web page. here is the list that I created: <form name="test" method="post" action ="home.php"><select name="annee" onChange="this.form.submit()"> <option value="1"> 2009</option> <option value="2" >2010</option> <option value="3">2011</option> <option value="4">2012</option></select> Here is my graphics : <div class="col-lg-6"><div class="panel-body text-center"> <script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderTo: 'container0', type: 'column', }, title: { text: 'Evolution trimestrielle du Parc Mobile ' }, xAxis: { categories: ['mars-08','juin-08','sept-08','déc-08','mars-09' ] }, yAxis: { min: 0, title: { text: 'millions' }, }, legend: { enabled: false }, plotOptions: { series: { dataLabels: { enabled: true, format: '{point.y:.1f}' }}}, tooltip: { pointFormat: ' <b>{point.y:.1f} millions</b>' }, series: [] } $.getJSON("evte.php", function(json){ //options.xAxis.categories=json[0]['data']; options.series[0]=json[0];chart=new Highcharts.Chart(options);}); });</script> <div id="container0" style="min-width: 400px; height: 400px; margin: 0 auto"> </div> </div></div> <div class="col-lg-6"><div class="panel-body text-center"> <script type="text/javascript">$(document).ready(function() { var options = { chart: { renderTo: 'container', type: 'column', }, title: { text: 'Répartition Prépayé Post-payé' }, xAxis: { categories: ['mars-08','juin-08','sept-08','déc-08','mars-09'] }, yAxis: { min: 0, title: { text: 'milliers' }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } } }, legend: { align: 'center', x: 10, verticalAlign: 'under', y: 371, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, tooltip: { formatter: function () { return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'Total: ' + this.point.stackTotal; } }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', style: { textShadow: '0 0 3px black, 0 0 3px black' } } } }, series: [] } $.getJSON("repartition.php", function(json){ options.series[0]=json[0]; options.series[1]=json[1]; chart=new Highcharts.Chart(options);}); }); </script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"> </div> </div> </div> </div></div></div> <div class="tab-pane fade" id="service-two"> <br/> <div class="col-lg-6"><div class="panel-body text-center"> <script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderTo: 'container09', type: 'column', }, title: { text: 'Evolution trimestrielle du Parc Mobile (en milliers)' }, xAxis: { categories: ['juin-08','sept-08', 'déc-08','mars-09','juin-09' ] }, yAxis: { min: 0, title: { text: 'millions' } }, legend: { enabled: false }, plotOptions: { series: { dataLabels: { enabled: true, format: '{point.y:.1f}' }}}, tooltip: { pointFormat: ' <b>{point.y:.1f} millions</b>' }, series: [] } $.getJSON("evtrimmobile juin09.php", function(json){ options.series[0]=json[0];chart=new Highcharts.Chart(options);}); }); </script> <div id="container09" style="min-width: 400px; height: 400px; margin: 0 auto"> </div> </div></div> <div class="col-lg-6"><div class="panel-body text-center"> <script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderTo: 'containerr09', type: 'column', }, title: { text: 'Répartition Prépayé Post-payé' }, xAxis: { categories: ['juin-08','sept-08','déc-08','mars-09','juin-09'] }, yAxis: { min: 0, title: { text: 'milliers' }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } } }, legend: { align: 'center', x: 10, verticalAlign: 'under', y: 371, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, plotOptions: { series: { dataLabels: { enabled: true, format: '{point.y:.1f}' }}}, tooltip: { formatter: function () { return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'Total: ' + this.point.stackTotal; } }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', style: { textShadow: '0 0 3px black, 0 0 3px black' } } } }, series: [] } $.getJSON("repartitionm.php", function(json){ options.series[0]=json[0]; options.series[1]=json[1]; chart=new Highcharts.Chart(options);}); }); </script> <div id="containerr09" style="min-width: 400px; height: 400px; margin: 0 auto"> </div> </div></div> </div> PS: graphics are created using software Highcharts Thank you for helping me. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 4, 2015 Share Posted February 4, 2015 I don't think you want the form to submit when they make a change, I think you want it to run a function to get the value they selected and show or hide elements on the page. You can show and hide elements using CSS, you can change the element's display style to none to hide it, for example. I'm not sure exactly what you're trying to do, but maybe you want all of those divs to start out hidden, and the Javascript function should get the value they selected, hide all divs, then show the one they selected. You'll need to have some correlation between the dropdown values and the divs. Instead of just 1, 2, 3, 4 for the dropdown values you might want to use the ID of the div to show. Link to comment Share on other sites More sharing options...
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