2

I'm new to JavaScript and Dojo so please bear with me. I'm trying to create a Pie chart using DataSeries object, like this:

var skillStore = new dojo.data.ItemFileReadStore({
    url: "/data/skillhead.json"
});

function formatPieChartData(store, item) {
  var tooltips = {
    AVAILABLE: "Available agents",
    ONACD: "Agents on ACD calls",
    INACW: "Agents in ACW",
    INAUX: "Agents in AUX",
    AGINRING: "Agents with ringing phones",
    OTHER: "Agents otherwise occupied",
  };

  var ivalue = store.getValue(item, "value");
  var legend = store.getValue(item, "legend");
  var tooltip = tooltips[store.getValue(item, "field")];

  var o = { y: ivalue, legend: legend, tooltip: tooltip }
  return o;
}

/* This is how the data looks like after massaging
var chartData = [
    { y: 10, legend: "AVAIL", tooltip: "Available agents" },
    { y: 20, legend: "ONACD", tooltip: "Agents on ACD calls" },
    { y: 30, legend: "INACW", tooltip: "Agents in ACW" },
    { y: 40, legend: "INAUX", tooltip: "Agents in AUX" },
    { y: 50, legend: "INRING", tooltip: "Agents with ringing phones" },
    { y: 60, legend: "OTHER", tooltip: "Agents otherwise occupied" }
];
 */

var series = new dojox.charting.DataSeries(skillStore,
    { query: {
        field: new RegExp("INACW|INAUX|AGINRING|OTHER|" +
                  "AVAILABLE|ONACD")
    } },
    formatPieChartData);

dojo.addOnLoad( function() {

chart = new dojox.charting.Chart("chartNode");
chart.setTheme(dojox.charting.themes.PrimaryColors);

chart.addPlot("default", {
    type: "Pie",
    radius: 85,
    labels: false,
    ticks: false,
    markers: false
});
chart.addSeries("default", series);

var highlight = new dojox.charting.action2d.Highlight(chart, "default");
var tip = new dojox.charting.action2d.Tooltip(chart, "default");

grid.startup();
chart.render();

legend = new dojox.charting.widget.Legend({
        chart: chart,
        horizontal: false,
        style: "font-size: 11px;",
        },
        "chartLegend");
legend.startup();

setTimeout(function(){ legend.refresh() }, 1000);
});

It works fine, except one thing: I don't like the fixed timeout. I have to refresh legend after the data is loaded, otherwise it is not displayed; however I don't know which event to attach to in order to refresh legend right after the data is fetched. I see DataSeries class has onFetchError event but no onFetchSuccess event. How do I know that the data was loaded successfully?

Alex Tokarev
  • 4,821
  • 1
  • 20
  • 30

1 Answers1

1

I know this is late, but I'm posting it anyway in case anyone has the same issue. I took a look through DataSeries.js and they have an undocumented hook they are using. I can't promise you this will stay the same throughout api updates, it looks something like:

dojo.connect(dataSeries, "_onFetchComplete", myObj, "myFunction");

See http://dojotoolkit.org/reference-guide/dojo/connect.html

WhatAWorld
  • 394
  • 4
  • 12
  • Thank you. I cannot verify if you're right or wrong; I have decided not to use Dojo in my project. – Alex Tokarev Aug 16 '11 at 19:46
  • No worries. Can I ask what you are using instead? Dojo has some limitations when graphing large data sets. – WhatAWorld Aug 17 '11 at 14:58
  • 1
    I went with ExtJS instead. My impression of it is very good so far; it has its warts and lots of bugs too, but for me it has three major advantages over Dojo: a) Documentation set, however incomplete, is leaps and bounds better than Dojo's almost nonexistent doc. b) ExtJS developers took effort to provide a *real* debugging version of the library, and it is usable - completely unlike Dojo which core is a bowl of spaghetti. I can and do debug my own code by stepping inside the core library and navigating my way around it. c) (Almost) clean MVC architecture. And it really works. – Alex Tokarev Aug 18 '11 at 06:16