Intéractions entre des graphiques

Lucil a écrit :
Bonjour,

Je dois faire une interface graphique. Autrement dit, je dois faire une page Internet qui sera composée de 8 graphiques. Parmi ces graphiques, il y a un barchart qui représente le nombre de documents par année, il y a un treemap qui représente des mots, une map qui représente le nombre de documents pas pays, etc.
Ces graphiques sont en place.
Désormais, le but est de mettre en place des interactions entre ces graphiques. Par exemple, si je clique sur l'année 2010 du barchart, je veux que ma carte se mette à jour pour afficher la répartition des documents par pays uniquement pour l'année 2010.

Je ne sais absolument pas comment faire.

Pouvez vous m'aider svp ?

Merci !

Bonjour,
Si tes graphiques sont au format SVG, il me semble, de mémoire, que tu peux associer un élément SVG avec une URL. Tu peux alors rediriger un clic sur cet élément vers la page de détail ou changer le contenu DOM de la page actuelle via javascript.
A contrario, si tes graphiques sont au format PNG, JPeg, etc., tu peux passer par un élément MAP (nom de balise à vérifier) permettant de créer des "images réactives" sur lesquelles des zones (ex. texte "année 2020") peuvent être associées à des URL externes ou locales sur la page HTML courante.

à la limite tu peux poser des bouts de ton code ici ça va nous aider

le js de créa de 2 charts par exemple pour voir comment intéragir

