Highcharts not working with jQuery 1.8, any workar

Question

I have a scenario where I need to use jquery 1.8, but I facing facing 2 problems with highcharts, the graph line is not visible and zoom functionality is also not working properly. I have downloaded the latest hightcharts js, ie, version 2.3.3, is there any work around for this?

Answer 1

You can use jQuery.noConflict()

You need to order your jQuery script tags in a particular order, the one you include first will henceforth be referred using $ and the latter one can be referred using jQuery or you could also give a name that you want like jq172. Since highcharts internally using jQuery you want to the highchart friendly version later.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js" ></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js" ></script>
<script type="text/javascript">
window.jq172=$.noConflict();
</script>

You can now use $ to leverage 1.8.0 features and jQuery or jq172 to use 1.7.2

console.log("$: " + $().jquery);
console.log("jQuery: " + jQuery().jquery);
console.log("window.jq172: " + jq172().jquery);

prints to console

$: 1.8.0
jQuery: 1.7.2
window.jq172: 1.7.2

jQuery version conflict | Highchart & Highstock @ jsFiddle