Диаграмма Jqwidgets не работает в Firefox и Safari

Question

Я показываю некоторую гистограмму и линейную диаграмму с помощью библиотеки jqwidgets, она отлично работает в браузере Chrome и Edge, но в Firefox и Safari не создала диаграмму.

Почему это не так?работать в Firefox и Safari?

Где я ошибаюсь, примеры диаграмм jqwidgets также отлично работают в Firefox и Safari, но в моем случае это только пустой div.

$(document).ready(function () {
		

            var data = [{"Value":"0.458","Label":"06-19-19"},{"Value":"0.895","Label":"06-20-19"},{"Value":"0.569","Label":"06-21-19"},{"Value":"0.5565","Label":"06-22-19"},{"Value":"0.5687","Label":"06-23-19"},{"Value":"0.14587","Label":"06-24-19"},{"Value":"0.1254","Label":"06-25-19"}];
            var source = {
                datatype: 'json',
                localdata: data,
                datafields: [
                    {
                        name: 'Date',
                        name: 'Volume'
                    }
                ]
            };

          
            var settingsColumn = {
                title: { visible: false },
                description: { visible: false },
                showLegend: true,
                enableAnimations: true,
                borderLineColor: 'transparent',
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: data,
                xAxis:
                {
                    dataField: 'Label',
                    gridLines: { visible: false },
                    valuesOnTicks: false,
                    type: 'date',
                    baseUnit: 'day',
                    formatFunction: function (dateValue) {
                        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                        //console.log(dateValue + '|' + months[dateValue.getMonth()]);
                        //console.log(dateValue);
                        // alert(dateValue.getYear());
                        var fdate = dateValue.getDate() + '-' + months[dateValue.getMonth()] + '-' + dateValue.getFullYear().toString().substr(-2);
                        return fdate;
                    },
                },
                colorScheme: 'scheme01',
                columnSeriesOverlap: false,
                seriesGroups:
                    [
                        {
                            type: 'column',
                            useGradient: false,
                            columnsGapPercent: 40,
                            seriesGapPercent: 100,
                            //indexLabel: "{y}",
                            valueAxis:
                            {
                                visible: false,
                                //baselineValue :0,
                                minValue: 0.0001,
                                unitInterval: .01,
                                title: { text: 'Volume(ML)<br>' }
                            },
                            series: [

                                {
                                    dataField: 'Value', displayText: 'Volume(ML)', color: '#4B8CA8',
                                    labels: {
                                        visible: true, angle: '0',
                                        verticalAlignment: 'top',
                                        offset: { x: 0, y: 0 }
                                    },
                                },

                            ]
                        },

                    ]
            };
            // setup the chart
            $('#chartContainer').on("refreshEnd", function () { setTimeout(function () { setLegendsLabelPostion_Graph1(); }, 1000); });
            $('#chartContainer').jqxChart(settingsColumn);

            //    var data1 = [{ Date: '20/05/2018', unit: '0.325' },
            //{ Date: '21/05/2018', unit: '0.3251' },
            //{ Date: '22/05/2018', unit: '0.4256' },
            //{ Date: '23/05/2018', unit: '0.3252' },
            //{ Date: '24/05/2018', unit: '0.4254' },
            //{ Date: '25/05/2018', unit: '0.3250' },
            //{ Date: '26/05/2018', unit: '0.5257' },

            //    ];
            var data1 = [{"Value":"258.370","Label":"06-19-19"},{"Value":"294.074","Label":"06-20-19"},{"Value":"291.353","Label":"06-21-19"},{"Value":"291.638","Label":"06-22-19"},{"Value":"292.808","Label":"06-23-19"},{"Value":"292.613","Label":"06-24-19"},{"Value":"291.556","Label":"06-25-19"}];
            var settingsLine = {
                source: data1,
                title: { visible: false },
                description: { visible: false },
                showLegend: true,
                enableAnimations: true,
                borderLineColor: 'transparent',
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                categoryAxis:
                {
                    dataField: 'Label',
                    gridLines: { visible: false },
                    valuesOnTicks: false,
                    //labels: { angle:'90'}
                    type: 'date',
                    baseUnit: 'day',
                    formatFunction: function (dateValue) {
                        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                        //console.log(dateValue + '|' + months[dateValue.getMonth()]);
                       // console.log(dateValue);
                        // alert(dateValue.getYear());
                        var fdate = dateValue.getDate() + '-' + months[dateValue.getMonth()] + '-' + dateValue.getFullYear().toString().substr(-2);
                        return fdate;
                    },
                },
                colorScheme: 'scheme05',
                columnSeriesOverlap: false,
                seriesGroups:
                    [
                        {
                            type: 'line',
                            showLabels: true,
                            valueAxis:
                            {
                                //  unitInterval: 0.1,
                                //  minValue: 0,
                                //maxValue: 10
                                gridLines: { visible: false },
                                visible: false

                            },
                            series: [
                                {
                                    dataField: 'Value', displayText: 'kWh/ML', color: '#4B8CA8', symbolType: 'square',
                                    labels:
                                    {
                                        visible: true, angle: '0',
                                        verticalAlignment: 'top',
                                        offset: { x: 0, y: -10 },
                                        color: '#4B8CA8'
                                    },
                                },

                            ]
                        }
                    ]
            };
            $('#chartContainer1').on("refreshEnd", function () { setTimeout(function () { setLegendsLabelPostion_Graph2(); }, 1000); });
            $('#chartContainer1').jqxChart(settingsLine);
        
          
        });
        function setLegendsLabelPostion_Graph2() {
          
            $.each($("#chartContainer1").find(".jqx-chart-label-text"), function (index, value) {
                //alert( index + ": " + value );
              //  $(this).attr("y", "20");
            });
        }
        function setLegendsLabelPostion_Graph1() {
           // alert("hello2");
            // alert($("#chartContainer1").find(".jqx-chart-label-text").length);
            $.each($("#chartContainer").find(".jqx-chart-label-text"), function (index, value) {
                //alert( index + ": " + value );
                $(this).attr("y", "10");
            });
        }

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
	<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.light.css" type="text/css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
	 <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxchart.core.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Graphical View</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <div class="col-12 header">
        <div style="text-align:left; vertical-align:text-top;color:#fff; font-size:18px;">
            <div class="col-6" style="float:left;">               
                <h1>Graphical reports</h1>
            </div>            
        </div>
    </div>

    <div style="height:auto">
        <div class="col-12 headerBg">
            Daily Volume
        </div>

        <div id='chartContainer' style="width:100%; height:500px;">
        </div>

        <div class="col-12 headerBg">
            Daily FLow
        </div>

        <div id="chartContainer1" style="width:100%; height:500px;">
        </div>
    </div>

   
</body>
</html>