Voici le code du barchart, qui se trouve dans un fichier "controllers.js" :

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'worldwithcountries',
        renderAt: 'chart-container5',
        width: '100%',
        height: '300px',
        dataFormat: 'json',
        dataSource: {
    "chart": {
        "animation": "0",
        "showbevel": "0",
        "usehovercolor": "1",
        "canvasbordercolor": "FFFFFF",
        "bordercolor": "FFFFFF",
        "showlegend": "1",
        "showshadow": "0",
        "legendposition": "BOTTOM",
        "legendborderalpha": "0",
        "legendbordercolor": "ffffff",
        "legendallowdrag": "0",
        "legendshadow": "0",
        //"caption": "Website Visits for the month of Jan 2014",
        "connectorcolor": "000000",
        "fillalpha": "80",
        "hovercolor": "#D8D826",
        "showlabels": "0",
        "showborder": 0
            },
     "colorrange": {
         "color": [
            {
                "minvalue": "0",
                "maxvalue": "622",
                "code": "#5174FD",
                "displayValue" : "Below 622 patents",
            },
            {
                "minvalue": "1868",
                "maxvalue": "2489",
                "code": "#0028ca",
                "displayValue" : "1868-2489"
            },
            {
                "minvalue": "623",
                "maxvalue": "1244",
                "code": "#2c55f9",
                "displayValue" : "623-1244"
            },
            {
                "minvalue": "2490",
                "maxvalue": "3112",
                "code": "#1700ac",
                "displayValue" : "2490-3112"
            },
            {
                "minvalue": "1245",
                "maxvalue": "1867",
                "code": "#0130ec",
                "displayValue" : "1245-1867"
            },
            {
                "minvalue": "2491",
                "maxvalue": "1000000000000000000000000000",
                "code": "#100078",
                "displayValue" : "More than 2490"
            },
        ],
    },
    "data": [
        {
            "id": "10",
            "value": "20"
        },
        {
            "id": "11",
            "value": "548"
        },
        {
            "id": "12",
            "value": "698"
        },
        {
            "id": "13",
            "value": "455"
        },
        {
            "id": "14",
            "value": "3000"
        },
        {
            "id": "15",
            "value": "355"
        },
        {
            "id": "16",
            "value": "456"
        },
        {
            "id": "17",
            "value": "785"
        },
        {
            "id": "18",
            "value": "2458"
        },
        {
            "id": "19",
            "value": "2500"
        },
        {
            "id": "20",
            "value": "654"
        },
        {
            "id": "21",
            "value": "620"
        },
        {
            "id": "22",
            "value": "1245"
        },
        {
            "id": "23",
            "value": "1243"
        },
        {
            "id": "24",
            "value": "1865"
        },
        {
            "id": "25", //Argentina
            "value": "1868"
        },
        {
            "id": "26", //Bolivia
            "value": "1868"
        },
        {
            "id": "27", //Brazil
            "value": "57"
        },
        {
            "id": "28", //Chile
            "value": "45"
        },
        {
            "id": "29", //Colombia
            "value": "20"
        },
        {
            "id": "30",
            "value": "458"
        },
        {
            "id": "31",
            "value": "400"
        },
        {
            "id": "32",
            "value": "12"
        },
        {
            "id": "33",
            "value": "78"
        },
        {
            "id": "34",
            "value": "87"
        },
        {
            "id": "35",
            "value": "69"
        },
        {
            "id": "36",
            "value": "1547"
        },
        {
            "id": "37",
            "value": "3110"
        },
        {
            "id": "38",
            "value": "3000"
        },
        {
            "id": "39", //Algeria
            "value": "2000"
        },
        {
            "id": "40", //Angola
            "value": "1000"
        },
        {
            "id": "41", //Benin
            "value": "100"
        },
        {
            "id": "42", //Botswana
            "value": "12"
        },
        {
            "id": "43", //Burkina Faso
            "value": "54"
        },
        {
            "id": "44", //Burundi
            "value": "55"
        },
        {
            "id": "45", //Cameroon
            "value": "78"
        },
        {
            "id": "46", //Cape Verde
            "value": "25"
        },
        {
            "id": "47", //Central African Republic
            "value": "1255"
        },
        {
            "id": "48", //Chad
            "value": "3110"
        },
        {
            "id": "49", //Comoros
            "value": "2485"
        },
        {
            "id": "50", //Cote d'ivoire
            "value": "1869"
        },
        {
            "id": "51", //Democratic Republic of the Congo
            "value": "7940"
        },
        {
            "id": "52",
            "value": "5861"
        },
        {
            "id": "53",
            "value": "7858"
        },
        {
            "id": "54",
            "value": "662"
        },
        {
            "id": "55",
            "value": "760"
        },
        {
            "id": "56",
            "value": "75739"
        },
        {
            "id": "57",
            "value": "373"
        },
        {
            "id": "58",
            "value": "798"
        },
        {
            "id": "59",
            "value": "441"
        },
        {
            "id": "60",
            "value": "329"
        },
        {
            "id": "61",
            "value": "1653"
        },
        {
            "id": "62",
            "value": "455"
        },
        {
            "id": "63",
            "value": "2489"
        },
        {
            "id": "64",
            "value": "507"
        },
        {
            "id": "65",
            "value": "588"
        },
        {
            "id": "66",
            "value": "1424"
        },
        {
            "id": "67",
            "value": "798"
        },
        {
            "id": "68",
            "value": "52"
        },
        {
            "id": "69",
            "value": "622"
        },
        {
            "id": "70",
            "value": "2490"
        },
        {
            "id": "71",
            "value": "4"
        },
        {
            "id": "72",
            "value": "85"
        },
        {
            "id": "73",
            "value": "636"
        },
        {
            "id": "74",
            "value": "666"
        },
        {
            "id": "75",
            "value": "623"
        },
        {
            "id": "76",
            "value": "80"
        },
        {
            "id": "77",
            "value": "2614"
        },
        {
            "id": "78",
            "value": "2068"
        },
        {
            "id": "79",
            "value": "163"
        },
        {
            "id": "80",
            "value": "204"
        },
        {
            "id": "81",
            "value": "113"
        },
        {
            "id": "82",
            "value": "1"
        },
        {
            "id": "83",
            "value": "195"
        },
        {
            "id": "84",
            "value": "478"
        },
        {
            "id": "85",
            "value": "1569"
        },
        {
            "id": "86",
            "value": "3100"
        },
        {
            "id": "87",
            "value": "659"
        },
        {
            "id": "88",
            "value": "1867"
        },
        {
            "id": "89",
            "value": "1866"
        },
        {
            "id": "90",
            "value": "1868"
        },
        {
            "id": "91", //Congo
            "value": "7856"
        },
        {
            "id": "92",
            "value": "623"
        },
        {
            "id": "93", //Afghanistan
            "value": "622"
        },
        {
            "id": "94", //Armenia
            "value": "642"
        },
        {
            "id": "95", //Azerbaijan
            "value": "1244"
        },
        {
            "id": "96", //Bangladesh
            "value": "1243"
        },
        {
            "id": "97", //Bhutan
            "value": "1245"
        },
        {
            "id": "98", //Brunei
            "value": "1728"
        },
        {
            "id": "99", //Burma (Myanmar)
            "value": "45"
        },
        {
            "id": "100", //Cambodia
            "value": "2025"
        },
        {
            "id": "101", //China
            "value": "12254000"
        },
        {
            "id": "102",
            "value": "578"
        },
        {
            "id": "103",
            "value": "418"
        },
        {
            "id": "104",
            "value": "45"
        },
        {
            "id": "105",
            "value": "2557"
        },
        {
            "id": "106",
            "value": "557"
        },
        {
            "id": "107",
            "value": "574"
        },
        {
            "id": "108",
            "value": "840"
        },
        {
            "id": "109",
            "value": "42"
        },
        {
            "id": "110",
            "value": "546"
        },
        {
            "id": "111",
            "value": "3217"
        },
        {
            "id": "112",
            "value": "347"
        },
        {
            "id": "113",
            "value": "655"
        },
        {
            "id": "114",
            "value": "678"
        },
        {
            "id": "115",
            "value": "499"
        },
        {
            "id": "116",
            "value": "391"
        },
        {
            "id": "117",
            "value": "3029"
        },
        {
            "id": "118",
            "value": "170"
        },
        {
            "id": "119",
            "value": "113"
        },
        {
            "id": "120",
            "value": "307"
        },
        {
            "id": "121",
            "value": "3"
        },
        {
            "id": "122",
            "value": "388"
        },
        {
            "id": "123",
            "value": "2930"
        },
        {
            "id": "124",
            "value": "576"
        },
        {
            "id": "125",
            "value": "88"
        },
        {
            "id": "126",
            "value": "648"
        },
        {
            "id": "127",
            "value": "503"
        },
        {
            "id": "128",
            "value": "846"
        },
        {
            "id": "129", //Albania
            "value": "1913"
        },
        {
            "id": "130", //Andorra
            "value": "943"
        },
        {
            "id": "131", //Austria
            "value": "842"
        },
        {
            "id": "132", //Belarus
            "value": "876"
        },
        {
            "id": "133", //Belgium
            "value": "473"
        },
        {
            "id": "134", //Bosnia and Herzegovina
            "value": "823"
        },
        {
            "id": "135", //Bulgaria
            "value": "476"
        },
        {
            "id": "136", //Croatia
            "value": "39256"
        },
        {
            "id": "137", //Czech Republic
            "value": "781"
        },
        {
            "id": "138",
            "value": "760"
        },
        {
            "id": "139",
            "value": "71700"
        },
        {
            "id": "140",
            "value": "59"
        },
        {
            "id": "141",
            "value": "3111"
        },
        {
            "id": "142",
            "value": "609"
        },
        {
            "id": "143",
            "value": "309"
        },
        {
            "id": "144",
            "value": "302"
        },
        {
            "id": "145",
            "value": "319"
        },
        {
            "id": "146",
            "value": "340"
        },
        {
            "id": "147",
            "value": "586"
        },
        {
            "id": "148",
            "value": "1258"
        },
        {
            "id": "149",
            "value": "456"
        },
        {
            "id": "150",
            "value": "555"
        },
        {
            "id": "151",
            "value": "888"
        },
        {
            "id": "152",
            "value": "2585"
        },
        {
            "id": "153",
            "value": "666"
        },
        {
            "id": "154",
            "value": "622"
        },
        {
            "id": "155",
            "value": "458"
        },
        {
            "id": "156",
            "value": "3100"
        },
        {
            "id": "157",
            "value": "2589"
        },
        {
            "id": "158",
            "value": "2495"
        },
        {
            "id": "159",
            "value": "450"
        },
        {
            "id": "160",
            "value": "12"
        },
        {
            "id": "161",
            "value": "54"
        },
        {
            "id": "162",
            "value": "88"
        },
        {
            "id": "163",
            "value": "68"
        },
        {
            "id": "164",
            "value": "85"
        },
        {
            "id": "165",
            "value": "55"
        },
        {
            "id": "166",
            "value": "20"
        },
        {
            "id": "167",
            "value": "10"
        },
        {
            "id": "168",
            "value": "2"
        },
        {
            "id": "169",
            "value": "12"
        },
        {
            "id": "170",
            "value": "47"
        },
        {
            "id": "171",
            "value": "65"
        },
        {
            "id": "172", //Cyprus
            "value": "78"
        },
        {
            "id": "173",
            "value": "38"
        },
        {
            "id": "175", //Australia
            "value": "45",
        },
        {
            "id": "176",
            "value": "85"
        },
        {
            "id": "177",
            "value": "100"
        },
        {
            "id": "178",
            "value": "12"
        },
        {
            "id": "179",
            "value": "66"
        },
        {
            "id": "180",
            "value": "35"
        },
        {
            "id": "181",
            "value": "45"
        },
        {
            "id": "182",
            "value": "25"
        },
        {
            "id": "183",
            "value": "44"
        },
        {
            "id": "184",
            "value": "13"
        },
        {
            "id": "185",
            "value": "10"
        },
        {
            "id": "186",
            "value": "45"
        },
        {
            "id": "187",
            "value": "53"
        },
        {
            "id": "188",
            "value": "23"
        },
        {
            "id": "189",
            "value": "45"
        },
        {
            "id": "190", //Bahrain
            "value": "65"
        },
        {
            "id": "191",
            "value": "96"
        },
        {
            "id": "192",
            "value": "66"
        },
        {
            "id": "193",
            "value": "58"
        },
        {
            "id": "194",
            "value": "22"
        },
        {
            "id": "195",
            "value": "100"
        },
        {
            "id": "196",
            "value": "65"
        },
        {
            "id": "197",
            "value": "45"
        },
        {
            "id": "198",
            "value": "74"
        },
        {
            "id": "199",
            "value": "55"
        },
        {
            "id": "200",
            "value": "20"
        },
        {
            "id": "201",
            "value": "98"
        },
        {
            "id": "202",
            "value": "100"
        },
        {
            "id": "203", //Cayman Islands
            "value": "47"
        },
        {
            "id": "204",
            "value": "55"
        },
        {
            "id": "205",
            "value": "68"
        },
        {
            "id": "08",
            "value": "58"
        },
        {
            "id": "02", //Bahamas
            "value": "47"
        },
        {
            "id": "01", //Antigua and Barbuda
            "value": "11"
        },
        {
            "id": "09",
            "value": "11"
        },
        {
            "id": "06", //Costa Rica
            "value": "21"
        },
        {
            "id": "04", //Belize
            "value": "45"
        },
        {
            "id": "07", //Cuba
            "value": "50",
        },
        {
            "id": "03", //Barbados
            "value": "100",

        },
        {
            "id": "05", //Canada
            "value": "55",
            
       }
    ],

}

    }).render();
});

