Cant bind my data - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular chart, array, beforeLoadComplete, bind, chart, data, format data, hideSerie, jquery chart, jqxChart, json, legend

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 Posts

January 7, 2016 at 7:59 pm 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…

January 8, 2016 at 8:53 am 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/

January 8, 2016 at 1:31 pm 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?

January 11, 2016 at 6:22 am 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/

Author

Posts

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

You must be logged in to reply to this topic.