Dynamic data binding to Highchart

Question

I'm trying to feed a Highchart chart with data using a viewmodel but can't get it to work. The list of strings I want to use in my chart is populated in the model like this:

var list = new List<ClinicPatients>();
foreach (var customer in customers)
{
  var customerName = GetCustomerName(customer);
  var numOfPatients = GetNumOfActivePatients(customer);
  list.Add(new ClinicPatients { ClinicName = customerName, PatientNumber = nummOfPatients });
}
public string ClinicList { get; set; }
var tempList = list.Select(x => x.ClinicName);
ClinicList = JsonConvert.SerializeObject(tempList);

When i debug this and choose to text visualizer i see this in ClinicList: ["A","B","C","D","E","F"] which looks right. If I copy this and hard code it to my javascrip it works but when my javascrip is bound to my viewmodel i does not work. Could someone please explain why?

Model.ClinicUsers which is a list of int works as well.

My Html/Javascript looks like this:

<div class="content">
   <div>
       <div id="usersPerClinicDiagram" style="width: 800px; height: 300px;">
           <div id="activUsers" style="width: 800px; height: 300px;"></div>
       </div>
   </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            var usersPerClinicDiagram = new Highcharts.Chart({
                chart: {
                    renderTo: 'activUsers',
                    type: 'bar'
                },
                legend: {enabled: false},
                title: {text: 'Number of active users per clinic'},
                subtitle: {text: 'for how many weeks they kept on using Triabetes'},
                tooltip: {enabled: false},
                xAxis: {
                    title: {text: 'number of users',align: 'high'},
                    allowDecimals: false,
                    categories: @Model.ClinicList
                    },
                yAxis: {min: 0,
                    allowDecimals: false,
                    title: {text: 'Clinic',align: 'high'},
                    labels: {overflow: 'justify'}

                },
                plotOptions: {
                    bar: {dataLabels: {enabled: false}
                    }
                },
                credits: {enabled: false},
                series: [{ data: @Model.ClinicUsers }]
            });
        });
    });
</script>

Answer 1

Try this:

@Html.Raw(Json.Encode(Model.ClinicUsers.ToArray()))

Worked for me.