Ici vous avez un graphique sur les mots clés :

<!DOCTYPE html>
<meta charset="utf-8">
<style>

text {
  font: 9px sans-serif;
  cursor:pointer;
}
circle{
  cursor:pointer;
}


</style>
<!--<body onclick="alert('toto')">-->

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="d3-master"></script>

<script>
var diameter = 350, //lm modif : taille graphique
    format = d3.format(",d"),
    color = d3.scale.category20c();

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

d3.json("flare.json", function(error, root) {
  if (error) throw error;

  var node = svg.selectAll(".node")
      .data(bubble.nodes(classes(root))
      .filter(function(d) { return !d.children; }))
    .enter().append("g")
      .attr("class", "node") //lm modif : cette ligne qui affiche le bubble chart, mais ne change plus les couleurs lorsqu'on clique sur une bulle
      .attr("id", function(d) { return "circle"+d.id; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

//lm modif : début met les tooltip
  node.append("title")
      .text(function(d) { return d.className + ": " + format(d.value); });
//lm modif : fin met les tooltip

//lm modif : début pour ajouter le cercle vert autour du titre + pour rendre les bulles cliquables et changer la couleur de la bulle sélectionnée
 



//lm modif : colore toutes les bulles
 /* node.append("circle")
      .attr("r", function(d) { return d.r; })
      .style("fill", "#D8D826")
      .on("click", click);
        function click(d){
          //console.log("toto");
          node.select("circle").style("fill","#FF00FF");
      };*/






//lm modif : début créé les bulles et colore qu'1 seule bulle
node.append("circle")
      .attr("r", function(d) { return d.r; })
      .style("fill", "#D8D826")
      .on("click", click);
        function click(d){
          console.log(d);
          //alert("toto");
          //d3.select(".node").style("fill","#FF00FF"); //lm modif : colore le texte du cercle
          //d3.select("circle").style("fill","#FF3333");
          if(d3.select(d)){
            d3.selectAll("circle").style("fill","#D8D826");
            d3.select("#circle"+d.id).select("circle").style("fill","#FF3333");
};
};

//lm modif : fin met les bulles et colore qu'1 seule bulle



//.style("fill", function(d) { return color(d.packageName); });
//lm modif : fin pour ajouter le cercle vert autour du titre

//lm modif : début met les noms dans les cercles et colore le texte d'une seule bulle
  node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.className.substring(0, d.r / 3); })
      .on("click",clicktext);
      function clicktext(d){
        //if(d3.select(this)){
          //node.select("circle").style("fill","#D8D826"); //lm modif : pour réinitialiser les bulles en vert
          //d3.select("circle").style("fill","#FF3333"); //lm modif : là ca colore le root : dire qu'on veut colorer le crcle du this selectionné
                    if(d3.select(d)){
            d3.selectAll("circle").style("fill","#D8D826");
            d3.select("#circle"+d.id).select("circle").style("fill","#FF3333");
        };

      };
  });

