开发者

Jquery flot co-dependent line + pie chart

开发者 https://www.devze.com 2023-03-17 18:46 出处:网络
I\'ve created an ajax driven flot line chart that I would like to have represented along side a flot pie chart using the summed data from the line chart.

I've created an ajax driven flot line chart that I would like to have represented along side a flot pie chart using the summed data from the line chart.

Data for the line chart might look something like this:

var datasets = {
    "usa": {
        label: "USA",
        data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]]
    },        
    "russia": {
        label: "Russia",
        data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [199开发者_C百科4, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]]
    },
    etc...
};

What would be the easiest way aggregate this data so that it would be fit for the pie chart plug-in? If I feed this current result set to the pie chart, it will only consider the first value of each dataset.

Thanks!


It would probably be best to graph the the value separately for each year, like this:

Make the year selectable by some appropriate component such as increment/decrement buttons. For the year selected, plot the respective value for each country. For example, in year 1988, plot 483994 for USA and 218000 for Russia.


I ended up using an approach that combined the results for each chart into one json response on the server side and then pulled them out on the client like thus:

var datasets = {
"usa-line": {
    label: "USA",
    data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]]
},  
"usa-pie": {
    label: "USA",
    data: [[1, TOTAL GOES HERE]]]
},        
"russia-line": {
    label: "Russia",
    data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]]
},
"russia-pie": {
    label: "Russia",
    data: [[1, TOTAL GOES HERE]]]
}
};

Then on the callback for the ajax event, I parsed them out into separate datasets for each graph:

$.ajax({
        type: "POST",
        dataType: 'json',
        url: "url goes here",
        data: "data goes here",
        success: function (datasets) {         
            linedata = [];
            pieData = [];

            $.each (datasets, function (objName) {
                if(objName.indexOf('-line') != -1)
                    linedata .push(datasets[objName]);
                        else
                    pieData.push(datasets[objName]);
            });                       

            $.plot(plotarea, linedata , options /* options defined elsewhere */);
            $.plot(piearea, pieData, pieOptions /* pieOptions defined elsewhere */);  
        }
    });
0

精彩评论

暂无评论...
验证码 换一张
取 消