sources Charting DONNÉES mixtes dans la même carte

Question

Je suis nouveau dans DOJO et je posterai ici pour la première fois. J'ai un problème de créer plusieurs lignes sur le même graphique.

Je l'ai fait un test simple pour simuler des données et il fonctionne

  dojo.require("dojox.charting.Chart2D");

  makeCharts = function(){
    //crée un nouvel objet graphique
    var chart1 = new dojox.charting.Chart2D("simplechart");
    chart1.addPlot("line", {type: "Lines"});

    chart1.addPlot("space", {type: "Areas", hAxis: "space x", vAxis: "space y"});
    chart1.addPlot("histo", {type: "Bars", gap: 6, hAxis: "histo x", vAxis: "histo y"});

    chart1.addAxis("histo x", {
      labels: [{value: 1, text: "Jan"}, {value: 2, text: "Feb"},
        {value: 3, text: "Mar"}, {value: 4, text: "Apr"},
        {value: 5, text: "May"}, {value: 6, text: "Jun"},
        {value: 7, text: "Jul"}, {value: 8, text: "Aug"},
        {value: 9, text: "Sep"}, {value: 10, text: "Oct"},
        {value: 11, text: "Nov"}, {value: 12, text: "Dec"}]
    });
    chart1.addAxis("histo y", {vertical: true,
      max: 10,
      stroke: "green",
      fontColor: "black",
      majorTick: {color: "red", length: 6},
      minorTick: {stroke: "black", length: 3}});

    chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7],
    {plot:"line", stroke: {color:"red"}});
   chart1.addSeries("Series 2", [1, 2, 4, 2, 1, 6, 4, 5],
   {plot: "space", stroke: {color:"blue"}, fill: "lightblue"});
    chart1.addSeries("Series 3", [1, 2, 2, 3, 4, 5, 5, 7],
    {plot: "histo", stroke: {color:"green"}, fill: "lightgreen"});

    chart1.render();

J'ai créé un autre fichier php où je transforme mes données de Mysql à JSON. Je veux maintenant mettre l'URL de ma source dojo AddSeries. Il y aura plusieurs sources, fichiers différents sources de données.

Je ne sais pas où mettre mon URL dans le code.

Je vous remercie de l'aide.

---

Merci pour votre réponse.

J'ai essayé cela, mais la « série 1 » ne fonctionne pas:

      dojo.require("dojox.charting.Chart2D");
      dojo.require("dojo.data.ItemFileWriteStore");
      makeCharts = function(){
              test_store = new dojo.data.ItemFileWriteStore({url: 'data_chart.php'});
        var chart1 = new dojox.charting.Chart2D("simplechart");
        chart1.addPlot("line", {type: "Lines"});
        chart1.addPlot("space", {type: "Areas", hAxis: "space x", vAxis: "space y"});
        chart1.addPlot("histo", {type: "Bars", gap: 6, hAxis: "histo x", vAxis: "histo"});
        chart1.addAxis("histo x", {
          labels: [{value: 1, text: "Jan"}, {value: 2, text: "Feb"},
            {value: 3, text: "Mar"}, {value: 4, text: "Apr"},
            {value: 5, text: "May"}, {value: 6, text: "Jun"},
            {value: 7, text: "Jul"}, {value: 8, text: "Aug"},
            {value: 9, text: "Sep"}, {value: 10, text: "Oct"},
            {value: 11, text: "Nov"}, {value: 12, text: "Dec"}]});
        chart1.addAxis("histo y", {vertical: true, max: 10, stroke: "green",    fontColor:"black", majorTick: {color: "red", length: 6}, minorTick: {stroke: "black", length: 3}});
        chart1.addSeries("Series 1", {data :test_store,plot:"line", stroke: {color:"red"}});
{color:"black"}});
        chart1.addSeries("Series 2", [1, 2, 4, 2, 1, 6, 4, 5],
        {plot: "space", stroke: {color:"blue"}, fill: "lightblue"});
        chart1.addSeries("Series 3", [1, 2, 2, 3, 4, 5, 5, 7],
        {plot: "histo", stroke: {color:"green"}, fill: "lightgreen"});
        chart1.render();

