Analyzing JSON values from the Web server to the data property

I am trying to use the JSON values from a file on a hosted webserver and believe I am parsing the values correctly and using them within my Chartjs arrays, but for some reason I am getting error messages that I can't quite debug.

error 1: Uncaught SyntaxError: Unexpected token h

code reference: var gaValues = JSON.parse(url);

error 2: Uncaught SyntaxError: Unexpected token :

code reference: labels: [ga:dayOfWeekName],

JSON:

{"kind": "analytics#gaData", "rows": [["Friday", "2"], ["Monday", "3"], ["Saturday", "0"], ["Sunday", "1"], ["Thursday", "4"], ["Tuesday", "4"], ["Wednesday", "4"]], "containsSampledData": false, "profileInfo": {"webPropertyId": "UA-22222-1", "internalWebPropertyId": "222222", "tableId": "ga:22222", "profileId": "2222", "profileName": "All Web Site Data", "accountId": "222222"}, "itemsPerPage": 50, "id": "https://www.googleapis.com/analytics/v3/data/ga?ids=ga:222222&dimensions=ga:dayOfWeekName&metrics=ga:sessions&start-date=7daysAgo&end-date=yesterday&max-results=50", "totalResults": 7, "query": {"max-results": 50, "dimensions": "ga:dayOfWeekName", "start-date": "7daysAgo", "start-index": 1, "ids": "ga:22222", "metrics": ["ga:sessions"], "end-date": "yesterday"}, "totalsForAllResults": {"ga:sessions": "18"}, "columnHeaders": [{"dataType": "STRING", "columnType": "DIMENSION", "name": "ga:dayOfWeekName"}, {"dataType": "INTEGER", "columnType": "METRIC", "name": "ga:sessions"}], "selfLink": "https://www.googleapis.com/analytics/v3/data/ga?ids=ga:22222&dimensions=ga:dayOfWeekName&metrics=ga:sessions&start-date=7daysAgo&end-date=yesterday&max-results=50"}

charts-options.js:

    var url = 'https://test.appspot.com/query?id=ahJzfmNvbm5vcnBoaWxsaXBzMjtetssesestestststRyFQsSCEFwaVF1ZXJ5GICAgICAgIAKDA';

    var gaValues = JSON.parse(url);

    var barChartdata = {
        labels: [ga:dayOfWeekName],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: [gaValues.ga:sessions]
            }
        ]
    };

    var options = {

        //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
        scaleBeginAtZero : true,

        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines : true,

        //String - Colour of the grid lines
        scaleGridLineColor : "rgba(0,0,0,.05)",

        //Number - Width of the grid lines
        scaleGridLineWidth : 1,

        //Boolean - If there is a stroke on each bar
        barShowStroke : true,

        //Number - Pixel width of the bar stroke
        barStrokeWidth : 2,

        //Number - Spacing between each of the X value sets
        barValueSpacing : 5,

        //Number - Spacing between data sets within X values
        barDatasetSpacing : 1,

        //Boolean - Set if responsive or not
        responsive : true

    }

window.onload = function(){

    // Get the context of the canvas element
    var ctx = document.getElementById("sessions-graph").getContext("2d");
    var sessionsGraph = new Chart(ctx).Bar(barChartdata, options); //Create a chart with "data" array

};

index.html:

<!doctype html>
<html>

    <head>
        <title>Google Super Proxy Test</title>

        <script src="chart-options.js"></script>
         <script src="Chart.min.js"></script>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

<body>

    <div style="width: 50%">
        <canvas id="sessions-graph" height="450" width="600"></canvas>
    </div>

</body>

</html>

JSON.parse expects a json string, not an URL you need to load the data yourself i.e. using XMLHTTPRequest. Despite the fact that gaValues is undefined, you also need to access object keys containing special characters using the following notation:

gaValues["ga:sessions"]

Related Articles