jQuery UI Widgets Forums Chart Cant bind my data

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Cant bind my data #80207

    lisaB
    Participant

    Hello!
    Its been three days that I have been trying to implement this graph on my own and I have failed terribly.
    I have been trying to implement the following chart on the given data:
    CHART:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_column_series_1.htm?arctic
    Data:
    [{“PRODUCTIONNO”:”N-10″,”In Process”:6},{“PRODUCTIONNO”:”N-10″,”Resolved”:3},{“PRODUCTIONNO”:”N-14″,”In process”:4},{“PRODUCTIONNO”:”N-14″,”Resolved”:3},{“PRODUCTIONNO”:”N-14″,”Under Observati”:1},{“PRODUCTIONNO”:”N-18″,”In Process”:7},{“PRODUCTIONNO”:”N-18″,”Resolved”:39},{“PRODUCTIONNO”:”N-18″,”Under Observati”:1},{“PRODUCTIONNO”:”N-7″,”In process”:4},{“PRODUCTIONNO”:”N-7″,”Resolved”:19}]

    I went through the forum and found that my data was in the wrong format… on that post the data was converted like this:

    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true,
                    beforeLoadComplete: function (records) {
                        newRecords = new Array({ Year: 2012, Site1: 0, Site2: 0, Site3: 0, Site4: 0 }, { Year: 2013, Site1: 0, Site2: 0, Site3: 0, Site4: 0 }, { Year: 2014, Site1: 0, Site2: 0, Site3: 0, Site4: 0 });
                        for (var i = 0; i < records.length; i++) {
                            var currentRecord = records[i];
                            switch (currentRecord.Year) {
                                case "2012":
                                    newRecords[0]["Site" + currentRecord.SiteId] = parseFloat(currentRecord.Amount);
                                    break;
                                case "2013":
                                    newRecords[1]["Site" + currentRecord.SiteId] = parseFloat(currentRecord.Amount);
                                    break;
                                case "2014":
                                    newRecords[2]["Site" + currentRecord.SiteId] = parseFloat(currentRecord.Amount);
                                    break;
                            }
                        }
                        return newRecords;
                    },
                    loadError: function (xhr, status, error) {
                        alert('Error loading "' + source.url + '" : ' + error);
                    }
                });

    I have literally tried everything I have implemented other graphs as well… But I am just unable to implement this one. And would really appreciate if someone could let me know whats wrong with my data…

    Cant bind my data #80235

    Dimitar
    Participant

    Hello lisaB,

    Here is a working example with your data:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = [{
                    "PRODUCTIONNO": "N-10",
                    "In Process": 6
                }, {
                    "PRODUCTIONNO": "N-10",
                    "Resolved": 3
                }, {
                    "PRODUCTIONNO": "N-14",
                    "In Process": 4
                }, {
                    "PRODUCTIONNO": "N-14",
                    "Resolved": 3
                }, {
                    "PRODUCTIONNO": "N-14",
                    "Under Observati": 1
                }, {
                    "PRODUCTIONNO": "N-18",
                    "In Process": 7
                }, {
                    "PRODUCTIONNO": "N-18",
                    "Resolved": 39
                }, {
                    "PRODUCTIONNO": "N-18",
                    "Under Observati": 1
                }, {
                    "PRODUCTIONNO": "N-7",
                    "In Process": 4
                }, {
                    "PRODUCTIONNO": "N-7",
                    "Resolved": 19
                }];
    
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'PRODUCTIONNO' },
                        { name: 'In Process' },
                        { name: 'Resolved' },
                        { name: 'Under Observati' }
                    ],
                    localdata: data
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    beforeLoadComplete: function (data) {
                        var productionNos = [],
                            newData = [];
                        for (var i = 0; i < data.length; i++) {
                            var current = data[i];
                            var no = parseInt(current.PRODUCTIONNO.slice(2));
                            if (productionNos.indexOf(no) === -1) {
                                var newDataPoint = {};
                                newDataPoint['PRODUCTIONNO'] = current['PRODUCTIONNO'];
                                if (current['In Process']) {
                                    newDataPoint['In Process'] = current['In Process'];
                                }
                                if (current['Resolved']) {
                                    newDataPoint['Resolved'] = current['Resolved'];
                                }
                                if (current['Under Observati']) {
                                    newDataPoint['Under Observati'] = current['Under Observati'];
                                }
                                newData.push(newDataPoint);
                                productionNos.push(no);
                            } else {
                                var updatedValue = newData[productionNos.indexOf(no)];
                                if (current['In Process']) {
                                    updatedValue['In Process'] = current['In Process'];
                                }
                                if (current['Resolved']) {
                                    updatedValue['Resolved'] = current['Resolved'];
                                }
                                if (current['Under Observati']) {
                                    updatedValue['Under Observati'] = current['Under Observati'];
                                }
                            }
                        }
                        return newData;
                    }
                });
    
                // prepare jqxChart settings
                var settings = {
                    title: "Fitness & exercise weekly scorecard",
                    description: "Time spent in vigorous exercise",
                    enableAnimations: true,
                    showLegend: true,
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter,
                    xAxis:
                        {
                            dataField: 'PRODUCTIONNO',
                            showGridLines: true
                        },
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'column',
                                columnsGapPercent: 50,
                                seriesGapPercent: 0,
                                valueAxis:
                                {
                                    unitInterval: 10,
                                    minValue: 0,
                                    maxValue: 100,
                                    displayValueAxis: true,
                                    description: 'Time in minutes',
                                    axisSize: 'auto',
                                    tickMarksColor: '#888888'
                                },
                                series: [
                                        { dataField: 'In Process', displayText: 'In Process' },
                                        { dataField: 'Resolved', displayText: 'Resolved' },
                                        { dataField: 'Under Observati', displayText: 'Under Observati' }
                                    ]
                            }
                        ]
                };
    
                // setup the chart
                $('#jqxChart').jqxChart(settings);
    
            });
        </script>
    </head>
    <body class='default'>
        <div style='height: 600px; width: 682px;'>
            <div id='host' style="margin: 0 auto; width: 850px; height: 400px;">
                <div id='jqxChart' style="width: 850px; height: 400px; position: relative; left: 0px;
                    top: 0px;">
                </div>
            </div>
        </div>
    </body>
    </html>

    Please note that the second datafield is used as either “In Process” or “In process” in all data points and you do not have a mix of both. “In Process” is used in our example.

    Best Regards,
    Dimitar

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

    Cant bind my data #80252

    lisaB
    Participant

    Thats great!! It works just fine!
    I have one more thing that I need to ask you.
    I want all my legends to be unchecked by default. I read about it and found out that hideserie is a property used to do that. But I dont understand how it works.
    can you tell me how to uncheck my legends by default in the code above?

    Cant bind my data #80281

    Dimitar
    Participant

    Hi lisaB,

    You just need to call the chart’s hideSerie method three times after the widget’s initialization:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = [{
                    "PRODUCTIONNO": "N-10",
                    "In Process": 6
                }, {
                    "PRODUCTIONNO": "N-10",
                    "Resolved": 3
                }, {
                    "PRODUCTIONNO": "N-14",
                    "In Process": 4
                }, {
                    "PRODUCTIONNO": "N-14",
                    "Resolved": 3
                }, {
                    "PRODUCTIONNO": "N-14",
                    "Under Observati": 1
                }, {
                    "PRODUCTIONNO": "N-18",
                    "In Process": 7
                }, {
                    "PRODUCTIONNO": "N-18",
                    "Resolved": 39
                }, {
                    "PRODUCTIONNO": "N-18",
                    "Under Observati": 1
                }, {
                    "PRODUCTIONNO": "N-7",
                    "In Process": 4
                }, {
                    "PRODUCTIONNO": "N-7",
                    "Resolved": 19
                }];
    
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'PRODUCTIONNO' },
                        { name: 'In Process' },
                        { name: 'Resolved' },
                        { name: 'Under Observati' }
                    ],
                    localdata: data
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    beforeLoadComplete: function (data) {
                        var productionNos = [],
                            newData = [];
                        for (var i = 0; i < data.length; i++) {
                            var current = data[i];
                            var no = parseInt(current.PRODUCTIONNO.slice(2));
                            if (productionNos.indexOf(no) === -1) {
                                var newDataPoint = {};
                                newDataPoint['PRODUCTIONNO'] = current['PRODUCTIONNO'];
                                if (current['In Process']) {
                                    newDataPoint['In Process'] = current['In Process'];
                                }
                                if (current['Resolved']) {
                                    newDataPoint['Resolved'] = current['Resolved'];
                                }
                                if (current['Under Observati']) {
                                    newDataPoint['Under Observati'] = current['Under Observati'];
                                }
                                newData.push(newDataPoint);
                                productionNos.push(no);
                            } else {
                                var updatedValue = newData[productionNos.indexOf(no)];
                                if (current['In Process']) {
                                    updatedValue['In Process'] = current['In Process'];
                                }
                                if (current['Resolved']) {
                                    updatedValue['Resolved'] = current['Resolved'];
                                }
                                if (current['Under Observati']) {
                                    updatedValue['Under Observati'] = current['Under Observati'];
                                }
                            }
                        }
                        return newData;
                    }
                });
    
                // prepare jqxChart settings
                var settings = {
                    title: "Fitness & exercise weekly scorecard",
                    description: "Time spent in vigorous exercise",
                    enableAnimations: true,
                    showLegend: true,
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter,
                    xAxis:
                        {
                            dataField: 'PRODUCTIONNO',
                            showGridLines: true
                        },
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'column',
                                columnsGapPercent: 50,
                                seriesGapPercent: 0,
                                valueAxis:
                                {
                                    unitInterval: 10,
                                    minValue: 0,
                                    maxValue: 100,
                                    displayValueAxis: true,
                                    description: 'Time in minutes',
                                    axisSize: 'auto',
                                    tickMarksColor: '#888888'
                                },
                                series: [
                                        { dataField: 'In Process', displayText: 'In Process' },
                                        { dataField: 'Resolved', displayText: 'Resolved' },
                                        { dataField: 'Under Observati', displayText: 'Under Observati' }
                                    ]
                            }
                        ]
                };
    
                // setup the chart
                $('#jqxChart').jqxChart(settings);
                $('#jqxChart').jqxChart('hideSerie', 0, 0, NaN);
                $('#jqxChart').jqxChart('hideSerie', 0, 1, NaN);
                $('#jqxChart').jqxChart('hideSerie', 0, 2, NaN);
            });
        </script>
    </head>
    <body class='default'>
        <div style='height: 600px; width: 682px;'>
            <div id='host' style="margin: 0 auto; width: 850px; height: 400px;">
                <div id='jqxChart' style="width: 850px; height: 400px; position: relative; left: 0px;
                    top: 0px;">
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    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.