javascript - How to fix Prototype conflict with Highchart?

Question

I have an AJAX action and trying to use Highchart at the same time that's why I need Prototype to be included.

Here is my code but is not showing the Highchart graph:

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="contain" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Here is the information: http://jsfiddle.net/dhdSL/4/

Of course is working 100% without Prototype: http://jsfiddle.net/dhdSL/5/

I tried jQuery.noConflict(); and is not showing the Highchart graph http://jsfiddle.net/dhdSL/6/

And tried $.noConflict(); and is not showing the Highchart graph http://jsfiddle.net/dhdSL/7/

I was searching in Stack Overflow for an answer, blogs, Facebook, books, Google and spent six months and still don't find the answer.

I tried changing Prototype in all version but still not working and is not showing errors in console.

According with a friend told me to include noConflict at the end but is not showing in google chrome browser and is showing an error: http://jsfiddle.net/dhdSL/8/

When open the error I'm getting another error:

Answer 1

Wrap your jQuery into an anonymous function to protect the variable from being interfered with by Prototype. http://jsfiddle.net/amyamy86/s6ms3/

(function($) {

    $.noConflict();
    $(function () {
        $('#contain').highcharts({
         ....
        });
     });

}(jQuery));