jQuery UI Widgets Forums Plugins AngularJS Angular Chart – data from JSON/API

This topic contains 9 replies, has 2 voices, and was last updated by  Dimitar 8 years, 8 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author

  • hgoldman
    Participant

    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-


    Dimitar
    Participant

    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/


    hgoldman
    Participant

    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


    Dimitar
    Participant

    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/


    hgoldman
    Participant

    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…


    hgoldman
    Participant

    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)

    Dimitar
    Participant

    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/


    hgoldman
    Participant

    Dimitar,

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

    Angular Chart – data from JSON/API #72088

    hgoldman
    Participant

    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


    Dimitar
    Participant

    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/

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.