JSON data array not a valid return for JQPlot.js

Question

I am using JQPlot.js to display analytics from self-hosted Piwik service. The problem I am facing is configuring the API data array from Piwik to return a valid jqPlot data array.

Piwik Data in JSON from API via https://demo.piwik.org/?module=API&method=VisitsSummary.getVisits&idSite=7&period=day&date=last30&format=json&token_auth=anonymous

{"2017-12-19":854,"2017-12-20":939,"2017-12-21":767,"2017-12-22":571,"2017-12-23":3}

Example of how I need the data in valid JQPlot.js array

['2017-12-19',854], ['2017-12-20',939], ['2017-12-21',767], ['2017-12-22',571], ['2017-12-23',3]]

The script to display the Chart is

$(document).ready(function(){
    var ajaxDataRenderer = function(url, plot, options) {
      var ret = null;
      $.ajax({
        async: false,
        url: url,
        dataType:"json",
        success: function(data) {
        ret = data;
      }
    });
    return ret;
  };

var jsonurl = "https://demo.piwik.org/?module=API&method=VisitsSummary.getVisits&idSite=7&period=day&date=last30&format=json&token_auth=anonymous";

  var plot2 = $.jqplot('chart2', jsonurl,{
    title: "AJAX JSON Data Renderer",
    dataRenderer: ajaxDataRenderer,
    dataRendererOptions: {
      unusedOptionalUrl: jsonurl
    }
  });
});

Thank you for your help.

Answer 1

You can simply create the needed array by looking over your data:

input = {"2017-12-19": 854, "2017-12-20": 939, "2017-12-21": 767, "2017-12-22": 571, "2017-12-23": 3}
arr = []
for (var key in input) {
    if (input.hasOwnProperty(key)) {
        arr.push([key, input[key]]);
    }
}

arr will then contain the following array:

[ [ '2017-12-19', 854 ],
  [ '2017-12-20', 939 ],
  [ '2017-12-21', 767 ],
  [ '2017-12-22', 571 ],
  [ '2017-12-23', 3 ] ]