Updating a dynamic Dojo chart with specified x and y values_问答_开发者

I'm building a website which requires a line graph to be updated dynamically. For this I'm usi开发者_如何学Pythonng the dojo library which provides the necessary charting functions I need to achieve this, based fully on this example available on their website:

http://dojotoolkit.org/documentation/tutorials/1.6/charting_advanced/
http://dojotoolkit.org/documentation/tutorials/1.6/charting_advanced/demo/store-series.html

This example show me how to update the graph with a new value of y and increments the value of x by one. What I need is to update the chart with a custom value of (x,y) and plot it but I cant't find a way to do this. I tried forcing the values of x and y directly on the data store but with no results, the chart won't load:

            // Initial data
            var data = [
                // This information, presumably, would come from a database or web service
                { id: 1, x:0, y:20, site: 1 },
                { id: 2, value: 16, site: 1 },
                { id: 3, value: 11, site: 1 },
                { id: 4, value: 18, site: 1 },
                { id: 5, value: 26, site: 1 },
                { id: 6, value: 19, site: 2 },
                { id: 7, value: 20, site: 2 },
                { id: 8, value: 28, site: 2 },
                { id: 9, value: 12, site: 2 },
                { id: 10, value: 4, site: 2 }
            ];


            // Create the data store
            // Store information in a data store on the client side
            var store = dojo.store.Observable(new dojo.store.Memory({
                data: {
                    identifier: "id",
                    label: "Users Online",
                    items: data
                }
            }));

Google didn't help me much more. How can I dynamically update this data store with a custom (x,y) value pair? Is there any other way to do this?

Best Regards

Let's say that you change some of the (x,y) values using an text input. The solution quite simple (if I understood your question):

dojo.connect(dijit.byId("someInputElement"), "onChange", 
                 function(){
                            chart.updateSeries("bla bla", new_data).render();
                            //new data is the data store with custom(x,y)
                          });

Hope it helps!

Ok this is going to be a bit long and i know i am 7 years late, but here is my code for creating a dynamically updating chart.

    var start=1;
        var end=10;
        require([
            'dojo/on',
            'dojo',
            'dojo/ready',
            // Require the basic chart class
           "dojox/charting/Chart",
           // Require the theme of our choosing
           "dojox/charting/themes/MiamiNice",
           //     We want to plot Columns
           "dojox/charting/plot2d/Columns",
           // Require the highlighter
           "dojox/charting/action2d/Highlight",
           "dojo/store/Observable",
           "dojo/store/Memory",
           'dojox/charting/StoreSeries',
           //    We want to use Markers
           "dojox/charting/plot2d/Markers",
           //    We&#x27;ll use default x/y axes
           "dojox/charting/axis2d/Default",
           // Wait until the DOM is ready
           "dojo/domReady!",
           "dojo/dom"
        ], function(on, dojo, ready, Chart, theme, ColumnsPlot, Highlight, ObservableStore, MemoryStore, StoreSeries) {
            ready(function() {
            // Define the data
           var data = [
            // This information, presumably, would come from a database or web service
            // Just hardcoded data for now.. Site is set to 2 when we want to hide an element
            { id: 1, value: 20, site: 1 },
            { id: 2, value: 16, site: 1 },
            { id: 3, value: 11, site: 1 },
            { id: 4, value: 18, site: 1 },
            { id: 5, value: 26, site: 1 },
            { id: 6, value: 19, site: 1 },
            { id: 7, value: 20, site: 1 },
            { id: 8, value: 28, site: 1 },
            { id: 9, value: 12, site: 1 },
            { id: 10, value: 4, site: 1 }
            ];

            // Create the data store
            // Store information in a data store on the client side
            var store = new ObservableStore(new MemoryStore({
            data: {
            idProperty: "id",
            label: "Users Online",
            items: data
            }
            }));
           // Create the chart within it's "holding" node
           var chart = new Chart("chartNode",{
            title: "Random Data(Sliding)",
            titlePos: "top",
            titleGap: 25,
            titleFont: "normal normal normal 15pt Arial",
            titleFontColor: "orange"
          });
           // Set the theme
           chart.setTheme(theme);
           // Add the only/default plot
           chart.addPlot("default", {
               type: ColumnsPlot,
               markers: true,
               gap: 5
           });
           // Add axes. We recreated x axis every time the user slides to change the values
           chart.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: false,
                    font: "normal normal 10pt Arial",
                labels: [{value: 1, text: start},
                   {value: 2, text: start+1},
                   {value: 3, text: start+2},
                   {value: 4, text: start+3},
                   {value: 5, text: start+4},
                   {value: 6, text: start+5},
                   {value: 7, text: start+6},
                   {value: 8, text: start+7},
                   {value: 9, text: start+8},
                   {value: 10, text: start+9},
                ]
           });
           chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" });
           // Add the series of data
           chart.addSeries("y", new StoreSeries(store, { query: { site: 1 }, sort: { attribute: "id", ascending: true} }, "value"));
           // Highlight!
           new Highlight(chart,"default");
           // Render the chart!
           chart.render();
           // Forward button to slide forward adding a random item to the chart
           var forButton = dojo.byId("forward-btn");
           on (forButton, "click", function(evt){
            // console.log(start + ' ' + end);
            end += 1;
            var item = {
                id: end,
                value: Math.floor((Math.random() * 16) + 1),
                site: 1
            } 
             //hide starting element
            store.put({id: start,value: store.get(start).value,site: 2}, {overwrite: true});
            start+=1;
            //put the new value at the end of the store
            store.put(item, {overwrite: true});
            //recreated x axis
            chart.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: false,
                    font: "normal normal 10pt Arial",
                labels: [{value: 1, text: start},
                   {value: 2, text: start+1},
                   {value: 3, text: start+2},
                   {value: 4, text: start+3},
                   {value: 5, text: start+4},
                   {value: 6, text: start+5},
                   {value: 7, text: start+6},
                   {value: 8, text: start+7},
                   {value: 9, text: start+8},
                   {value: 10, text: start+9},
                ]
           });
         }

            );
            //backButton to slide back towards the start. Same as forward, but reversing the effects
            var backButton = dojo.byId("backward-btn");
           on (backButton, "click", function(evt){    
               if(start>1){
                start-=1; 
                end-=1;
                // console.log(start + ' ' + end);
                store.put({id: start,value: store.get(start).value,site: 1}, {overwrite: true});
                store.put({id: end+1, value: store.get(end+1).value, site: 2}, {overwrite: true});
                store.query({site: 1},{sort: [{attribute: "id", ascending: true}]}).forEach(function(newItem){
                    store.remove(newItem.id);
                    store.add(newItem);
                    // console.log(newItem);
                })
                chart.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: false,
                    font: "normal normal 10pt Arial",
                labels: [{value: 1, text: start},
                   {value: 2, text: start+1},
                   {value: 3, text: start+2},
                   {value: 4, text: start+3},
                   {value: 5, text: start+4},
                   {value: 6, text: start+5},
                   {value: 7, text: start+6},
                   {value: 8, text: start+7},
                   {value: 9, text: start+8},
                   {value: 10, text: start+9},
                ]
           });
               }
               else{
                   //And a simple alert to inform the user that he can not go backwards anymore
                   alert('You hit the start of the data!');
               }
         }
            );
            });
        });

and in html i have two buttons with id's as explained in the button elements, as well as a chartNode to implement the chart. I can also put my dojoConfig if someone needs it but i got from the tutorials so no big knowledge hidden there.