**html:**

```
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="myscripts.js"></script>
</head>
<body>
<h1>Sample Burndown Chart</h1>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

```

**myscript.js:**

```
$(function () {
  $('#container').highcharts({
    title: {
      text: 'Burndown Chart',
      x: -20 //center
    },
    xAxis: {
      categories: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6',
                   'Day 7', 'Day 8', 'Day 9', 'Day 10']
    },        
    series: [{
      name: 'Ideal Burn',
      color: 'rgba(255,0,0,0.25)',
      lineWidth: 2,
      data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]
    }, {
      name: 'Actual Burn',
      color: 'rgba(0,120,200,0.75)',
      marker: {
        radius: 6
      },
      data: [100, 110, 85, 60, 60, 30, 32, 23, 9, 2]
    }]
  });
});

```

The code works, and I do see the pretty burndown chart.

However, can someone please show me the easiest/correct way to pass arguments to the javascript function inside myscript.js for the **data**.

In other words, instead of:

Day 1, Day 2, Day 3...

I would pass in actual dates.

Instead of 100, 110, 85...
I would pass in the correct data values.

Please advise.

EDIT:

A hashmap is passed from the server side to the front end.

```
return descriptor.getHtml("view", data);

```

the view is the html file.

so I can access any value/object in the **data**, using $key\_name