jQuery UI Widgets Forums Chart my fail chart

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • my fail chart #46658

    edwinwalsh
    Participant

    i am having difficulty in locating the issue on my chart, can someone assist me?
    while debugging i see that i am returning data from the getMetrics method. (1 row)
    but i am not getting anything to display and am unsure of how to debug.

    Thanks
    Edwin

    here is my code:
    <%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”QATesting.aspx.cs” Inherits=”QATesting.QATesting” %>

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head id=”Head1″ runat=”server”>
    <meta charset=”utf-8″ />
    <link rel=”stylesheet” href=”http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css” />

    <link rel=”stylesheet” type=”text/css” href=”styles/ui.jqgrid.css” />
    <link rel=”stylesheet” type=”text/css” href=”styles/DarkBlue.css” />

    <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.9.1.js”></script>
    <script type=”text/javascript” src=”http://code.jquery.com/ui/1.10.3/jquery-ui.js”></script>
    <%–<link rel=”stylesheet” href=”styles/style.css” />–%>
    <script type=”text/javascript”>
    $(function () { $(“#tabs”).tabs(); });
    </script>
    <script type=”text/javascript”>
    $(function () { $(“#tabsu”).tabs(); });
    </script>
    <script type=”text/javascript”>
    $(function () { $(“#tabss”).tabs(); });
    </script>
    <title id=’Description’>jqxChart Column Series Example</title>
    <script type=”text/javascript” src=”Scripts/jquery-1.10.2.min.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxcore.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxchart.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxdata.js”></script>
    <script src=”Scripts/jquery-ui.custom.min.js” type=”text/javascript”></script>
    <link rel=”stylesheet” href=”styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”Scripts/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxmenu.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxgrid.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxtabs.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxgrid.pager.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxwindow.js”></script>
    <script type=”text/javascript” src=”Scripts/gettheme.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxgrid.filter.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxpanel.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxinput.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxnumberinput.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxdropdownbutton.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxdockpanel.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxgrid.aggregates.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxgrid.columnsresize.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxdatetimeinput.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxcalendar.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxnumberinput.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxgrid.columnsreorder.js”></script>
    <script type=”text/javascript” src=”Scripts/jqxmenu.js”></script>
    <link href=”css/jqx.classic.css” rel=”stylesheet” type=”text/css” />
    <link rel=”stylesheet” type=”text/css” href=”styles/jqx.darkblue.css” />
    <script type=”text/javascript”>
    </script>

    <style type=”text/css”>
    html, body
    {
    width: 100%;
    height: 100%;
    }
    </style>

    <%———–%>
    <%–Metrics–%>
    <%———–%>
    <script type=”text/javascript”>
    $(document).ready(function () {
    //alert(‘Metrics’);
    // prepare chart data as an array
    var metricsource =
    {
    datatype: “xml”,
    datafields: [
    { name: ‘Rollout_Description’, type: ‘string’ },
    { name: ‘Sprint_Bugs’, type: ‘int’ },
    { name: ‘New_Bugs’, type: ‘int’ }
    ],
    async: false,
    record: ‘Table’,
    url: ‘QATesting.aspx/GetMetrics’
    };

    var dataAdapterMetrics = new $.jqx.dataAdapter(metricsource,
    { contentType: ‘application/json; charset=utf-8’ }
    );

    // prepare jqxChart settings
    var settings = {
    title: “Chart 1 – 100 Increments”,
    description: “New and Closed in Rollout 1312-2″,
    showLegend: true,
    enableAnimations: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: dataAdapterMetrics,
    categoryAxis: { dataField: ‘Rollout_Description’, showGridLines: true },
    colorScheme: ‘scheme01’,
    seriesGroups: [
    { type: ‘column’, columnsGapPercent: 50,
    valueAxis: { unitInterval: 1, displayValueAxis: true, description: ‘New_Bugs’ },
    series: [{ dataField: ‘Sprint_Bugs’, displayText: ‘Sprint_Bugs’ }, { dataField: ‘New_Bugs’, displayText: ‘New_Bugs’}]
    },
    { type: ‘line’, valueAxis: { unitInterval: 1, displayValueAxis: false, description: ‘Buggy’ },
    series: [{ dataField: ‘New_Bugs’, displayText: ‘New_Bugs’, opacity: 0.3}]
    }]
    };

    // setup the chart
    $(‘#jqxChart’).jqxChart(settings);

    });

    </script>

    <div id=”tabs-Metrics”>
    <table>
    <tr>
    <td>
    Metrics
    </td>
    </tr>
    <tr>
    <td>
    chart here…
    <div id=’host’ style=”margin: 0 auto; width: 900px; height: 500px;”>
    <div id=’jqxChart’ style=”width: 900px; height: 250px; position: relative; left: 0px; top: 0px; min-width: 300″>
    </div>
    </div>
    chart there…
    </td>
    </tr>
    <tr>
    <td>
    Metrics
    </td>
    </tr>
    </table>
    </div>

    my fail chart #46659

    Peter Stoev
    Keymaster

    Hi Edwin,

    We cannot test your code, because we do not have the data that you try to load. Could you provide it or some dummy data which reproduces the problem?

    In addition, you can also set the dataAdapter’s autoBind setting to true, when using it with jqxChart.

    Example:

    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error);} });
    

    Best Regards,
    Peter Stoev

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

    my fail chart #46661

    edwinwalsh
    Participant

    Hello Peter

    Thanks for the tip on the autobind! (did not make a difference on this chart)
    Hope this helps as an alternative datasource:

    var edwinsData = [
    { Rollout_Description: ‘Rollout 1308-1’, Sprint_Bugs: 33, New_Bugs: 21 },
    { Rollout_Description: ‘Rollout 1308-2’, Sprint_Bugs: 12, New_Bugs: 16 },
    { Rollout_Description: ‘Rollout 1309-1’, Sprint_Bugs: 0, New_Bugs: 27 },
    ];

    Edwin

    my fail chart #46705

    Peter Stoev
    Keymaster

    Hi Edwin,

    Your metricsource datatype should be set to “array”. Here is a working version of your example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
        <title id='Description'>jqxChart 100% Stacked Area Series Example</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxchart.js"></script>
        <style type="text/css">
            html, body
            {
                width: 100%;
                height: 100%;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                //alert('Metrics');
                // prepare chart data as an array
                var edwinsData = [{
                    Rollout_Description: 'Rollout 1308-1',
                    Sprint_Bugs: 33,
                    New_Bugs: 21
                }, {
                    Rollout_Description: 'Rollout 1308-2',
                    Sprint_Bugs: 12,
                    New_Bugs: 16
                }, {
                    Rollout_Description: 'Rollout 1309-1',
                    Sprint_Bugs: 0,
                    New_Bugs: 27
                }, ];
    
                var metricsource = {
                    datatype: "array",
                    datafields: [{
                        name: 'Rollout_Description',
                        type: 'string'
                    }, {
                        name: 'Sprint_Bugs',
                        type: 'int'
                    }, {
                        name: 'New_Bugs',
                        type: 'int'
                    }],
                    async: false,
                    record: 'Table',
                    localdata: edwinsData
                };
    
                var dataAdapterMetrics = new $.jqx.dataAdapter(metricsource, {
                    async: false,
                    autoBind: true,
                    contentType: 'application/json; charset=utf-8'
                });
    
                // prepare jqxChart settings
                var settings = {
                    title: "Chart 1 – 100 Increments",
                    description: "New and Closed in Rollout 1312-2",
                    showLegend: true,
                    enableAnimations: true,
                    padding: {
                        left: 5,
                        top: 5,
                        right: 5,
                        bottom: 5
                    },
                    titlePadding: {
                        left: 90,
                        top: 0,
                        right: 0,
                        bottom: 10
                    },
                    source: dataAdapterMetrics,
                    categoryAxis: {
                        dataField: 'Rollout_Description',
                        showGridLines: true
                    },
                    colorScheme: 'scheme01',
                    seriesGroups: [{
                        type: 'column',
                        columnsGapPercent: 50,
                        valueAxis: {
                            unitInterval: 1,
                            displayValueAxis: true,
                            description: 'New_Bugs'
                        },
                        series: [{
                            dataField: 'Sprint_Bugs',
                            displayText: 'Sprint_Bugs'
                        }, {
                            dataField: 'New_Bugs',
                            displayText: 'New_Bugs'
                        }]
                    }, {
                        type: 'line',
                        valueAxis: {
                            unitInterval: 1,
                            displayValueAxis: false,
                            description: 'Buggy'
                        },
                        series: [{
                            dataField: 'New_Bugs',
                            displayText: 'New_Bugs',
                            opacity: 0.3
                        }]
                    }]
                };
                // setup the chart
                $('#jqxChart').jqxChart(settings);
            });
        </script>
    </head>
    <body>
        <div id="tabs-Metrics">
            <table>
                <tr>
                    <td>
                        Metrics
                    </td>
                </tr>
                <tr>
                    <td>
                        chart here…
                        <div id='host' style="margin: 0 auto; width: 900px; height: 500px;">
                            <div id='jqxChart' style="width: 900px; height: 250px; position: relative; left: 0px;
                                top: 0px; min-width: 300">
                            </div>
                        </div>
                        chart there…
                    </td>
                </tr>
                <tr>
                    <td>
                        Metrics
                    </td>
                </tr>
            </table>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.