Jump to content
JChartFX Community
  • 0

Pie chart not rendering


sferrell

Question

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>

post-2107-13939745506293_thumb.jpg

Edited by sferrell
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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 type="text/javascript" src="jchartfx.system.js">
    </script>
    <script type="text/javascript" src="jchartfx.coreVector.js">
    </script>
</head>
<body onload="onPageLoad()">
 
<div id="myDiv" style="width:400px;height:400px;display:inline-block"></div>
 
<script language="javascript">
    var chart1;
    
    function onPageLoad()
    {
        chart1 = new cfx.Chart();
 
        chart1.setGallery(cfx.Gallery.Pie);
 
        chart1.create("myDiv");
    };
</script>
 
<br/>
 
</body>
</html>
 
Regards,
 
JuanC
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...