Why won't this html page run, Devexpress documentation ChartJS

StackOverflow https://stackoverflow.com/questions/22468797

  •  16-06-2023
  •  | 
  •  

Вопрос

http://chartjs.devexpress.com/Documentation/Tutorial/Configure_Charts?version=13_2

I am trying to make a ChartJS api implementation work however I just don't see what I am missing.

Here is the original page of instructions. 

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8" />
      <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
      <!--script type="text/javascript" src="knockout-3.0.0.js"></script-->
      <!--script type="text/javascript" src="angular.min.js"></script-->
      <script type="text/javascript" src="globalize.min.js"></script>
      <script type="text/javascript" src="dx.chartjs.js"></script>

  <!-- ... -->

<script type="text/javascript">
  var chartDataSource = [
{
    year: 1950, Africa: 227, Americas: 331,
    Asia: 1436, Europe: 547, Oceania: 12
},
{
    year: 1960, Africa: 285, Americas: 416,
    Asia: 1718, Europe: 605, Oceania: 15
},
{
    year: 1970, Africa: 365, Americas: 512,
    Asia: 2156, Europe: 657, Oceania: 19
},
{
    year: 1980, Africa: 478, Americas: 612,
    Asia: 2644, Europe: 695, Oceania: 22
},
{
    year: 1990, Africa: 633, Americas: 720,
    Asia: 3180, Europe: 722, Oceania: 26
},
{
    year: 2000, Africa: 810, Americas: 833,
    Asia: 3678, Europe: 731, Oceania: 30
},
{
    year: 2010, Africa: 1016, Americas: 936,
    Asia: 4149, Europe: 728, Oceania: 35
}
];
    $(function () {
        $("#chartContainer").dxChart({
dataSource: chartDataSource,
commonSeriesSettings: {
    argumentField: 'year'
},
series: [{
    name: 'Oceania',            
    valueField: 'Oceania'
}, {
    name: 'Africa',
    valueField: 'Africa'
},{
    name: 'Americas',
    valueField: 'Americas'
},{
    name: 'Asia',
    valueField: 'Asia'
},{ 
    name: 'Europe',
    valueField: 'Europe'
}]
});
      }

</script>



  </head>
  <body>

<div id="chartContainer" style="max-width:700px;height: 300px;"></div>


  </body>

Это было полезно?

Решение

You missed а closing bracket of your jQuery ready function. It is also not needed to place your internal script to the bottom of the body, as jQuery ready functions is used

So, here is the working script

<script type="text/javascript">
    var chartDataSource = [ ... some data ... ];
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: chartDataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [{ name: 'Oceania', valueField: 'Oceania' }, 
                { name: 'Africa', valueField: 'Africa' },
                { name: 'Americas', valueField: 'Americas' },
                { name: 'Asia', valueField: 'Asia' },
                { name: 'Europe', valueField: 'Europe' }]
         });
    });
</script>
<div id="chartContainer" style="max-width:700px;height: 300px;"></div>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top