jQuery UI Widgets Forums Chart Updating chart source

This topic contains 6 replies, has 2 voices, and was last updated by  Christian Sciberras 8 years, 5 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Updating chart source #2407

    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. 🙁

    Updating chart source #2408

    Peter Stoev
    Keymaster

    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

    Updating chart source #2409

    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?

    Updating chart source #2410

    Peter Stoev
    Keymaster

    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

    Updating chart source #2411

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

    Thanks!

    Updating chart source #2623

    Peter Stoev
    Keymaster

    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

    Updating chart source #2638

    Woohoo! 🙂

    I’m off to try it out 😉

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

You must be logged in to reply to this topic.