[Error on including motif js]

After including jchartfx.motif.face.js to use the face motif I am receiving the following error,

Uncaught TypeError: Cannot read property 'Centered' of undefined -- jquery-1.11.1.min.js:4

The stack trace shows that the error is firing when executing the following js:

var chart1 = new cfx.Chart();

The chart works fine when commenting out the motif js include. What's going on? Does the motif js have issues with jQuery 1.11?

[Pie chart not rendering]

Yes, it's most likely coming from something else running on the page. The chart is being embedded into a pretty complex page. It displays fine when I ensure that the z-index is 0 for the root svg node.

[Pie chart not rendering]

That appeared to fix it. I'll make sure to have the width/height set correctly.

 

Though even after that fix I still needed to dig into the root svg node and change the z-index which was set to -1. Otherwise it was being covered up.

 

Thank you for the quick help!

[Pie chart not rendering]

I'm just trying to get a simple example to work,

 

I included,

jchartfx.system.js

jchartfx.coreVector.js

jchartfx.attributes.css

jchartfx.palette.css

 

(I also have jQuery 1.11 included, but I'm not using the jQuery style of jchartfx creation -- not sure if jchartfx is compatible with 1.11).

 

And my html tag which has its ID stored in a variable in my js code,

<div id='mychartid'></div>

 

... inside of my +function($){}(jQuery); IIFE:

                var chart1 = new cfx.Chart();

                var data = [
                   { "Month": "Jan", "Bikes": 1800 },
                   { "Month": "Feb", "Bikes": 1760 }
                ];
                chart1.setDataSource(data);
                chart1.setGallery(cfx.Gallery.Pie);
                var titles = chart1.getTitles();
                var title = new cfx.TitleDockable();
                title.setText(bunetInfographic.listName);
                titles.add(title);
                chart1.getAllSeries().getPointLabels().setVisible(true);


                chart1.create(document.getElementById(chartID));

When the page loads, nothing displays. I can look at the source and see the following in my div,

 

<div id="mychartid">


 <div id="chart" class="jchartfx">
  <div style="position:absolute;visibility:hidden;height:auto;width:auto" id="textMeasure"></div>
  <div style="position:absolute;visibility:hidden;height:auto;width:auto" id="textMeasureClass" class="LegendItem">Feb</div>
 </div>
 <svg width="852" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:sfx="http://www.softwarefx.com/ns" xmlns:xlink="http://www.w3.org/1999/xlink" id="chart" class="jchartfx" style="position: absolute; left: 0px; top: 0px; z-index: -1;">
  <svg width="0" height="0" id="C0s" x="0" y="0"></svg>
  <svg width="0" height="0" id="C1s" x="0" y="0"></svg>
 </svg>
</div>