Jump to content
Sign in to follow this  
kawtar

Drop down list PROBLEM

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...