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

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

  •  16-06-2023
  •  | 
  •  

Frage

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>

War es hilfreich?

Lösung

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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top