Unable to render DevExtreme pie chart in jsFiddle

Question

In my fiddle, I'm trying to replicate plotting a DevExpress's DevExtreme doughnut chart:

var dataSource = [{
  region: "Asia",
  val: 4119626293
}, {
  region: "Africa",
  val: 1012956064
}, {
  region: "Northern America",
  val: 344124520
}, {
  region: "Latin America and the Caribbean",
  val: 590946440
}, {
  region: "Europe",
  val: 727082222
}, {
  region: "Oceania",
  val: 35104756
}];

$("#container").dxPieChart({
  dataSource: dataSource,
  title: "The Population of Continents and Regions",
  tooltip: {
    enabled: true,
    format: "millions",
    percentPrecision: 2,
    customizeTooltip: function(arg) {
      return {
        text: arg.valueText + " - " + arg.percentText
      };
    }
  },
  legend: {
    horizontalAlignment: "right",
    verticalAlignment: "top",
    margin: 0
  },
  series: [{
    type: "doughnut",
    argumentField: "region",
    label: {
      visible: true,
      format: "millions",
      connector: {
        visible: true
      }
    }
  }]
});

#container {
  height: 440px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

This official code is working in ChartJS's fiddle.

Since I'm not doing it in an ASP.NET MVC project, chartjs after the DevExpress MVC scripts shall not be an issue

What am I missing here?

Answer 1

Check the console - it isn't finding the .dxPieChart function because it can't load the 'insecure' chart.js script:

'Mixed Content: The page at 'https://jsfiddle.net/xameeramir/51h3bmgf/' was loaded over HTTPS, but requested an insecure script 'http://cdn3.devexpress.com/jslib/15.2.10/js/dx.chartjs.js'. This request has been blocked; the content must be served over HTTPS.'

Maybe you find a https CDN link for the library?