PHP Json Array Data with Chartist

Question

im try to create a chartist line graphic from json array.

 echo json_encode($json_data);

return

[{"labels": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27],
  "series":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,17,0,2,0,0]}]

my jquery

var url = "/appx/array.php"
   var resp = jQuery.parseJSON(
   jQuery.ajax({
       url: url, 
       async: false,
       dataType: 'json'
   }).responseText
);


var data = resp; // here i dont know how to do

/*var data = labels: ['1', '2', '3','4'], series: [[1, 3, 7, 12]] original data*/

new Chartist.Line("#teamCompletedWidget .ct-chart", data,options);

series has to be array of array

 series[[1,2,3]]

my php code

for($i=1; $i<=date("d"); $i++){

    $json_array['labels'][] = $i;

    $json_array['series'][] = intval($clicks[$i]);

 }
 echo json_encode($json_data);

returns

{"labels":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28],
  "series":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,57,5,17,0,2,0,0,0]}

Keno · Accepted Answer · 2016-10-28 01:50:26Z

1

Read the json response and recompose it into the format that chartist is expecting:

//JSON returned:

var resp ='{"labels":  [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28],"series":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,57,5,17,0,2,0,0,0]}';

var JSONObject = JSON.parse(resp);
console.log(JSONObject.labels);
//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
console.log(JSONObject.series);
//[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 57, 5, 17, 0, 2, 0, 0, 0]

// In your particular case, your response becomes the JSONObject
// So you would use resp.labels and resp.series 

var data = {"labels":JSONObject.labels, "series":[JSONObject.series]};

// var data = {"labels":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27],"series":[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,17,0,2,0,0]]};


new Chartist.Line('#chart1', data);

Result:

Codepen: Chartist JSON data format

edited Oct 28, 2016 at 1:50

answered Oct 28, 2016 at 1:17

Keno

3,9753 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alvaro Louzada Over a year ago

series has to be array of array series:[[0,2,4,5]];

Keno Over a year ago

Right, from your question I figured out you already had that covered, but not that the whole data should be inside and object.

Alvaro Louzada Over a year ago

There is my problem i m beginner and i cant figured how i can return my data right format. i will add more info to my question.

Collectives™ on Stack Overflow

PHP Json Array Data with Chartist

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related