[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

[hgoldmanParticipant]

Dimitar,

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

[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)

[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,

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

[Author]

Posts