javascript - Dynamically Add Data Points To Rickshaw Graph - Stack Overflow

admin管理员组

文章数量:1417031

So I'm using the Rickshaw graphing library and I was wondering how to dynamically add points to a graph.

I have a graph instantiated like this:

        @seriesData = [ [], [], [] ]
        random = new Rickshaw.Fixtures.RandomData(150)


        for (var i = 0; i < 50; i++) {
            random.addData(self.seriesData)
        }


        @graph = new Rickshaw.Graph(
            element: document.getElementById("chart")
            width: 550
            height: 300
            renderer: 'area'
            series: [
                {
                    color: "#c05020"
                    data: self.seriesData[0]
                    name: 'One'
                }, {
                    color: "#30c020"
                    data: self.seriesData[1]
                    name: 'Two'
                }, {
                    color: "#2791d7"
                    data: self.seriesData[2]
                    name: 'Three'
                }
            ]
        )

        @graph.render()

        hoverDetail = new Rickshaw.Graph.HoverDetail(
            graph: self.graph
        )

        legend = new Rickshaw.Graph.Legend(
            graph: self.graph
            element: document.getElementById('legend')

        )

        shelving = new Rickshaw.Graph.Behavior.Series.Toggle(
            graph: self.graph
            legend: legend
        )

        axes = new Rickshaw.Graph.Axis.Time(
            graph: self.graph
        )
        axes.render()

And I have data ing in through socket.io like this:

    app.on('data',
        (one, two, three) =>
            // Dynamically add data points to graph
    )

And I was wondering how to append these three points to the graph. I can't find any good documentation for this library. I know it's built on top of d3.js, but I'm not sure how to incorporate these methods into my graph.

Any help would be appreciated.

So I'm using the Rickshaw graphing library and I was wondering how to dynamically add points to a graph.

I have a graph instantiated like this:

        @seriesData = [ [], [], [] ]
        random = new Rickshaw.Fixtures.RandomData(150)


        for (var i = 0; i < 50; i++) {
            random.addData(self.seriesData)
        }


        @graph = new Rickshaw.Graph(
            element: document.getElementById("chart")
            width: 550
            height: 300
            renderer: 'area'
            series: [
                {
                    color: "#c05020"
                    data: self.seriesData[0]
                    name: 'One'
                }, {
                    color: "#30c020"
                    data: self.seriesData[1]
                    name: 'Two'
                }, {
                    color: "#2791d7"
                    data: self.seriesData[2]
                    name: 'Three'
                }
            ]
        )

        @graph.render()

        hoverDetail = new Rickshaw.Graph.HoverDetail(
            graph: self.graph
        )

        legend = new Rickshaw.Graph.Legend(
            graph: self.graph
            element: document.getElementById('legend')

        )

        shelving = new Rickshaw.Graph.Behavior.Series.Toggle(
            graph: self.graph
            legend: legend
        )

        axes = new Rickshaw.Graph.Axis.Time(
            graph: self.graph
        )
        axes.render()

And I have data ing in through socket.io like this:

    app.on('data',
        (one, two, three) =>
            // Dynamically add data points to graph
    )

And I was wondering how to append these three points to the graph. I can't find any good documentation for this library. I know it's built on top of d3.js, but I'm not sure how to incorporate these methods into my graph.

Any help would be appreciated.

• javascript
• coffeescript
• socket.io
• rickshaw

Share Improve this question Follow asked Aug 9, 2013 at 4:10 Connor BlackConnor Black 7,1811212 gold badges4040 silver badges7171 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I envision two scenario that could solve your question:

• Using the fixed Window Series for Streaming Data
• leveraging the fact that arrays in javascript are passed by reference. A demo is available here

.

var data = [
        {
            data: [ { x: 0, y: 120 }, { x: 1, y: 890 }, { x: 2, y: 38 }, { x: 3, y: 70 }, { x: 4, y: 32 } ],
            color: "#c05020"
        }, {
            data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ],
            color: "#30c020"
        }
];


var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    renderer: 'line',
    height: 300,
    width: 800,
    series: data
} );

var y_ticks = new Rickshaw.Graph.Axis.Y( {
    graph: graph,
    orientation: 'left',
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
    element: document.getElementById('y_axis'),
} );

graph.render();


$('button#add').click(function() {
    data.push({
            data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ],
            color: "#6060c0"
    });
    graph.update();
});

本文标签： javascriptDynamically Add Data Points To Rickshaw GraphStack Overflow