0

I just copy paste the demo from HighChart to my Developer Edition platform below.Refer to here for High chart demo.

<apex:page sidebar="false" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <apex:includeScript value="{!URLFOR($Resource.HighChart_5,'/api/js/jquery-1.11.3.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.HighChart_5,'/code/js/highcharts.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.HighChart_5,'/code/js/highcharts-more.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.HighChart_5,'/code/js/modules/exporting.js')}"/>
<script type="text/javascript">
$(function () {
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});

});
</script>

</head>


<body>

<div id="container" style="width:600px; height: 400px; margin: 0 auto"></div>

</body>
</html>
</apex:page>

The issue is it generated black blank container without any chart.I check Developer console and there is no javascript error except for this:

Unrecognized Content-Security-Policy directive 'reflected-xss'. Unrecognized Content-Security-Policy directive 'referrer'.

What step that I missed?

9
  • did you uncheck the Enable XSS protection in session settings? – night crawler Apr 18 '17 at 7:36
  • Yes, XSS Protection is uncheck. – unidha Apr 18 '17 at 7:46
  • i checked same code with high chart CDNs, though i get the same console error but I'm getting the chart properly. – Safiya PV Apr 18 '17 at 7:50
  • @blackPerlSAF you using the same demo code? – unidha Apr 18 '17 at 7:52
  • yes i used same code. but i used CDNs others than static resource. – Safiya PV Apr 18 '17 at 7:53
0

I used your demo code and downloaded the highchart files from the link which you had given in the chat room. and i got the error saying that highchart is not defined in console. when I checked my downloaded file there was two highcharts.js files. one is inside code folder and one more is inside js folder. And js folder was inside code folder. so if we use /code/js/highcharts.js we get the error sayiong highcharts not defined though i can see the highcharts.js file in source. So I tried using highcharts.js which is present in code it is working fine. here is those lines.

<apex:includeScript value="{!URLFOR($Resource.HighChart_5,'/code/highcharts.js')}"/> 
<apex:includeScript value="{!URLFOR($Resource.HighChart_5,'/code/js/modules/exporting.js')}"/> 
<apex:includeScript value="{!URLFOR($Resource.HighChart_5,'/api/js/jquery-1.11.3.min.js')}"/>
0

Actually this issue caused by Highchart 5.0.10 . We called library from CDN it works well, same goes with older version also it works.

The error on Content Security Policy still appear but it is not the reason why the chart is blank.

5
  • i faced the same problem and i solved it by using <apex:includeScript value="{!URLFOR($Resource.HighChart_5,'/code/highcharts.js')}"/> <apex:includeScript value="{!URLFOR($Resource.HighChart_5,'/code/js/modules/exporting.js')}"/> <apex:includeScript value="{!URLFOR($Resource.HighChart_5,'/api/js/jquery-1.11.3.min.js')}"/> – Safiya PV Apr 19 '17 at 4:57
  • it seem similar with the code in question but not working for me. – unidha Apr 19 '17 at 5:10
  • no it is not similar '/code/highcharts/'. in demo it is /code/js/highcharts – Safiya PV Apr 19 '17 at 5:13
  • just try and check – Safiya PV Apr 19 '17 at 5:13
  • i use the code same like above not working. – unidha Apr 19 '17 at 5:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.