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>
Source: stackoverflow.com
Related Query
- Dynamically changeable Firebase URL
- Strange character in the Highstock source code
- Error: Data source must be a URL for refresh | console error | javascript | Highcharts
- css clip-path source url gets change while using in solution
- Dynamically changing Highcharts Theme through Jquery code not working
- Changing data dynamically for a series in Highcharts
- highcharts: dynamically define colors in pie chart
- Changing series color in highcharts dynamically
- How do I dynamically change a data point in Highcharts using JavaScript
- Highcharts dynamically change bar color based on value
- How to open credits url of highcharts in new tab
- Dynamically update subtitle on Highcharts chart?
- Changing Highcharts data series type dynamically
- How can I change the unit at y axis dynamically at Highcharts?
- Highcharts pie chart dynamically changes size
- Highcharts dynamically add/change yAxis plotLines
- How to Load HighChart dynamically within angular UI Accorion(uib-Accordion)?
- Dynamically update Highcharts chart in react
- Optimize JavaScript DrillDown code
- HighCharts Dynamically Change Chart Type
- Append onload or redraw event functions dynamically in Highcharts
- Change series data dynamically in react-highcharts without re-render of the chart
- Changing the color of the point dynamically in highcharts
- Dynamically applying plot bands to a Highcharts graph
- Adding Y-Axis dynamically
- Adding a series dynamically with HighCharts Stock Charts
- How to draw HighChart XAxis dynamically
- Highcharts: dynamically change the tooltip formatter?
- Replacing highcharts.each in my code as it is being deprecated
- Highcharts add series dynamically
More Query from same tag
- Tooltip is visible on the whilte area as well in lat-lon mappoint Highmaps
- HighCharts - How can I split data labels in Sankey diagram?
- Highcharts treemap link legends
- highcharts style modification in R
- call hidden value to highchart
- How to add dots to Highcharts legend and bars?
- Highcharts: issue to load multiple series
- Why is Highcharts not working in PHP?
- getJSON different line options
- how to remove black color from circle?
- Disables Crosshair for one series of two
- Tooltip covering bar in highchart
- Highcharts: how to make slices readjust when disabling one?
- Create entire highchart object on server side
- Graph sliding strangely with negativeColor activated
- Algorithm for group scales
- High charts AddAnnotation is not a function for dynamic adding
- Need to call an API with min and max X values on Click of rangeselector Buttons
- Setting extremes sometimes results in unwanted padding left and right
- How to change code in "Pie Chart" in HighCharts
- How to build query and to make chart in Yii2 using highchart?
- Highstock Chart - setExtremes event data missing
- Uncaught TypeError: undefined is not a function when using highcharts
- Fixed width Font Awesome in HighCharts tooltip
- How to remove a series in Highcharts by name
- Shifting Chart without losing points
- highcharts Bars should start beginning at the line
- Plotting a scatterplot/bubbleChart along with Columnrange graph in highcharts
- How can I hide tooltip in highcharts
- How to change json jackson format for highcharts json