Pie chart not rendering

sferrell · December 22, 2015

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,

... 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>

Edited December 22, 2015 by sferrell

JuanC · December 22, 2015

Try setting a width and height to the mychartid div, e.g.

Regards,

JuanC

sferrell · December 22, 2015

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!

JuanC · December 22, 2015

You should not have to dig for the svg node, the only case where we add the z-index (AFAIK) is when the div in question has child nodes, can you check if there is a script that might be adding something to your div before the chart code runs?

Also you might want to try with a simple page to see if it helps you find what is causing the z-index issue.

<!DOCTYPE html>

<html>

<head>

</script>

</script>

</head>

var chart1;

function onPageLoad()

{

chart1 = new cfx.Chart();

chart1.setGallery(cfx.Gallery.Pie);

chart1.create("myDiv");

};

</script>

<br/>

</body>

</html>

Regards,

JuanC

sferrell · December 22, 2015

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.

Sign In

Pie chart not rendering

Question

sferrell

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

JuanC

Link to comment

Share on other sites

sferrell

Link to comment

Share on other sites

JuanC

Link to comment

Share on other sites

sferrell

Link to comment

Share on other sites

Join the conversation

Browse

Activity