Updating chart source

[Christian SciberrasMember]

The documentation states that one can update jqxChart in the following manner:


$('#chart').jqxChart({ colorScheme: 'scheme02' });
$('#chart').jqxChart('refresh');


However, the following code fails:


$('#chart').jqxChart({ source: [
{"x": 1, "y": 1},
{"x": 2, "y": 4},
{"x": 3, "y": 3},
{"x": 4, "y": 5}
] });
$('#chart').jqxChart('refresh');


Also, I don’t know why exactly, but the following code causes a lot of errors “Error: Invalid value for attribute x1=”NaN””:

jQuery('#pide-memory-chart').width(600).height(300).jqxChart({
title: "PIDE Memory Usage",
description: "Memory consumption of PIDE server.",
source: [
{"x": 1, "y": 1},
{"x": 2, "y": 4},
{"x": 3, "y": 3},
{"x": 4, "y": 5}
],
categoryAxis: {
dataField: 'x',
showGridLines: false
},
seriesGroups: [
{
type: 'line',
valueAxis: {
minValue: 0,
maxValue: 10,
unitInterval: 1
},
series: [
{ dataField: 'y', displayText: 'Usage'}
]
}
]
});


Finally, the documentation is a bit limited on describing what adapters do or how they work. According to MSDN, there is an adapter called ‘virtual data’, which sounds like something I need, but the documentation is pretty much non-existent at this point. 🙁

[Peter StoevKeymaster]

Hi uuf6429,

jqxChart has a built-in data binding logic designed to support multiple data sources and handle large datasets. The chart supports several data binding modes optimized for the most common integration scenarios:

Local Data – requires minimal effort to load data from local array.
Xml Data – jQuery Chart can be loaded from XML data using Ajax request.
JSON Data – jQuery Chart can be loaded from JSON data using Ajax request.
CSV Data – jQuery Chart can be loaded from Comma-Delimited data using Ajax request.
Tab Data – jQuery Chart can be loaded from Tab-Delimited data using Ajax request.
Remote Data- You can populate the Chart using JSONP. JSONP (JSON with Padding) represents a JSON data wrapped in a function call. JSONP is an effective cross-domain communication technique used for bypassing the same-origin policy limitations.

However, jqxChart does not support binding to ‘virtual data’. This is supported in the jqxGrid.

I have successfully displayed a Chart by using this code:

var source = [
{ "x": 1, "y": 1 },
{ "x": 2, "y": 4 },
{ "x": 3, "y": 3 },
{ "x": 4, "y": 5 }
]
// prepare jqxChart settings
var settings = {
    source: source,
    title: "PIDE Memory Usage",
    description: "Memory consumption of PIDE server.",
    categoryAxis:
        {
            dataField: 'x'
        },
    colorScheme: 'scheme01',
    seriesGroups:
        [
            {
                type: 'line',
                valueAxis:
                {
                    unitInterval: 1,
                    minValue: 0,
                    maxValue: 10
                },
                series: [
                        { dataField: 'y', displayText: 'Usage' }
                    ]
            }
        ]
};
// setup the chart
$('#jqxChart').jqxChart(settings);

I also did a second test with exactly the same code from your post, but still can’t reproduce. Could you send us the full source code which reproduces the reported issue as I tested the provided code block and still can’t reproduce the issue? I need the entire page’s code. In addition, do you use the latest jQWidgets version – 1.7?

jQuery('#pide-memory-chart').width(600).height(300).jqxChart({
title: "PIDE Memory Usage",
description: "Memory consumption of PIDE server.",
source: [
{"x": 1, "y": 1},
{"x": 2, "y": 4},
{"x": 3, "y": 3},
{"x": 4, "y": 5}
],
categoryAxis: {
dataField: 'x',
showGridLines: false
},
seriesGroups: [
{
type: 'line',
valueAxis: {
minValue: 0,
maxValue: 10,
unitInterval: 1
},
series: [
{ dataField: 'y', displayText: 'Usage'}
]
}
]
});

I agree that we should provide a new topic in the documentation similar to the one regarding the jqxGrid ‘Data Sources’. We will definitely work on this direction.

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

[Christian SciberrasMember]

While I can’t find the version in the files, I’m pretty sure I’m using jQWidgets 1.7, earlier versions didn’t have chart support, did they?

I’ll try to create a testcase since isolating the problem from my code is a bit difficult.

I don’t think you addressed my main concern. How do I update the source data? Is my approach (mentioned in the first post), correct?

[Peter StoevKeymaster]

Hi uuf6429,

jqxChart was released with jQWidgets ver. 1.6. For more information visit see this post: jqwidgets 1.6. That’s why I asked you about the version. We fixed several issues in jQWidgets 1.7. You can find the version in the Release Notes of your installation.

This code will bind the chart:

// prepare the data
var data = [
{ "x": 1, "y": 1 },
{ "x": 2, "y": 4 },
{ "x": 3, "y": 3 },
{ "x": 4, "y": 5 }
]
var source = {
    localdata: data,
    datatype: 'array'
}
var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true });
// prepare jqxChart settings
var settings = {
    source: dataAdapter,
    title: "PIDE Memory Usage",
    description: "Memory consumption of PIDE server.",
    categoryAxis:
    {
        dataField: 'x'
    },
    colorScheme: 'scheme01',
    seriesGroups:
        [
        {
            type: 'line',
            valueAxis:
            {
                unitInterval: 1,
                minValue: 0,
                maxValue: 10
            },
            series: [
                    { dataField: 'y', displayText: 'Usage' }
                ]
        }
    ]
};
// setup the chart
$('#jqxChart').jqxChart(settings);
// This code will update the Chart:
   var data = [
        { "x": 3, "y": 3 },
        { "x": 4, "y": 4 },
        { "x": 5, "y": 3 },
        { "x": 6, "y": 5 }
    ]
    var source = {
        localdata: data,
        datatype: 'array'
    }
    var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true });
    $('#jqxChart').jqxChart({ _renderData: new Array() });
    $('#jqxChart').jqxChart({ source: dataAdapter });
    $('#jqxChart').jqxChart('refresh');

Hope this helps you.

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

[Christian SciberrasMember]

Apparently, I was using the old version. Now it works with 1.7.

Thanks!

[Peter StoevKeymaster]

Hi Christian,

I am happy to tell you that we just released a new version of jQWidgets(ver. 1.8). We have improved the way how to dynamically change the source of the Chart and refresh its contents. You can read more about it here: jquery-chart-data-source.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Christian SciberrasMember]

Woohoo! 🙂

I’m off to try it out 😉

[Author]

Posts