I have this highchart example thanks to a stack overflow user:

```js
          var formatterCountryNames = function() {
        // if mobile
        if (jQuery('#country-names').length) {
          return this.point.CountryCode
        } else {
          return this.point.Country
        }
      };

function draw_chart() {
    var url="https://projectec-edbbb.firebaseio.com/Demo/2007.json";
    $.getJSON(url,
        function(data){
            /** Declare options after success callback. */
            var options={
                chart: {
  renderTo: 'container2',
  //margin: [0, 0, 0, 0],
  marginTop: 0,
  marginRight: 0,
  marginLeft: 70,
  spacing: [0,0,30,0],
  //marginBottom: 0,
  type: 'bubble',
  zoomType: 'xy',
  events: {
    // load: renderImage
  }
},
legend: {
  enabled: false
},
title: {
        text: null
},
xAxis: {
  labels: {
    enabled: false
  },
  tickPositions: [2.3, 4.4, 6.5, 10],
  min: 0,
  max: 10,
  align: 'low',
  gridLineWidth: 1,
  title: {
    text: 'Government Restrictions Index <strong>(GRI)</strong>',
    x: -30,
    y: 20,
    style: {
      color: "#000",
      fontWeight: 300
    }
  },
},
yAxis: {
  tickInterval: 0.2,
  min: 0,
  max: 10,
  gridLineWidth: 1,
  startOnTick: false,
  endOnTick: false,
  //values: [1.4, 3.5, 7.1, 10],
  title: {
    x: -35,
    y: 20,
    text: 'Social Hostilities Index <strong>(SHI)</strong>',
    style: {
      color: "#000",
      fontWeight: 300
    }
  },
  labels: {
        formatter: function() {
            return this.value + ' %';
        }
    },
  maxPadding: 0.2,
},
tooltip: {
  followPointer: false,
  useHTML: true,
  backgroundColor: '#fff',
  borderColor: '#000'
  // formatter: formatterToolTips,
  // positioner: toolTipsPositioning
},
plotOptions: {
  bubble: {
    minSize: '7.5%'
  },
  series: {
    cursor: 'pointer',
    dataLabels: {
      enabled: true,
      formatter: formatterCountryNames,
      allowOverlap: true,
      strokeWidth: '0',
      textOutline: 'false',
      shadow: 'false',
      textShadow: 'false',
      // adds class to all labels
      className: 'className'
    },
    allowPointSelect: true,
    states: {
      hover: {
// gets rid of halo on hover
halo: {
  /** size: 5,
  attributes: {
    fill: '#333',
    'stroke-width': 1,
    stroke: '#fff',
    zIndex: '1000'
  } **/
  size: 0
}
      }
    },
    marker: {
      fillOpacity: 1.0,
      states: {
hover: {
  // gets rid of outline of marker on hover
  lineWidth: 0,
  // changes markers color on hover
  //fillColor: '#000'
},
select: {
        fillColor: '#000',
        lineWidth: 0
}
      }
    },
    point: {
      events: {
        //click: formatterPointEventsClickFunction,
        fillColor: '#000'
        // mouseOver: markerMouseOver,
        // mouseOut: markerMouseOut
      }
    }
  }
},
series: [{
  events: {
    // mouseOut: markerMouseOut
  },
  data: data,
  marker: {
    // gets rid of default marker outlines
    lineWidth: 0,
    // overriding the above to show markers that collide
    lineWidth: 2,
    lineColor: '#fff',
  }
}],
exporting: {
  enabled: false
}
           };

           /** Create a chart instance and pass options. */
           var chart = new Highcharts.Chart(options);
       }
    );
}
draw_chart();
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
<div id="container2" style="height: 400px"></div>
```

And here is a screenshot to give an idea of the data which is being used to populate the chart:

[![firebase](https://i.stack.imgur.com/z9QB0.png)](https://i.stack.imgur.com/z9QB0.png)

As you can see, the image is showing the data under the node '2007' - this is also the node which the highchart graph is looking to in the firebase URL.

However, within the database there are multiple dates all containing similar data:

[![dates](https://i.stack.imgur.com/JYjdt.png)](https://i.stack.imgur.com/JYjdt.png)

What I want to know is - Is there a way where the user can click a button - Perhaps a drop down of dates from 2007 - 2015, and the firebase URL updates to reflect these changes?

So say for example the default is this:

`var url="https://projectec-edbbb.firebaseio.com/Demo/2007.json";`

But when the user selects the date 2009 from a dropdown box then the URL is updated to show:

```
var url="https://projectec-edbbb.firebaseio.com/Demo/2009.json";

```

If anyone has any solutions or ideas I would really appreciate it

Thank you,

G