Jump to content
JChartFX Community
  • 0

Rendering Issue in Safari


cryarbrough
 Share

Question

I'm running into an issue rendering jchartfx in Safari. When the chart is loaded with coreVector, the colors and gradients aren't rendering, creating a chart that has a black background, and black bar graphs.

post-47764-0-60976800-1447867765_thumb.jpg

 

When the same data is used to with coreBasic, the chart renders as expected, and when rendered with coreVector3d, the chart renders the 3d components as expected, but the background is still black.

post-47764-0-09003000-1447867766_thumb.jpg

post-47764-0-20060000-1447867765_thumb.jpg

 

Further, this odd rendering only occurs when I have a query parameter in the url, even when the query is otherwise unused & unrelated to the app. When rendered in Chrome or Firefox, the results are a flattened chart similar to coreBasic, instead of the expected gradient rendering.

 

I've attached the rendered HTML, which is produced via an Ember MVC app, as well as screenshots of all the different charts produced. As it's an app, the jchartfx source in consolidated in the vendor.js file, but includes jchartfx.system.js, jchartfx.coreVector, jchartfx.coreVector3d & jchartfx.animation.js.

 

I've been digging at this for some time now, so I'm hoping I've just missed something.

 

Thanks is advance.

index-safari.html

post-47764-0-20060000-1447867765_thumb.jpg

post-47764-0-60976800-1447867765_thumb.jpg

post-47764-0-09003000-1447867766_thumb.jpg

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Are you including any css related to jChartFX? Are you defining any jChartFX related rules in any of your CSSs?

 

jChartFX have 2 modes of operation

 

1) If you do not include any of our CSS, we will generate all the elements in the chart with "hardcoded" colors in the resulting HTML. In this mode to change one of the colors you would use one of our APIs

 

<!DOCTYPE html>

<html>
<head>
    <script type="text/javascript" src="jchartfx.system.js">
    </script>
    <script type="text/javascript" src="jchartfx.coreVector.js">
    </script>
    <script type="text/javascript" language="javascript">
        var chart1;
        
        function onLoadDoc()
        {
            chart1 = new cfx.Chart();
            chart1.setGallery(cfx.Gallery.Bar);
            chart1.setDataSource([10,12,14,8]);
            chart1.getLegendBox().setVisible(false);
            chart1.setBorder(null);
            chart1.getAxisX().setVisible(false);
            chart1.getAxisY().setVisible(false);
            chart1.create("myDiv");
        }        
    </script>
</head>
<body onload="onLoadDoc()">
 
<div id="myDiv" style="width:600px;height:400px;display:inline-block"></div>
 
</body>
</html>
 
If you select Inspect Element in your browser you should see something like this
 
<rect sfxid="P,0,0" style="fill:#57acda;stroke:#4281a4;stroke-width:1" x="52.5" y="121.5" width="100" height="228"></rect>
 
2) If you include our CSS (note that we ship a set of palettes and a set of attributes, normally you would include one of each), then jChartFX will generate the chart elements using classes. In this mode you would change colors by modifying the appropriate entries in the CSS
 
HTML same as 1 but include these 2 inside the head element
 
   <link rel="stylesheet" type="text/css" href="../Styles/Palettes/jchartfx.palette.css" />
    <link rel="stylesheet" type="text/css" href="../Styles/Attributes/jchartfx.attributes.css" />
 
If you select Inspect Element in your browser you should see something like this
 
<rect sfxid="P,0,0" class="Attribute Attribute0" x="52.5" y="121.5" width="100" height="228"></rect>
 
------
 
Your page seems to be using CSS, I would recommend you make sure you are including one of our palettes and attributes, also make sure these CSSs are up-to-date in relation to the scripts, i.e. they were downloaded at the same time.
 
Finally you can use Inspect Element to find out why the background is black, you will probably find a rectangle with class Border, and the palette CSS should have a rule for it.
 
Hope this helps.
 
If you cannot fix the problem, try modifying these simple pages with your code/css/js until you can reproduce the problem, that will allow you to find out what is causing the issue and/or send the page to us so that we can reproduce the issue on a small page.
 
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...
 Share

×
×
  • Create New...