student student - 1 year ago 211
Javascript Question

Unable to render DevExtreme pie chart in jsFiddle

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

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=""></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,
after the DevExpress MVC scripts shall not be an issue

What am I missing here?

Answer Source

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 '' was loaded over HTTPS, but requested an insecure script ''. This request has been blocked; the content must be served over HTTPS.'

Maybe you find a https CDN link for the library?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download