CODEWITHSUNDEEP
javascriptextjsextjs4
lbj-ub
lbj-ub

Reputation: 1423

ExtJS combining records in a store which has the same field

Example XML file:

<BrowserInformation>
      <Value>
            <Year>2011</Year>
            <Name>Firefox</Name>
            <Count>4952</Count>
        </Value>
            <Year>2011</Year>
            <Name>MSIE</Name>
            <Count>4613</Count>
        <Value>
            <Year>2011</Year>
            <Name>Chrome</Name>
            <Count>1401</Count>
        </Value>
        <Value>
            <Year>2011</Year>
            <Name>Safari</Name>
            <Count>1111</Count>
        </Value>
        <Value>
            <Year>2011</Year>
            <Name>Unknown</Name>
            <Count>1119</Count>
        </Value>
        <Value>
            <Year>2011</Year>
            <Name>Opera</Name>
            <Count>9</Count>
        </Value>
        <Value>
            <Year>2012</Year>
            <Name>Firefox</Name>
            <Count>3544</Count>
        </Value>
            ...
</BrowserInformation>

Column chart produced: enter image description here

Presently, there is a bar in the chart for each record in the XML file. I want to get an aggregated count for each browser (i.e. for Firefox it would be 4952 + 3544). The config options idProperty and groupers for data and store classes just seems to put the bars with the same name next to each other in the chart but doesn't seem to combine them. Assume the data in the file cannot change. How would I accomplish this? Is there a specific config property that I can set in the model, store, or chart? If so which? Or is there another way?

Upvotes: 1

Views: 634

Answers (1)

Christoph
Christoph

Reputation: 1023

I would suggest to use a new field in the model, say "total", and use a convert function.

From the Ext JS API documentation

"If a more complex value extraction strategy is required, then configure the Field with a convert function. This is passed the whole row object, and may interrogate it in whatever way is necessary in order to return the desired data."

Your convert function then could be something like this

function convert2Total(v, record){
    return record.data.firefox + record.data.chrome;
}

Your fields array in your model would then look like this: 

fields: [ { name: "firefox" },
          { name: "chrome" },
          { name: "total", convert: convert2Total }]

Upvotes: 2

Related Questions