score:1

Accepted answer

i think that this peace of code will help you..

var formattercountrynames = function() {
  // if mobile
  if (jquery('#country-names').length) {
    return this.point.countrycode
  } else {
    return this.point.country
  }
};


function draw_chart( y ) {
  var url = "https://projectec-edbbb.firebaseio.com/demo/" + y + ".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('2007');

$('#drp').on('change', function(el){
  draw_chart( $(this).val() );
})
<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>

<select id="drp">
	<option value="2007">2007</option>
	<option value="2008">2008</option>
	<option value="2009">2009</option>
	<option value="2010">2010</option>
	<option value="2011">2011</option>
	<option value="2012">2012</option>
	<option value="2013">2013</option>
	<option value="2014">2014</option>
	<option value="2015">2015</option>
</select>

<div id="container2" style="height: 400px"></div>

score:1

this should do the trick for you:

          var formattercountrynames = function() {
        // if mobile
        if (jquery('#country-names').length) {
          return this.point.countrycode
        } else {
          return this.point.country
        }
      };


function draw_chart(url) {
    var url=url;
    $.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("https://projectec-edbbb.firebaseio.com/demo/2007.json");

//attaching chart update for the dropdown
$("#dateselection").on("change", function() {
  var value = this.children[this.selectedindex].value;
  var url = "https://projectec-edbbb.firebaseio.com/demo/" + value +".json";
  draw_chart(url)
});
<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> 

<select id="dateselection">
  <option selected value="2007">2007</option>
  <option value="2008">2008</option>
  <option value="2009">2009</option>
</select>

<div id="container2" style="height: 400px"></div>


Related Query

More Query from same tag