当用户使用ajax和jquery单击div时，动态显示flot饼图

Question

have a look at this image

我有3个flot图，当用户点击这些图时，我应该在另一个div上显示相同的图。每当用户点击任何这些图时，该图应该显示在第4个图上，它应该动态改变而不重新加载页面。图形是用jquery绘制的。

    |graph1| |graph2| |graph3|
            |graph4| 

如何使用ajax和jquery实现它？

pie.js

var piedata1 = [
    { label: "A", data: [[1,val['a1']]], color: '#D9534F'},
    { label: "B", data: [[1,val['a2']]], color: '#1CAF9A'},
    { label: "C", data: [[1,val['a3']]], color: '#F0AD4E'},
 ]; 
var piedata2 = [
    { label: "A", data: [[1,val['a1']]], color: '#D9534F'},
    { label: "B", data: [[1,val['a2']]], color: '#1CAF9A'},
    { label: "C", data: [[1,val['a3']]], color: '#F0AD4E'},
 ];  
var piedata3 = [
    { label: "A", data: [[1,val['a1']]], color: '#D9534F'},
    { label: "B", data: [[1,val['a2']]], color: '#1CAF9A'},
    { label: "C", data: [[1,val['a3']]], color: '#F0AD4E'},
 ];

jQuery(document).ready(function(){

"use strict"; 
jQuery.plot('#piechart1', piedata1, {
    series: {
        pie: {
            show: true,
            radius: 1,
            label: {
                show: false,
                radius: 2/3,
                formatter: labelFormatter1,
                threshold: 0.1
            }
        }
    },
    grid: {
        hoverable: true,
        clickable: true
    },
    legend: {
    show: false
   },
  tooltip: {
    show: true,
    content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
    shifts: {
      x: 20,
      y: 0
    },
    defaultTheme: false
  }
}); 
function labelFormatter1(label, series) {
    return "<div style='font-size:6pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
}
jQuery.plot('#piechart2', piedata2, {
    series: {
        pie: {
            show: true,
            radius: 1,
            label: {
                show: false,
                radius: 2/3,
                formatter: labelFormatter2,
                threshold: 0.1
            }
        }
    },
    grid: {
        hoverable: true,
        clickable: true
    },
    legend: {
    show: false
   },
  tooltip: {
    show: true,
    content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
    shifts: {
      x: 20,
      y: 0
    },
    defaultTheme: false
  }
}); 
function labelFormatter2(label, series) {
    return "<div style='font-size:6pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
}
jQuery.plot('#piechart3', piedata3, {
    series: {
        pie: {
            show: true,
            radius: 1,
            label: {
                show: false,
                radius: 2/3,
                formatter: labelFormatter3,
                threshold: 0.1
            }
        }
    },
    grid: {
        hoverable: true,
        clickable: true
    },
    legend: {
    show: false
   },
  tooltip: {
    show: true,
    content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
    shifts: {
      x: 20,
      y: 0
    },
    defaultTheme: false
  }
}); 
function labelFormatter3(label, series) {
    return "<div style='font-size:6pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
}
});

如何使用ajax和jquery来解决这个问题？