未捕获的TypeError：fn在chart.js中不是函数

Question

This is my first time usingchart.js to make line chat and it work on my localhost but when i uploaded it to a remote host i found out that the line chart was not showing so i inspected element and found this error in the console. please what could be the problem.

Uncaught TypeError: fn is not a function     chart.js:501

this is the implementation script

<div id="graph-container"><canvas id="testLine"></canvas></div>

<script src="js/Chart.js"></script>
<script>
/*GLOBAL OPTIONS*/
Chart.defaults.global = {
// Boolean - Whether to animate the chart
animation: true,

// Number - Number of animation steps
animationSteps: 60,
animationEasing: "easeOutQuart",

// Boolean - If we should show the scale at all
showScale: true,

// Boolean - If we want to override with a hard coded scale
scaleOverride: false,

// ** Required if scaleOverride is true **
// Number - The number of steps in a hard coded scale
scaleSteps: null,
// Number - The value jump in the hard coded scale
scaleStepWidth: null,
// Number - The scale starting value
scaleStartValue: null,

// String - Colour of the scale line
scaleLineColor: "rgba(0,0,0,.1)",

// Number - Pixel width of the scale line
scaleLineWidth: 1,

// Boolean - Whether to show labels on the scale
scaleShowLabels: true,

// Interpolated JS string - can access value
scaleLabel: "<%=value%>",

// Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
scaleIntegersOnly: true,

// Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero: false,

// String - Scale label font declaration for the scale label
scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Scale label font size in pixels
scaleFontSize: 12,

// String - Scale label font weight style
scaleFontStyle: "normal",

// String - Scale label font colour
scaleFontColor: "#666",

// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,

// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,

// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,

// Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
customTooltips: false,

// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],

// String - Tooltip background colour
tooltipFillColor: "rgba(0,0,0,0.8)",

// String - Tooltip label font declaration for the scale label
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Tooltip label font size in pixels
tooltipFontSize: 14,

// String - Tooltip font weight style
tooltipFontStyle: "normal",

// String - Tooltip label font colour
tooltipFontColor: "#fff",

// String - Tooltip title font declaration for the scale label
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Tooltip title font size in pixels
tooltipTitleFontSize: 14,

// String - Tooltip title font weight style
tooltipTitleFontStyle: "bold",

// String - Tooltip title font colour
tooltipTitleFontColor: "#fff",

// Number - pixel width of padding around tooltip text
tooltipYPadding: 6,

// Number - pixel width of padding around tooltip text
tooltipXPadding: 6,

// Number - Size of the caret on the tooltip
tooltipCaretSize: 8,

// Number - Pixel radius of the tooltip border
tooltipCornerRadius: 6,

// Number - Pixel offset from point x to tooltip edge
tooltipXOffset: 10,

// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

// String - Template string for multiple tooltips
multiTooltipTemplate: "<%= value %>",

// Function - Will fire on animation progression.
onAnimationProgress: function(){},

// Function - Will fire on animation completion.
onAnimationComplete: function(){},

}



/*LINE CHART    */    
var lineData = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September",  "October", "November", "December"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: <?php echo (json_encode($allquery)); ?>
    },
    {
        label: "Paid",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: <?php echo (json_encode($monthpaid)); ?>
    },
    {
        label: "Debt",
        fillColor: "rgba(240,216,216,0.2)",
        strokeColor: "rgba(240,216,216,1)",
        pointColor: "rgba(240,216,216,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(240,216,216,1)",
        data: <?php echo (json_encode($monthdebt)); ?>
    }
]
};

        var testChart = document.getElementById('testLine').getContext('2d');
        var myLineChart = new Chart(testChart).Line(lineData);
        myLineChart.options.responsive = false;
        $("#testLine").remove();
        $("#graph-container").html("<canvas id='testLine'></canvas>");
        var testChart1 = document.getElementById('testLine').getContext('2d');
        var myLineChart1 = new Chart(testChart1).Line(lineData);

Answer 1

I had the same issue but this answer to an identical question: Uncaught TypeError helped me fix mine. Try splitting the global configuration instead of wiping out all the global values when you declare a new object. Instead declare the variables separately like this...

 Chart.defaults.global.animation = true; Chart.defaults.global.animationSteps = 60; Chart.defaults.global.animationEasing = "easeOutQuart"; Chart.defaults.global.showScale = true; Chart.defaults.global.scaleOverride = false; Chart.defaults.global.scaleSteps = null; Chart.defaults.global.scaleStepWidth = null; Chart.defaults.global.scaleStartValue = null; Chart.defaults.global.scaleLineColor = "rgba(0,0,0,.1)"; Chart.defaults.global.scaleLineWidth = 1; Chart.defaults.global.scaleShowLabels = true; Chart.defaults.global.scaleLabel = "<%=value%>"; Chart.defaults.global.scaleIntegersOnly = true; Chart.defaults.global.scaleBeginAtZero = false; Chart.defaults.global.scaleFontFamily = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"; Chart.defaults.global.scaleFontSize = 12; Chart.defaults.global.scaleFontStyle = "normal"; Chart.defaults.global.scaleFontColor = "#666"; Chart.defaults.global.responsive = true; Chart.defaults.global.maintainAspectRatio = true; Chart.defaults.global.showTooltips = true; Chart.defaults.global.customTooltips = false; Chart.defaults.global.tooltipEvents = ["mousemove", "touchstart", "touchmove"]; Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)"; Chart.defaults.global.tooltipFontFamily = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"; Chart.defaults.global.tooltipFontSize = 14; Chart.defaults.global.tooltipFontStyle = "normal"; Chart.defaults.global.tooltipFontColor = "#fff"; Chart.defaults.global.tooltipTitleFontFamily = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"; Chart.defaults.global.tooltipTitleFontSize = 14; Chart.defaults.global.tooltipTitleFontStyle = "bold"; Chart.defaults.global.tooltipTitleFontColor = "#fff"; Chart.defaults.global.tooltipYPadding = 6; Chart.defaults.global.tooltipXPadding = 6; Chart.defaults.global.tooltipCaretSize = 8; Chart.defaults.global.tooltipCornerRadius = 6; Chart.defaults.global.tooltipXOffset = 10; Chart.defaults.global.tooltipTemplate = "<%if (label){%><%=label%>: <%}%><%= value %>"; Chart.defaults.global.multiTooltipTemplate = "<%= value %>"; Chart.defaults.global.onAnimationProgress = function() {}; Chart.defaults.global.onAnimationComplete = function() {}; 

Answer 2

This means you have problem with your options

check the values for example tooltipTemplate: <%if (label){%><%=label%>: <%}%><%= value %>

Answer 3

You should turn off option asp_tags this probably happens only your online version and not local.

When asp tags is turned on it breaks on : {" multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>" }