//lm modif : fin met les noms dans les cercles et colore le texte d'une seule bulle



// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];

  function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: node.size, id: node.id});
  }

  recurse(null, root);
  return {children: classes};
}


d3.select(self.frameElement).style("height", diameter + "px");


</script>
</body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"></script>

Avec les données de celui ci ici :

{

 "children": [
  {

   "children": [
    {

     "children": [
      {"id":"1", "name": "Petrol", "size": 10800},
      {"id":"2", "name": "Electricity", "size": 10600},
      {"id":"3", "name": "Technology", "size": 10400},
      {"id":"4", "name": "Oleoduc", "size": 10200},
      {"id":"5", "name": "International", "size": 10000},
      {"id":"6", "name": "Future", "size": 9800},
      {"id":"7", "name": "Agglomeration", "size": 9600},
      {"id":"8", "name": "Plastic", "size": 9400},
      {"id":"9", "name": "Hierarchie", "size": 9200},
      {"id":"10", "name": "City", "size": 9000},
      {"id":"11", "name": "Keyword", "size": 8800},
      {"id":"12", "name": "Map", "size": 8600},
      {"id":"13", "name": "Firm", "size": 8400},
      {"id":"14", "name": "Manufacture,g", "size": 8200},
      {"id":"15", "name": "World", "size": 8000},
      {"id":"16", "name": "Documents", "size": 7800},
      {"id":"17", "name": "Communication", "size": 7600},
      {"id":"18", "name": "Community", "size": 7400},
      {"id":"19", "name": "Structure", "size": 7200},
      {"id":"20", "name": "Infrastructure", "size": 7000},
      {"id":"21", "name": "Law", "size": 6800},
      {"id":"22", "name": "Mountain", "size": 6600},
      {"id":"23", "name": "Sea", "size": 6400},
      {"id":"24", "name": "Tree", "size": 6200},
      {"id":"25", "name": "Green", "size": 6000},
      {"id":"26", "name": "Nature", "size": 5800},
      {"id":"27", "name": "Paper", "size": 5600},
      {"id":"28", "name": "Chemical", "size": 5400},
      {"id":"29", "name": "Bus", "size": 5200},
      {"id":"30", "name": "Email", "size": 5000},
      {"id":"31", "name": "Economy", "size": 4800},
      {"id":"32", "name": "Phone", "size": 4600},
      {"id":"33", "name": "Pollution", "size": 4400},
      {"id":"34", "name": "Rock", "size": 4200},
      {"id":"35", "name": "Light", "size": 4000},
      {"id":"36", "name": "Weather", "size": 3800},
      {"id":"37", "name": "Environment", "size": 3600},
      {"id":"38", "name": "Country", "size": 3400},
      {"id":"39", "name": "New", "size": 3200},
      {"id":"40", "name": "Money", "size": 3000},
      {"id":"41", "name": "Bike", "size": 2800},
      {"id":"42", "name": "Energy", "size": 2600},
      {"id":"43", "name": "Whoole", "size": 2400},
      {"id":"44", "name": "Wood", "size": 2200},
      {"id":"45", "name": "Water", "size": 2000},
      {"id":"46", "name": "Road", "size": 1800},
      {"id":"47", "name": "Sun", "size": 1600},
      {"id":"48", "name": "Car", "size": 1400},
      {"id":"49", "name": "Gas", "size": 1200},
      {"id":"50", "name": "Oil", "size": 1000}

     ]
    },

    {

     "children": [

     ]
    }
   ]
  },

  {

   "children": [

   ]
  }
 ]
}

