Search code examples
dojodojox.charting

Display Custom Label from data store with dojox.charting


I am using the dojox.charting.widget.Chart2D and I am trying to retrieve the data from an dojo.data.ItemFileReadStore. I can retrieve the data, and everything works and displays, except I cannot seem to find a way to display custom labels on the items. My HTML snippet is:

<div dojoType="dojo.data.ItemFileReadStore" jsId="chartDataStore" 
    url="json/archiveinfo.json.php"></div>
<div dojoType="dojox.charting.widget.Chart2D" id="chartTest" 
    theme="dojox.charting.themes.PlotKit.blue" style="width: 300px; height: 300px;">
  <div class="plot" name="default" type="Pie" fontColor="black" htmlLabels="false" 
    radius="100"></div>
  <div class="series" name="Series A" store="chartDataStore" field="y" 
    label="text" valueFn="Number(x)"></div>
  <div class="action" type="Tooltip"></div>
  <div class="action" type="MoveSlice"></div>
</div>

And my JSON from the ItemFileReadStore is:

{"identifier":"id","labelAttribute":"text","items":
  [
    {"id":1,"y":55,"text":"Free"},
    {"id":2,"y":45,"text":"Used"}
  ]
}

I have tried setting the label attribute in the series and have set the labelAttribute in the JSON. I also tried just label in the JSON and it didn't work either. When I provide the data as a JSON in an array or provide the data directly in the series, I get the labels to work. I really wanted to make it more flexible though by providing the data via a DataStore.


Solution

  • The way to do it is to modify your JSON a little and update corresponding attributes in the HTML.

    JSON:

    {
      "items": [
        {"id":1, "slice": {"y":55,"text":"Free"}},
        {"id":2, "slice": {"y":45,"text":"Used"}}
      ]
    }
    

    The only meaningful change is to separate pie-specific data in a sub-object (slice) for simplicity.

    HTML (only the store-related line should be modified):

    <div class="series" name="Series A"
      store="chartDataStore" field="slice"></div>
    

    Let me know how it goes.