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.
Drop down list PROBLEM
in JavaScript
Posted
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>