CODEWITHSUNDEEP
javascriptasp.netasp.net-mvchighcharts
real_yggdrasil
real_yggdrasil

Reputation: 1263

Json string without escape characters in highcharts

I am developing a pie chart using HighCharts. Using asp.net MVC.

I try to feed the java a data string using a ViewData like this:

 data: (@ViewData["data"])

When I view this data in the JSON viewer, it looks like this: 

[{'name':'Bouwend','y':0},{'name':'Failed','y':5},{'name':'Succes','y':16}]

When I put it hardcoded behind the ' data: ' property, the pie is neatly shown.

However it failes when I try to feed it from the action method. In that case, it looks like this: 

"[{\"name\":\"Bouwend\",\"y\":0},{\"name\":\"Failed\",\"y\":12},{\"name\":\"Succes\",\"y\":19}]"

How can I make the JSON data without all the escape strings, so the Highcharts accepts it? 

@model SATS.Tools.Tfs.Extensions.ServiceApi.Controllers.CruiseControlChart

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

    <script src="../../Scripts/jquery-1.10.2.min.js"></script>
    <script src="../../scripts/highcharts.js"></script>
 
    <meta name="viewport" content="width=device-width" />
    <title>CruiseControlChart</title>
    <script type="text/javascript">
        $(document).ready(function () {

            // Build the chart / configure the highcharts
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: '@ViewData["charttitle"]' 
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    colorByPoint: true,
                    data: (@ViewData["data"])
                 
              data:  [{'name':'Bouwend','y':0},{'name':'Failed','y':5},{'name':'Succes','y':16}]

            //onderstaand is een setje statische test data
            //data: [{
            //    name: "Bouwend",
            //    y: 3
            //}, {
            //    name: "Build succesvol",
            //    y: 64,
            //    sliced: true,
            //    selected: true
            //}, {
            //    name: "Build gefaald",
            //    y: 33
            //}]
        }]
            });
        });
    </script>
    <style type="text/css">
        .center-block {
            display: block;
            margin-right: auto;
            margin-left: auto;
        }
        .col-centered{
            float: none;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row" style="display: block">
            <a href="http://vm-eli-007/ccnet/ViewFarmReport.aspx" target="_parent">
                @*<div class="col-md-1" id="container" style=" min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>*@
                <div class="col-md-1" id="container" style=" min-width: 90%; height: 90%; max-width: 600px; margin: 0 auto"></div>
            </a>
            <br/>
            <div class="col-centered"><span> Oldest build time: @ViewData["eldestbuildtime"]</span></div>
        </div>
</div> 

</body>
</html>

Upvotes: 1

Views: 160

Answers (1)

Mohsin Mehmood
Mohsin Mehmood

Reputation: 4236

Try updating code like this:

data: JSON.parse("@Html.Raw(@ViewData["data"])")

Upvotes: 2

Related Questions