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

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

  •  16-06-2023
  •  | 
  •  

Pergunta

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>

Foi útil?

Solução

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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top