Je ne comprend pas du tout comment faire. Pourriez vous me faire un exemple svp ? Soit avec ces graphiques, soit avec d'autres inventés ? Merci beaucoup

Il faut utiliser des onclick. Mais comment ca marche ?

petite quesiton complémentaire...

ton slider ??? il est dans le chart ou en dehors ???

sinon pour l'exemple désolé, mais déjà je n'intéragit pas sur de multiples charts, ensuite je n'utilise pas ton pluggins donc ej le connais pas pour savoir comment intéragir...


masi bon il suffit souvent de lire du js pour le comprendre


dans ton cas je vois que c'es tton slider qui agit sur l'élément #amount

Si le slider est sorti des contextes, je suppose que tu as plusieurs ID de charts, donc dnas la fonction du slider il faut envoyer les values à tous les éléments de type amount présent dan sles charts et ça devrait fonctionner

ton charts là tu l'appeles au buot de la déclaration mais normalement tu peux aussi appeler comme ça

$('#container").chart( la tu met ce que tu veux );

il aurait été mieux de nommer les technologies avec des liens vers ceux ci au lieu du code.

J'utilise javascript ( évident ..pas d' autre language coté client )) , mais aussi (les librairies payantes) fusioncharts ,highcharts , et gratuite d3 ( svg pour l'animation) .


Un article général est toujours intéressant pour avoir une vue d 'ensemble sur le monde des "chart".

Je suppose que le code du rendu est en SVG car me parait plus logique qu'un rendu raster ...mais bon l'auteur ne précise pas cette information .


En regardant la doc et les démos et le code source des sites suivant
fusionchart : le rendu svg est fait a partir du format est Json /xml
fusion chart contient 5 produits :fusioncharts XT , fusion widgets XT , Powercharts suite XT , fusions map XT , fusion charts Suite XT

highcharts : le rendu est basé aussi sur svg !!! et 4 produits payants : Highcharts JS Highstock JS Highmaps JS Highcharts Cloud .

d3 : est plus une librairie d algo ( axe unité interval projection) plus que de rendu car ne supporte que SVG et pas VML !! . Pourquoi utiliser d3.js si highchart et fusionchart gère déja svg/VML et que highcharts gère les cartes .Il semble que se soit pour l interactivité donc d3.js + ajax voir ici le code .



il faut que le client envoie des paramètres au serveur qui retourne les données au client au format Json qui seront traitées /compatible avec l' API ( highchart ou fusion chart) pour mettre a jour les données et la vue du graphique qui doit changé !!

Donc mise en oeuvre de ajax coté client et d une api coté serveur pour créer le fichier de données ( JSon mais aussi xml ... ) .

La question est donc
1 sous quels formats / stockages se trouvent les données coté serveur ? ( table dans base de données , syntaxe spécifique a l API dans JSON, excel , csv ,xml ) ...
je ne sais pas si cela est utile highchartphp , fusion chartphp .
chaque grahiquedoit avoir un id pour les identifier et affectuer les modification du contenu et rendu.
2 quelles technologies utilisez vous coté serveur ? En vrac a vérifier : zend/symfony/dotnet ? , zope/wordpress ? , asp /php wordpress extension for highchart .

Cordialement
Modifié par 75lionel (30 Jul 2016 - 11:49)