2

Note: How to convert json data series to rickshaw series.

I am getting json data series from the url, I want to use this series for drawing the graph in rickshaw and angularjs.

Json Data series from url

{"series": [{"meter": "instance", "data": [{"y": 82.0, "x": "2015-07-14T23:58:00"}, {"y": 142.0, "x": "2015-07-15T23:58:10"}, {"y": 144.0, "x": "2015-07-16T23:58:10"}, {"y": 139.0, "x": "2015-07-17T23:56:17"}, {"y": 144.0, "x": "2015-07-18T23:56:18"}, {"y": 144.0, "x": "2015-07-19T23:56:17"}, {"y": 277.0, "x": "2015-07-20T23:50:09"}, {"y": 294.0, "x": "2015-07-21T23:51:34"}, {"y": 135.0, "x": "2015-07-22T07:21:34"}], "name": "demo", "unit": "instance"}], "settings": {}}

I use the above series according to the series use in rickshaw but it is not working..

 angular.module('hz.dashboard.ceilometer', [ 'ngSanitize' ])
        .controller('ceiloCtrl', function AppCtrl ($scope) {           
            var text='{"series": [{"meter": "instance", "data": [
                     {"y": 82.0, "x": "2015-07-14T23:58:00"},  
                     {"y": 142.0, "x": "2015-07-15T23:58:10"}, 
                     {"y": 144.0, "x": "2015-07-16T23:58:10"}, 
                     {"y": 139.0, "x": "2015-07-17T23:56:17"}, 
                     {"y": 144.0, "x": "2015-07-18T23:56:18"}, 
                     {"y": 144.0, "x": "2015-07-19T23:56:17"}, 
                     {"y": 277.0, "x": "2015-07-20T23:50:09"}, 
                     {"y": 294.0, "x": "2015-07-21T23:51:34"}, 
                     {"y": 135.0, "x": "2015-07-22T07:21:34"}], 
                     "name": "demo", "unit": "instance"}], "settings": {}}';
            var obj =JSON.parse(text);    
            var graph = new Rickshaw.Graph( {
                element: document.getElementById("chart"),
                width: 960,
                height: 500,
                renderer: 'line',                   

                series: [
                    {
                       color: "#c05020",
                       data: obj.series[0].data,
                    }
                ]
            } );

            graph.render();
            var hoverDetail = new Rickshaw.Graph.HoverDetail({
                graph: graph,
                xFormatter: function(x){
                    return new Date(x*1000).toString();
                }
            });

            var xAxis = new Rickshaw.Graph.Axis.Time( {
                graph: graph,
                ticksTreatment: ticksTreatment,
                timeFixture: new Rickshaw.Fixtures.Time.Local()
            } );

            xAxis.render();

        });
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
geeks
  • 2,025
  • 6
  • 31
  • 49

0 Answers0