APEX

Hi All,

I am interested in using the Oracle JET Thematic map, I have looked at Roels blogs on creating plugins also looked at the Legend plugin in the sample charts application but starting with a static example from the cook book I cant seem to get one of the examples to work.

So I have a basic page with a dummy JET Bar Chart so that the other references are there for JET libs as per Hilary Farrell's suggestion on another post.

I am using APEX 19.1.

I have the Pictograph example from the cook book working...

Execute when Page Loads:

require(['ojs/ojcore', 'ojs/ojpictochart'],

function (oj) {

// initializer for PictoChart

    $("#pc1").ojPictoChart(   

      {items: \[  

          { name  : 'Have  Sleep Problems'   

          , shape : 'human'   

          , count : 7   

          , color : '#ed6647'   

          },  

          { name  : 'Sleep Well'   

          , shape : 'human'   

          , count: 3   

          }\]  

      , animationOnDisplay: 'zoom'   

      , columnCount: 5   

    });  

});

Region Content:

<div id="picto-container">

<div id='pc1'style="vertical-align:middle; margin-right:15px">

</div>

<div style="display:inline-block; vertical-align:middle; font-weight:bold">

\<span style="color:#333333; font-size:1.1em">7 out of 10 college students\</span>\<br> 

\<span style="color:#ed6647; font-size:1.3em">have sleep problems.\</span> 

</div>

</div>

That works great as a basic example.

But with the Thematic Map I am having issues with Knockout trying to replicate a simple example

e.g.

Execute when Page Loads:

require(['ojs/ojcore', 'knockout',

'text![http://localhost:8082/i/afw/json/usa\_states.json](http://localhost:8082/i/afw/json/usa_states.json)',

'text![http://localhost:8082/i/afw/json/usaRainfall.json](http://localhost:8082/i/afw/json/usaRainfall.json)',

**'ojs/ojknockout'**, 'ojs/ojthematicmap', 'ojs/ojlegend'\],

function(oj, ko, $, geo, jsonData) {

  function DemoModel() {

    this.mapProvider = {

      geo: JSON.parse(geo),

      propertiesKeys: {

        id: 'lLabel',

        shortLabel: 'sLabel',

        longLabel: 'lLabel'

      }

    };

    var getRainfallColor = function(rainfall) {

      // Bucket rainfall data into categories to color

      if (rainfall \<= 20)

        return '#42C0FB';

      else if (rainfall \<= 30)

        return '#35A4DF';

      else if (rainfall \<= 40)

        return '#2888C3';

      else if (rainfall \<= 50)

        return '#1A6BA7';

      else

        return '#0D4F8B';

    };

    this.areaData = \[\];

    var data = JSON.parse(jsonData);

    for (var i = 0; i \< data.length; i++) {

      var rainfall = data\[i\]\["Inches"\];

      this.areaData.push({id: i.toString(),

        color: getRainfallColor(rainfall),

        location: data\[i\]\["State"\],

        shortDesc: rainfall.toString() + ' inches of annual rainfall'});

    }

    this.legendSections = \[{items: \[

      {text: "0-20", color: getRainfallColor(20)},

      {text: "21-30", color: getRainfallColor(30)},

      {text: "31-40", color: getRainfallColor(40)},

      {text: "41-50", color: getRainfallColor(50)},

      {text: "51+", color: getRainfallColor(51)},

    \]}\];

  }

  $(

    function() {

      ko.applyBindings(new DemoModel(), document.getElementById('mapdemo'));

    }

  );

}

);

Region Content:

\<div id="sampleDemo" style="" class="demo-padding demo-container">

  \<div id="componentDemoContent" style="width: 1px; min-width: 100%;">

    \<div id='mapdemo'>

      \<oj-thematic-map areas='\[\[areaData\]\]' map-provider='\[\[mapProvider\]\]' style='width:100%;height:400px;'>

      \</oj-thematic-map>

      \<oj-legend halign='center' orientation='horizontal' title='Annual Rainfall (Inches)'

          title-halign='center' title-style='{"fontSize": "14px", "fontWeight": "bold"}'

          text-style='{"fontSize": "14px"}' sections='\[\[legendSections\]\]'

          style='width:100%;height:60px;'>

      \</oj-legend>

    \</div>

  \</div>

\</div>

Any help would be much appreciated.

Looking at the legends plugin in the sample charts app - I dont quite see how its dealing with this - if I try the legend demo from the JET cookbook I get a similar Knockout.js issue.

I am obviously missing something.

I want to get the basics working then create a plugin.

Thanks Z