HTML 5 chart issue

Question

I'm drawing a chart for my web page which i learned from this video https://youtu.be/qYkkyOzR9jc i'm trying to add label to my chart, but it doesn't work and make my chart wrong here's my HTML code

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="JS/dx.chartjs.js"> </script>

<script type="text/javascript"  src="http://cdn3.devexpress.com/jslib/13.1.7/js/dx.chartjs.js"> </script>


<script type="text/javascript" src="JS/PieChart.js"></script>


</head>
<body>

    <div id="chartContainer" style="border: 1px solid red; "></div>

</body>
</html>

here's my JavaScript code

$(document).ready(function(){

    var dataSource = [
        { country: "Russia", area: 1707540},
        { country: "Canada", area: 998467},
        { country: "USA", area: 937261},
        { country: "China", area: 959696},
        { country: "Brazil", area: 854700},
        { country: "Australia", area: 768685},
        { country: "India", area: 328759},
        { country: "Others", area: 554545}
    ];

    $("#chartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: "country",
            valueField: "area",
            label: {
                visible: true,
                connector: {visible: true}
            }

        }
    });

})

this is my chart without label enter image description here

this is my wrong chart after adding label element enter image description here

yes. somethings like this t.formatHelper._formatNumberCore @ dx.chartjs.js:9 — Arm_M, May 14 '15 at 14:38
i think you need the `globalize.js` library too. also, looks like there might be some version compatibility issues amongst globalize, jquery, and dx.chartjs so you might have to do some fiddling to get the right set of versions. — user2524973, May 14 '15 at 16:38

score 0 · Answer 1 · answered May 28 '15 at 15:03

As lispHK01 noticed, you missed a reference to the globalize library. Your html file should look like the following.

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>

<script type="text/javascript"  src="http://cdn3.devexpress.com/jslib/13.1.7/js/dx.chartjs.js"> </script>


<script type="text/javascript" src="JS/PieChart.js"></script>


</head>
<body>

    <div id="chartContainer" style="border: 1px solid red; "></div>

</body>
</html>

HTML 5 chart issue

1 Answers1