CODEWITHSUNDEEP
phparraysjsonmorris.js
James Kirkby
James Kirkby

Reputation: 1834

morris.js parse json string error

Im using morris.js to plot some stats over time on a graph.

$(document).ready(function() {

  if($('#time-graph').length) {
    var week_data = <?php echo($stat_array)?>;
    Morris.Line({
      element : 'time-graph',
      data : week_data,
      xkey : 'period',
      ykeys : 'temp_avg',
      labels : ['temp_avg','temp_avg'],
      events : ['2014-06-01 00:00:01', '2014-6-30 23:55:55'],
      ymin : -1.0,
      ymax : 50.0
    });
  }

$stat_array contains a json string, that is formatted in the following way, retrieved earlier in the application 

[{"period":"2014-06-24 18:37:44","temp_avg":"46.845"},{"period":"2014-06-24 18:38:01","temp_avg":"47.28"},{"period":"2014-06-24 18:40:01","temp_avg":"47.185"},{"period":"2014-06-24 18:42:01","temp_avg":"47.4675"},{"period":"2014-06-24 18:44:01","temp_avg":"47.3125"},{"period":"2014-06-24 18:46:01","temp_avg":"48"},{"period":"2014-06-24 18:48:01","temp_avg":"47.2175"},{"period":"2014-06-24 18:50:01","temp_avg":"48"},{"period":"2014-06-24 18:52:01","temp_avg":"48.095"}];

But the graph is not formatting correctly as shown bellow

enter image description here

if any one can point me where i'm going wrong would be great :D

Upvotes: 1

Views: 762

Answers (1)

user1978142
user1978142

Reputation: 7948

Actually, you're just missing a couple of things, first off, remove the ; semi-colon on your object.

Second, which I don't know if it's a typo, but you missed the closing on $(document).ready({});.

Finally, dont be surprised if your data is cluttered on one particular area, as your data seems to be on 2014-06-24 18:MM:SS differences only. I just adjusted the range to you would see the line graph clearly. Sample Output

Example:

<?php $stat_array = '[{"period":"2014-06-24 18:37:44","temp_avg":"46.845"},{"period":"2014-06-24 18:38:01","temp_avg":"47.28"},{"period":"2014-06-24 18:40:01","temp_avg":"47.185"},{"period":"2014-06-24 18:42:01","temp_avg":"47.4675"},{"period":"2014-06-24 18:44:01","temp_avg":"47.3125"},{"period":"2014-06-24 18:46:01","temp_avg":"48"},{"period":"2014-06-24 18:48:01","temp_avg":"47.2175"},{"period":"2014-06-24 18:50:01","temp_avg":"48"},{"period":"2014-06-24 18:52:01","temp_avg":"48.095"}]'; ?>

<div id="time-graph"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    Morris.Line({
        element: 'time-graph',
        data: <?php echo $stat_array; ?>,
        xkey: 'period',
        ykeys: ['temp_avg'],
        labels: ['temp_avg'],
        events : ['2014-06-24 18:00:00', '2014-6-24 18:59:59'],
        ymin : -1.0,
        ymax : 50.0
    });
});
</script>

Upvotes: 1

Related Questions