Display Custom Label from data store with dojox.charting

Question

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.

Answer 1

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.

Answer 2

I had to face similar trouble with custom labels, although I was using a programmatic way to create the chart on div.... Hope this helps someone....

var mytooltip = new dojox.charting.action2d.Tooltip(mychart,"default", 
    {text: function(e) {
               var tooltiptext = <construct ur custom label here>   
               return tooltiptext;
        }
    }); 

mychart is the variable that i have used to create the chart widget....