I have a working chart in jsfiddle: https://jsfiddle.net/e3so7j1d/33/, I'm trying to move this to a web page:https://jsfiddle.net/e3so7j1d/38/, how do I need to modify the javascript so that it displays, i.e. what is the magic that jsfiddle hides when it separates the javascript from the html? Thanks
<script type="text/javascript">
magic
Highcharts.chart('container', {
});
</script>
The following code is a basic way of initialising a chart:
<div id='containder'> </div>
<script>
Highcharts.chart('container', {
...
});
</script>
It is a constructor method where the first parameter is a reference to the div (chart place) and the second is an options object (chart options).
At your first fiddle, you create gaugeOptions object with some options. Then, the chart is created by the contructor, but you also merge gaugeOptions with provided options into the one options object (as a second parameter).
In the second fiddle, you copied JS script, but you also wraped it as a second parameter of a contructor, but it doesn't make sense.
The JavaScript Tab in the JSFiddle works as a normal <sript> tag in the HTML. If you copy your JS code into HTML, it should be placed in the <script> tag without any unnecessary wrapping.
Demo: https://jsfiddle.net/BlackLabel/k3sut05r/
API References https://api.highcharts.com/class-reference/Highcharts.Chart https://www.highcharts.com/docs/getting-started/your-first-chart https://www.highcharts.com/docs/getting-started/how-to-set-options