Mon data_chart.php est un test: <?php echo"[1, 2, 2, 3, 4, 5, 5, 7]"; ?>

Je suis perdu, je ne sais pas comment résoudre ce problème.

Answer 1

Je voudrais utiliser le dojox.data.DataChart . Vous devez utiliser un datastore pour passer dans les données. Voir QuickStart-données-usingdatastores et < a href = "http://dojotoolkit.org/reference-guide/dojo/data.html#dojo-data" rel = "nofollow noreferrer"> dojo.data .

D'abord utiliser un dojo.data.ItemFileReadStore . Si cela fonctionne bien, utilisez un datastore composite, qui enveloppe les autres magasins de données pour obtenir vos données à partir de plusieurs sources (Vous pourriez devoir créer cette classe par vous-même)

- EDIT -

Un exemple en utilisant un DataChart avec un itemfilereadstore:

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script
    src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js.uncompressed.js"
    type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[ 
        dojo.require("dojox.charting.DataChart");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.addOnLoad(function() {

    var store = new dojo.data.ItemFileWriteStore({
        url: "stock.json"
    });
    chart = new dojox.charting.DataChart("chartDiv" ,{});
    chart.setStore(store, {symbol:"*"}, "historicPrice");  //  <-- single value property
});
    //]]> 
    </script>
</head>
<body>
<div id="chartDiv" style="width: 600px; height: 400px;"></div>
</body>
</html>

Le contenu de stock.json:

{ "identifier": "symbol", "idAttribute":"symbol", "label": "symbol","items": [
    { "symbol":"ANDT", "name":"Anduct",             "historicPrice":[0.01,3.52,3.66,3.11,3.90,3.11,3.11], "open":3.13,  "price":3.52, "updown":"^",  "change":"+0.39 (+21%)", "low":3.13, "high":3.69 },
    { "symbol":"ATEU", "name":"Ations Europe",      "historicPrice":[6.72,6.76,6.61,6.41,6.31,6.99,7.20], "open":6.72,  "price":6.76, "updown":"^",  "change":"+0.04 (+01%)", "low":6.56, "high":6.77 },
    { "symbol":"BGCN", "name":"Bagies Consulting",  "historicPrice":[4.11,3.98,4.05,4.20,4.16,4.22,3.80], "open":4.11,  "price":3.98, "updown":"v",  "change":"-0.13 (-05%)", "low":3.77, "high":4.11 },
    { "symbol":"BAYC", "name":"BAY Corporation",    "historicPrice":[9.79,9.60,9.50,2.23,9.45,9.76,9.99], "open":9.79,  "price":9.60, "updown":"v",  "change":"-0.19 (+14%)", "low":9.60, "high":9.81 },
    { "symbol":"CRCR", "name":"Corcor PLC",         "historicPrice":[8.44,8.44,8.54,8.60,9.65,8.42,8.44], "open":8.44,  "price":8.44, "updown":"--", "change":"+0.00 (+00%)", "low":8.22, "high":8.44 },
    { "symbol":"DTOA", "name":"Datio PLC",          "historicPrice":[2.11,2.47,3.11,3.06,3.01,3.01,3.00], "open":2.11,  "price":2.47, "updown":"^",  "change":"+0.36 (+36%)", "low":2.11, "high":3.01 }
]}

Pour utiliser plusieurs magasins, vous devez créer un compositeStore que plusieurs groupes magasins. Malheureusement, il ne semble pas exister, donc vous devez mettre en œuvre cette classe vous.

Answer 2

DataSeries devrait résoudre votre problème. Notez que DataSeries a été ajouté dans le dojo 1.5.0.

dojo.require("dojox.charting.DataSeries");

chart1.addSeries("Series 1", new dojox.charting.DataSeries(
    test_store, {query: {symbol: "*"}}, "price"));

PS Je pense que vous devriez faire votre suivi question un commentaire plutôt qu'une réponse.