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?

Improve this question
9
  • did you uncheck the Enable XSS protection in session settings?
    – night crawler
    Commented Apr 18, 2017 at 7:36
  • Yes, XSS Protection is uncheck.
    – unidha
    Commented Apr 18, 2017 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
    Commented Apr 18, 2017 at 7:50
  • @blackPerlSAF you using the same demo code?
    – unidha
    Commented Apr 18, 2017 at 7:52
  • yes i used same code. but i used CDNs others than static resource.
    – Safiya PV
    Commented Apr 18, 2017 at 7:53

2 Answers 2

Reset to default
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')}"/>
Improve this answer
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.

Improve this answer
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
    Commented Apr 19, 2017 at 4:57
  • it seem similar with the code in question but not working for me.
    – unidha
    Commented Apr 19, 2017 at 5:10
  • no it is not similar '/code/highcharts/'. in demo it is /code/js/highcharts
    – Safiya PV
    Commented Apr 19, 2017 at 5:13
  • just try and check
    – Safiya PV
    Commented Apr 19, 2017 at 5:13
  • i use the code same like above not working.
    – unidha
    Commented Apr 19, 2017 at 5:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .