Angular Chart – data from JSON/API

[hgoldmanParticipant]

I would love to see an example were the data to be charted if from an API call (more specifically a JSON array). I already have called an API and have the data. How do I pass that JSON array into the jqwChart? This may be a simple and stupid question… but it is what it is! 😉

Thanks-

[DimitarParticipant]

Hello hgoldman,

Through jqxDataAdapter, you can load whatever type data you wish in your chart. Here is a demo (with AngularJS) showing how to plot CSV data into the chart: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/chart.htm?arctic. And here is another demo with JSON data (no AngularJS, but the data is bound using the same approach): http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_negative_values.htm?arctic.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[hgoldmanParticipant]

Dimitar,

Thanks for the reply, but I have already reviewed those examples, and it does not answer my question. In my code, I already have called the API and received the data back in JSON format. It has value in the JSON object (i.e. data.valuesToChart which looks like [123, 234, 535, 577, 245]). How do I use this directly to be charted?

I can change the JSON to be like data equals:
`[{ “label”: “Jan-2015”, “points”: 12 }, { “label”: “Feb-2015”, “points”: 10 },{ “label”: “Mar-2015”, “points”: 9 }, { “label”: “Apr-2015”, “points”: 15 }, { “label”: “May-2015”, “points”: 8 }]

“data” is the response to an API call (promise), and would need to be used in the chart.

Thanks-Harry

[DimitarParticipant]

Hi Harry,

You would need to use the data in JSON format ([{ "label": "Jan-2015", "points": 12 },...), not as a simple array ([123, 234, 535, 577, 245]). Then you would need to define a source object with datafields and reference those datafields in your chart settings. Most of the online chart examples show how this can be done. You can also try Chart Studio, which can generate the chart settings object automatically.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[hgoldmanParticipant]

Dimitar,

The first problem I had was having the single quotes around the JSON field name in the inital test data. I changed it to double quotes and all works. Then I changed the API to call to actually go to the server, and it only works if (in Chrome) if I step through the code in the debugger. It is like the data points have not returned to be charted… a timing issue.

FYI: The Chart Studio tool is a great help!

Here is the JSON returned from the server:

{
ID: 1,
projectName: "Test Project 1 - EER",
startDate: "2014-12-01T05:00:00+00:00",
endDate: "2015-08-07T04:00:00+00:00",
devStartDate: "0001-01-01T00:00:00+00:00",
devEndDate: "0001-01-01T00:00:00+00:00",
projEndDate: "0001-01-01T00:00:00+00:00",
totalBudget: 100000,
totalPoints: 140,
monthInfo: [
{
statusDate: "Dec-2014",
status: 3,
projPointsToDate: 0,
projPointsRemaining: 140,
budgetUsed: 1,
pointsUsed: 10,
budgetToDate: 1,
pointsToDate: 10,
budgetRemaining: 99999,
pointsRemaining: 130
},
{
statusDate: "Jan-2015",
status: 3,
projPointsToDate: 0,
projPointsRemaining: 140,
budgetUsed: 10,
pointsUsed: 19,
budgetToDate: 11,
pointsToDate: 29,
budgetRemaining: 99989,
pointsRemaining: 111
},
{
statusDate: "Feb-2015",
status: 6,
projPointsToDate: 0,
projPointsRemaining: 140,
budgetUsed: 100,
pointsUsed: 35,
budgetToDate: 111,
pointsToDate: 64,
budgetRemaining: 99889,
pointsRemaining: 76
}]

Here is the JS code (the above is what is returned in ‘resp’):

                            ProjectSvc.getProjectToDate1(params).then(function (resp) {
                                if (resp.Message == undefined) {
                                    $scope.resp = resp.monthInfo;

                                    var dataAdapter = new $.jqx.dataAdapter({
                                        localdata: $scope.resp,
                                        datafields: [
                                            { name: "statusDate", type: "string" },
                                            { name: "budgetUsed", type: "number" },
                                            { name: "budgetToDate", type: "number" }
                                        ]
                                    });

                                    $scope.chartSettings = {
                                        source: dataAdapter,
                                        title: "Test Budget",
                                        description: "My Chart Description",
                                        padding: {
                                            left: 5,
                                            top: 5,
                                            right: 5,
                                            bottom: 5
                                        },
                                        titlePadding: {
                                            left: 5,
                                            top: 5,
                                            right: 5,
                                            bottom: 5
                                        },
                                        enableAnimations: false,
                                        xAxis: {
                                            dataField: "statusDate",
                                            valuesOnTicks: false
                                        },
                                        valueAxis: {
                                            valuesOnTicks: true
                                        },
                                        seriesGroups: [
                                            {
                                               type: "column",
                                               series: [
                                                   {
                                                       dataField: "budgetUsed"
                                                   }
                                               ]
                                           },
                                           {
                                                type: "line",
                                                series: [
                                                    {
                                                        dataField: "budgetToDate"
                                                    }
                                                ]
                                            }

                                        ]
                                    }
                                }
                            });

Here is the HTML:

                    <jqx-chart jqx-settings="chartSettings" jqx-watch="chartSettings.seriesGroups" style="width: 850px; height: 500px;"></jqx-chart>

Please tell me what am I missing. When all is hard-coded in the JS it works…

[hgoldmanParticipant]

Dimitar,

I do not have the same behavior in IE….

Chrome is catching some error (Sorry I failed to add the in the above post):

TypeError: Cannot read property 'created' of undefined
    at Z (jqx-all.js:7)
    at X (jqx-all.js:7)
    at Y (jqx-all.js:7)
    at jqx-all.js:7
    at Array.deferred.promise.then.wrappedProgressback (angular.js:11062)
    at angular.js:11030
    at Scope.$get.Scope.$eval (angular.js:12081)
    at Scope.$get.Scope.$digest (angular.js:11910)
    at Scope.$get.Scope.$apply (angular.js:12185)
    at tick (angular.js:8562)(anonymous function) @ angular.js:9507$get @ angular.js:6947deferred.promise.then.wrappedProgressback @ angular.js:11064(anonymous function) @ angular.js:11030$get.Scope.$eval @ angular.js:12081$get.Scope.$digest @ angular.js:11910$get.Scope.$apply @ angular.js:12185tick @ angular.js:8562
angular.js:9507 TypeError: Cannot read property 'source' of undefined
    at Object.<anonymous> (jqx-all.js:7)
    at Function.x.extend.each (jquery-2.0.0.js:4)
    at Object.fn (jqx-all.js:7)
    at Scope.$get.Scope.$digest (angular.js:11937)
    at Scope.$get.Scope.$apply (angular.js:12185)
    at done (angular.js:7935)
    at completeRequest (angular.js:8140)
    at XMLHttpRequest.xhr.onreadystatechange (angular.js:8081)

[DimitarParticipant]

Hello hgoldman,

The following version of your example works perfectly fine on our side:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {

            var resp = [{
                ID: 1,
                projectName: "Test Project 1 - EER",
                startDate: "2014-12-01T05:00:00+00:00",
                endDate: "2015-08-07T04:00:00+00:00",
                devStartDate: "0001-01-01T00:00:00+00:00",
                devEndDate: "0001-01-01T00:00:00+00:00",
                projEndDate: "0001-01-01T00:00:00+00:00",
                totalBudget: 100000,
                totalPoints: 140,
                monthInfo: [{
                    statusDate: "Dec-2014",
                    status: 3,
                    projPointsToDate: 0,
                    projPointsRemaining: 140,
                    budgetUsed: 1,
                    pointsUsed: 10,
                    budgetToDate: 1,
                    pointsToDate: 10,
                    budgetRemaining: 99999,
                    pointsRemaining: 130
                }, {
                    statusDate: "Jan-2015",
                    status: 3,
                    projPointsToDate: 0,
                    projPointsRemaining: 140,
                    budgetUsed: 10,
                    pointsUsed: 19,
                    budgetToDate: 11,
                    pointsToDate: 29,
                    budgetRemaining: 99989,
                    pointsRemaining: 111
                }, {
                    statusDate: "Feb-2015",
                    status: 6,
                    projPointsToDate: 0,
                    projPointsRemaining: 140,
                    budgetUsed: 100,
                    pointsUsed: 35,
                    budgetToDate: 111,
                    pointsToDate: 64,
                    budgetRemaining: 99889,
                    pointsRemaining: 76
                }]
            }]

            $scope.resp = resp[0].monthInfo;

            var dataAdapter = new $.jqx.dataAdapter({
                localdata: $scope.resp,
                datafields: [{
                    name: "statusDate",
                    type: "string"
                }, {
                    name: "budgetUsed",
                    type: "number"
                }, {
                    name: "budgetToDate",
                    type: "number"
                }]
            });

            $scope.chartSettings = {
                source: dataAdapter,
                title: "Test Budget",
                description: "My Chart Description",
                padding: {
                    left: 5,
                    top: 5,
                    right: 5,
                    bottom: 5
                },
                titlePadding: {
                    left: 5,
                    top: 5,
                    right: 5,
                    bottom: 5
                },
                enableAnimations: false,
                xAxis: {
                    dataField: "statusDate",
                    valuesOnTicks: false
                },
                valueAxis: {
                    valuesOnTicks: true
                },
                seriesGroups: [{
                    type: "column",
                    series: [{
                        dataField: "budgetUsed"
                    }]
                }, {
                    type: "line",
                    series: [{
                        dataField: "budgetToDate"
                    }]
                }

                ]
            }
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-chart jqx-settings="chartSettings" jqx-watch="chartSettings.seriesGroups" style="width: 850px;
            height: 500px;"></jqx-chart>
    </div>
</body>
</html>

However, if ProjectSvc.getProjectToDate1() is not called immediately, you may need to initialize the chart using jqx-create. This directive is useful when creating a widget on demand or with some delay. For more information about it, please refer to the jQWidgets Integration with AngularJS tutorial.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[hgoldmanParticipant]

Dimitar,

THANKS! The jqx-create did the trick, and thanks for the reference link.

[hgoldmanParticipant]

Dimitar,

One last issue. The tooltip box does not surround the entire tooptip text. I have the tooltip class specified on each of the series:
toolTipClass: "jqToolTip"
and the CSS is

.jqToolTip {
    height: 100%;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    color: #448899;
}

But it looks like:

+——————–+
| Status Date Dec- |
| 2014 |
+——————–+
V
Budget To Date: 1

(sorry for the hack representation. The carat pointing down is actually over the text shown below it.

Thanks-
Harry

[DimitarParticipant]

Hi Harry,

We tested these toolTipClass settings and they appear to be fine on our side. Here is an image: http://s30.postimg.org/yxgg5yvoh/tool_Tip_Class.png. Please make sure you are using the latest version of jQWidgets (3.8.0).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts