jQWidgets Forums

Tagged: data adapter, dataadapter, jqxDataAdapter

This topic contains 10 replies, has 2 voices, and was last updated by victorsosa 11 years, 7 months ago.

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

Author

time series with dataAdapter Posts

September 28, 2013 at 10:57 pm time series with dataAdapter #29778

Member

Hi,

I need some help here; I created this script but is not working, I don’t see anything wrong with it, can you tell me why it can’t load the data result from the json?

this is the json input:

{
    "Results": {
        "Category": "packethost",
        "SubTree": "Network1",
        "Time Dimension": "MINUTELY",
        "Time Period": "TODAY",
        "Data": [
            {
                "time": 1380408780000,
                "value": 86
            },
            {
                "time": 1380408840000,
                "value": 2482
            }
        ]
    }
}

$(document).ready(function() {
        var source = {
            datatype : 'json',
            datafields : [ {
                name : 'time', map : 'Results>Data>time', type : 'long'
            }, {
                name : 'value', map : 'Results>Data>value' type : 'int'
            } ],
            
            url : 'http://localhost:8080/query/packethost/Network1/TODAY/MINUTELY'
        };
        var dataAdapter = new $.jqx.dataAdapter(source, {
            autoBind : true,
            async : false,
            downloadComplete : function() {
            },
            loadComplete : function() {
            },
            loadError : function() {
            }
        });
        // prepare jqxChart settings
        var settings = {
            title : 'Request bytes by Time',
            showLegend : true,
            padding : {
                left : 5,
                top : 5,
                right : 5,
                bottom : 5
            },
            titlePadding : {
                left : 90,
                top : 0,
                right : 0,
                bottom : 10
            },
            source : dataAdapter,
            categoryAxis : {
                text : 'Category Axis',
                textRotationAngle : 0,
                dataField : 'time',
                formatFunction : function(value) {
                    return $.jqx.dataFormat.formatdate(value, 'HH:mm');
                },
                showTickMarks : true,
                tickMarksInterval : Math.round(dataAdapter.records.length / 6),
                tickMarksColor : '#888888',
                unitInterval : Math.round(dataAdapter.records.length / 6),
                showGridLines : true,
                gridLinesInterval : Math.round(dataAdapter.records.length / 3),
                gridLinesColor : '#888888',
                axisSize : 'auto'
            },
            colorScheme : 'scheme05',
            seriesGroups : [ {
                type : 'line',
                valueAxis : {
                    displayValueAxis : true,
                    description : 'KiloBytes',
                    //descriptionClass: 'css-class-name',
                    axisSize : 'auto',
                    tickMarksColor : '#888888',
                    unitInterval : 20,
                    minValue : 0,
                    maxValue : 100
                },
                series : [ {
                    dataField : 'value',
                    displayText : 'KiloBytes'
                } ]
            } ]
        };
        // setup the chart
        $('#jqxChart').jqxChart(settings);

October 2, 2013 at 6:45 am time series with dataAdapter #30019

Dimitar

Participant

Hello victorsosa,

You have omitted a comma in your source datafields definition. It should be:

datafields: [{
    name: 'time', map: 'Results>Data>time', type: 'long'
}, {
    name: 'value', map: 'Results>Data>value', type: 'int'
}],

Best Regards,
Dimitar

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

October 2, 2013 at 9:15 am time series with dataAdapter #30033

victorsosa

Member

thank for the help, I added the comma.

But still doesn’t work.

October 2, 2013 at 10:10 am time series with dataAdapter #30039

Dimitar

Participant

Hi victorsosa,

Something else that should be noted is your url. It does not point to a specific file but rather a folder. It may be the source of the issue.

Best Regards,
Dimitar

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

October 2, 2013 at 3:00 pm time series with dataAdapter #30057

victorsosa

Member

Hi Dimitar,

Nop, the url return the json below, I tested it using the browser.

{
    "Results": {
        "Category": "packethost",
        "SubTree": "Network1",
        "Time Dimension": "MINUTELY",
        "Time Period": "TODAY",
        "Data": [
            {
                "time": 1380408780000,
                "value": 86
            },
            {
                "time": 1380408840000,
                "value": 2482
            }
        ]
    }
}

October 2, 2013 at 10:16 pm time series with dataAdapter #30095

victorsosa

Member

Hi Dimitar,

I did this without using the DataSource and it is working.

        var sampledata = [
                    {
                        "time": 1380408780000,
                        "value": 86
                    },
                    {
                        "time": 1380408840000,
                        "value": 2482
                    }
               
                          ]
/*        var source = {
            datatype : 'json',
            datafields: [{
                name: 'time', map: 'Results>Data>time', type: 'long'
            }, {
                name: 'value', map: 'Results>Data>value', type: 'int'
            }],
            //root : 'Data',
            url : 'http://localhost:8080/query/packethost/Network1/TODAY/MINUTELY'
        };
        var dataAdapter = new $.jqx.dataAdapter(source, {
            autoBind : true,
            async : false,
            downloadComplete : function() {
            },
            loadComplete : function() {
            },
            loadError : function() {
            }
        }); */
        // prepare jqxChart settings
        var settings = {
            title : 'Request bytes by Time',
            showLegend : true,
            padding : {
                left : 5,
                top : 5,
                right : 5,
                bottom : 5
            },
            titlePadding : {
                left : 90,
                top : 0,
                right : 0,
                bottom : 10
            },
            source : sampledata,
            categoryAxis : {
                text : 'Category Axis',
                textRotationAngle : 0,
                dataField : 'time',
                formatFunction : function(value) {
                    return $.jqx.dataFormat.formatdate(new Date(value), 'HH:mm');
                },
                showTickMarks : true,
                tickMarksInterval : 10,//Math.round(dataAdapter.records.length / 6),
                tickMarksColor : '#888888',
                unitInterval : 10,//Math.round(dataAdapter.records.length / 6),
                showGridLines : true,
                gridLinesInterval : 10,//Math.round(dataAdapter.records.length / 3),
                gridLinesColor : '#888888',
                axisSize : 'auto'
            },
            colorScheme : 'scheme05',
            seriesGroups : [ {
                type : 'line',
                valueAxis : {
                    displayValueAxis : true,
                    description : 'KiloBytes',
                    //descriptionClass: 'css-class-name',
                    axisSize : 'auto',
                    tickMarksColor : '#888888',
                    unitInterval : 200,
                    minValue : 0,
                    maxValue : 3000
                },
                series : [ {
                    dataField : 'value',
                    displayText : 'KiloBytes'
                } ]
            } ]
        };
        // setup the chart
        $('#jqxChart').jqxChart(settings);

I only need to set correctly the DataSource to read this url : http://localhost:8080/query/packethost/Network1/TODAY/MINUTELY and map
the data in the json returned.

{
    "Results": {
        "Category": "packethost",
        "SubTree": "Network1",
        "Time Dimension": "MINUTELY",
        "Time Period": "TODAY",
        "Data": [
            {
                "time": 1380408780000,
                "value": 86
            },
            {
                "time": 1380408840000,
                "value": 2482
            }
        ]
    }
}

October 3, 2013 at 6:58 am time series with dataAdapter #30110

Dimitar

Participant

Hi victorsosa,

Here is what your source should look like:

var source = {
    datatype: 'json',
    datafields: [{
        name: 'time', map: 'time', type: 'long'
    }, {
        name: 'value', map: 'value', type: 'int'
    }],
    root: 'Results>Data',
    url : 'http://localhost:8080/query/packethost/Network1/TODAY/MINUTELY'
}

We hope this will resolve your issue.

Best Regards,
Dimitar

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

October 3, 2013 at 2:55 pm time series with dataAdapter #30172

victorsosa

Member

I did another change, the type for variable time should be: type: ‘long’ -> type: ‘float’

October 3, 2013 at 6:09 pm time series with dataAdapter #30188

victorsosa

Member

Well I tested it and still not working, but I tested it using data thought the dataadapter and it is working fine as you said with the changes but without calling the url.

working code without using the url.

    $(document).ready(function() {
        var sampledata = {
        	    "Results": {
        	        "Category": "packethost",
        	        "SubTree": "Network1",
        	        "Time Dimension": "MINUTELY",
        	        "Time Period": "TODAY",
        	        "Data": [
        	            {
        	                "time": 1379957460000,
        	                "value": 344
        	            },
        	            {
        	                "time": 1379957520000,
        	                "value": 1543
                        },
                        {
                            "time": 1379957580000,
                            "value": 778
                        },
                        {
                            "time": 1379957640000,
                            "value": 516
                        },
                        {
                            "time": 1379957700000,
                            "value": 1378
                        },
                        {
                            "time": 1379957760000,
                            "value": 688
                        },
                        {
                            "time": 1379957820000,
                            "value": 774
                        },
                        {
                            "time": 1379957880000,
                            "value": 688
                        },
                        {
                            "time": 1379957940000,
                            "value": 688
                        },
                        {
                            "time": 1379958000000,
                            "value": 2423
                        },
                        {
                            "time": 1379958060000,
                            "value": 132
                        }        	            
        	        ]
        	    }
        	}
        
        
        
       var source = {
            datatype : 'json',
            datafields: [{
                name: 'time', map: 'time', type: 'float'
            }, {
                name: 'value', map: 'value', type: 'int'
            }],
            root: 'Results>Data',
            localdata: sampledata
            //url : 'http://localhost:8080/query/packethost/Network1/TODAY/MINUTELY'
        };
        var dataAdapter = new $.jqx.dataAdapter(source, {
            autoBind : true,
            async : false,
            downloadComplete : function() {
            },
            loadComplete : function() {
            },
            loadError : function() {
            }
        });
        // prepare jqxChart settings
        var settings = {
            title : 'Request bytes by Time',
            showLegend : true,
            padding : {
                left : 5,
                top : 5,
                right : 50,
                bottom : 5
            },
            titlePadding : {
                left : 90,
                top : 0,
                right : 0,
                bottom : 10
            },
            source : dataAdapter,
            categoryAxis : {
                text : 'Category Axis',
                textRotationAngle : 0,
                dataField : 'time',
                toolTipShowDelay : 0,
                formatFunction : function(value) {
                    return $.jqx.dataFormat.formatdate(new Date(value), 'HH:mm');
                },
                showTickMarks : true,
                tickMarksInterval : 1, //Math.round(dataAdapter.records.length / 6),
                tickMarksColor : '#888888',
                unitInterval : 1,//Math.round(dataAdapter.records.length / 6),
                showGridLines : true,
                gridLinesInterval : 1,// Math.round(dataAdapter.records.length / 3),
                gridLinesColor : '#888888',
                axisSize : 'auto'
            },
            colorScheme : 'scheme05',
            seriesGroups : [ {
                type : 'area',
                valueAxis : {
                    displayValueAxis : true,
                    description : 'KiloBytes',
                    //descriptionClass: 'css-class-name',
                    axisSize : 'auto',
                    tickMarksColor : '#888888',
                    unitInterval : 200,
                    minValue : 0,
                    maxValue : 3000
                },
                series : [ {
                    dataField : 'value',
                    displayText : 'KiloBytes'
                } ]
            } ]
        };
        // setup the chart
        $('#jqxChart').jqxChart(settings);
        
    });

Well then I started looking and the thing is when I trying the url directly using the firefox it is working find, I can see the json response in the firefox, but when the call is made by the dataAdapter then I got this error found in firebug console trying to read response:
JSON.parse unexpected end of data

any ideas so far? I think it is a bug.
could it be because my URL is a directory instead of the traditional file resource.

October 4, 2013 at 1:08 am time series with dataAdapter #30192

victorsosa

Member

Ok update, it is returning the json if I use the “jsonp” as datatype; but still another issue that doesn’t allow to show the chart.

Checking…

October 4, 2013 at 1:07 pm time series with dataAdapter #30232

victorsosa

Member

Update: the issue was fixed using jsonp as datatype; but also I needed to add the callback function generated by jquery to the json response, it looks like:

jQuery1360574548776335413_1776656584447(
{
    "Results": {
        "Category": "packethost",
        "SubTree": "Network1",
        "Time Dimension": "MINUTELY",
        "Time Period": "TODAY",
        "Data": [
            {
                "time": 1380408780000,
                "value": 86
            },
            {
                "time": 1380408840000,
                "value": 2482
            }
        ]
    }
});

The thing is because I am doing call from file:///test.html instead of http://domain.com/test.html there is a send cross-domain request.

so NOW IS WORKING

Author

Posts

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

You must be logged in to reply to this topic.