Charts.js - onComplete javascript function coming from JSON

Question

I'm using Charts.js with data and options coming from an AJAX request in json. The problem comes when i need to add, as an option, a callback on onComplete event because the JSON should look like

"animation" : {
      "onComplete" : function(animation){alert('ok')}
    },

which is not valid JSON.

I've tried to retrieve data as simple text (datatype: 'text'), but when passing it too Charts.js i got an error:

Uncaught TypeError: Cannot create property 'data' on string

this could be the json i'm retrieving

 {
  "type" : "line",
  "data" : {
    "datasets" : [ {
      "data" : [ {
        "t" : 1551096300000,
        "y" : 22.8125
      }, {
        "t" : 1551096600000,
        "y" : 22.8125
      }, {
        "t" : 1551096900000,
        "y" : 22.8125
      }, {
        "t" : 1551097200000,
        "y" : 22.8125
      }, {
        "t" : 1551097500000,
        "y" : 22.8125
      }, {
        "t" : 1551097800000,
        "y" : 19.3125
      }],
      "label" : "Sample data",
      "fill" : false,
      "backgroundColor" : "rgba(0,128,0,1.000)",
      "borderWidth" : 2,
      "borderColor" : "rgba(0,128,0,1.000)"
    },
  "options" : {
    "responsive" : true,
    "maintainAspectRatio" : true,
    "title" : {
      "display" : true,
      "position" : "top",
      "text" : "Temperature (°C)"
    },
    "legend" : {
      "position" : "bottom"
    },
    "hover" : {
      "mode" : "dataset"
    },
    "animation" : {
      "onComplete" : function(animation){alert('ok')}
    },
    "scales" : {
      "xAxes" : [ {
        "type" : "time",
        "time" : {
          "displayFormats" : {
            "millisecond" : null,
            "second" : null,
            "minute" : "HH:mm",
            "hour" : "DD/MM HH:mm",
            "day" : "DD/MM HH:mm",
            "week" : null,
            "month" : "DD/MM HH",
            "quarter" : null,
            "year" : null
          },
          "tooltipFormat" : "DD/MM/YY HH:mm"
        }
      } ]
    },
    "elements" : {
      "point" : {
        "radius" : 1,
        "hitRadius" : 2,
        "hoverRadius" : 2
      }
    }
  }
}

score 0 · Answer 1 · answered Mar 01 '19 at 15:59

First of all you forgot to close the array of datasets in line 29.

secondly it is not valid to define functions in JSON results (Line 45). check this : Is it valid to define functions in JSON results?

And again you forgot to close curly brace at the end .

{
    "type": "line",
    "data": {
        "datasets": [{
                "data": [{
                    "t": 1551096300000,
                    "y": 22.8125
                }, {
                    "t": 1551096600000,
                    "y": 22.8125
                }, {
                    "t": 1551096900000,
                    "y": 22.8125
                }, {
                    "t": 1551097200000,
                    "y": 22.8125
                }, {
                    "t": 1551097500000,
                    "y": 22.8125
                }, {
                    "t": 1551097800000,
                    "y": 19.3125
                }],
                "label": "Sample data",
                "fill": false,
                "backgroundColor": "rgba(0,128,0,1.000)",
                "borderWidth": 2,
                "borderColor": "rgba(0,128,0,1.000)"
            }],
            "options": {
                "responsive": true,
                "maintainAspectRatio": true,
                "title": {
                    "display": true,
                    "position": "top",
                    "text": "Temperature (°C)"
                },
                "legend": {
                    "position": "bottom"
                },
                "hover": {
                    "mode": "dataset"
                },
                "animation": {
                    "onComplete": "" 
                },
                "scales": {
                    "xAxes": [{
                        "type": "time",
                        "time": {
                            "displayFormats": {
                                "millisecond": null,
                                "second": null,
                                "minute": "HH:mm",
                                "hour": "DD/MM HH:mm",
                                "day": "DD/MM HH:mm",
                                "week": null,
                                "month": "DD/MM HH",
                                "quarter": null,
                                "year": null
                            },
                            "tooltipFormat": "DD/MM/YY HH:mm"
                        }
                    }]
                },
                "elements": {
                    "point": {
                        "radius": 1,
                        "hitRadius": 2,
                        "hoverRadius": 2
                    }
                }
            }
        }
}

Thanks, the brackets where just typos. I know i cannot put js functions in JSON, my question was how to use Charts.js onComplete event when retrieving data from an ajax call — MarioC, Mar 01 '19 at 16:46

Charts.js - onComplete javascript function coming from JSON

1 Answers1