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>