Jqxchart is not working in Require js

[mani582Participant]

Hi,

First is set the dependency for chart js files in main.js file and then again i just call that setted js files in chart.js files which i required.But chart is not displaying and not showing any error message in console/debugger.Can you please provide and guideline links for chart in Require js etc..

Thank you

[Peter StoevKeymaster]

Hi mani582,

When it is configured correctly, it works. Please, see the configuration below:

requirejs-chart-app.js

define(["jquery", "demos", "jqxcore", "jqxdata", "jqxchart.core", "jqxdraw"], function () {
    var initialize = function () {
        $(document).ready(function () {
            // prepare chart data as an array            
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Country' },
                    { name: 'GDP' },
                    { name: 'DebtPercent' },
                    { name: 'Debt' }
                ],
                url: '../sampledata/gdp_dept_2010.txt'
            };

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

            // prepare jqxChart settings
            var settings = {
                title: "Economic comparison",
                description: "GDP and Debt in 2010",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                    {
                        dataField: 'Country',
                        showGridLines: true
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 50,
                            valueAxis:
                            {
                                unitInterval: 5000,
                                displayValueAxis: true,
                                description: 'GDP & Debt per Capita($)'
                            },
                            series: [
                                    { dataField: 'GDP', displayText: 'GDP per Capita' },
                                    { dataField: 'Debt', displayText: 'Debt per Capita' }
                            ]
                        },
                        {
                            type: 'line',
                            valueAxis:
                            {
                                unitInterval: 10,
                                displayValueAxis: false,
                                description: 'Debt (% of GDP)'
                            },
                            series: [
                                    { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
                            ]
                        }

                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);
        });
    };
    return {
        initialize: initialize
    };
});

requirejs-chart-main.js

require.config({
    paths: {
        "jquery": "../../scripts/jquery-1.11.1.min",
        "jqxcore": "../../jqwidgets/jqxcore",
        "jqxdata": "../../jqwidgets/jqxdata",
        "jqxdraw": "../../jqwidgets/jqxdraw",
        "jqxchart.core": "../../jqwidgets/jqxchart.core",
        "demos": "../../scripts/demos"
    },
    shim: {
        "demos": {
            export: "$",
            deps: ["jquery"]
        },
        "jqxcore": {
            export: "$",
            deps: ["jquery"]
        },
        "jqxdata": {
            export: "$",
            deps: ["jquery", "jqxcore"]
        },
        "jqxdraw": {
            export: "$",
            deps: ["jquery", "jqxcore"]
        },
        "jqxchart.core": {
            export: "$",
            deps: ["jquery", "jqxcore", "jqxdraw"]
        }
    }
});
require(["requirejs-chart-app"], function (App) {
    App.initialize();
});

requirejs-chart.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">RequireJS Integration</title>
    <script type="text/javascript" data-main="requirejs-chart-main" src="../../scripts/require.js"></script>
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
</head>
<body>
    <div id='chartContainer' style="width: 850px; height: 500px;">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

[mani582Participant]

Hi,

Thank you so much for prompt reply.I have done the same thing in my main.js file as below:

require.config({
    waitSeconds: 15,
    //urlArgs: "peventCache=" + (new Date()).getTime(),
    paths: {
        "text": "lib/requireJS/text",
        "jquery": "lib/jQuery/jquery-2.1.1",
        "uderscore": "lib/underscore/underscore",
        "backbone": "lib/backbone/backbone",
        "marionette": "lib/backbone/marionette/backbone.marionette",
        "bootstrap": "lib/bootstrap/bootstrap.min",
        "jqxcore": "lib/jqwidgets/jqxcore",
        "jqxdata": "lib/jqwidgets/jqxdata",
        "jqxdraw":"lib/jqwidgets/jqxdraw",
        "jqxchart.core":"lib/jqwidgets/jqxchart.core",
        "jqxchart":"lib/jqwidgets/jqxchart",
        "jqxbuttons": "lib/jqwidgets/jqxbuttons",
        "jqxscrollbar": "lib/jqwidgets/jqxscrollbar",
        "jqxlistbox": "lib/jqwidgets/jqxlistbox",
        "jqxdropdownlist": "lib/jqwidgets/jqxdropdownlist",
        "jqxmenu": "lib/jqwidgets/jqxmenu",
        "jqxgrid": "lib/jqwidgets/jqxgrid",
        "jqxgrid.edit": "lib/jqwidgets/jqxgrid.edit",
        "jqxgrid.filter": "lib/jqwidgets/jqxgrid.filter",
        "jqxgrid.selection": "lib/jqwidgets/jqxgrid.selection",
        "jqxgrid.pager": "lib/jqwidgets/jqxgrid.pager"
      

    },
    shim: {
        'jquery': {
            exports: '$'
        },
        'uderscore': {
            exports: '_'
        },
        'backbone': {
            // These script dependencies should be loaded before loading
            // backbone.js
            deps: ['uderscore', 'jquery'],
            // Once loaded, use the global 'Backbone' as the
            // module value.
            exports: 'Backbone'
        },
        "marionette": {
            deps: ["backbone"],
            exports: "Marionette"
        },
        "bootstrap": {
            deps: ["jquery"],
            exports: "boot"
        },
        "jqxcore": {
            export: "$",
            deps: ["jquery"]
        },
       
        "jqxdata": {
            export: "$",
            deps: ["jquery", "jqxcore",]
        },
        
         
        "jqxbuttons": {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },
        "jqxscrollbar": {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },
        "jqxlistbox": {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },
        "jqxdropdownlist": {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },
        "jqxmenu": {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },
        "jqxdraw": {
            export: "$",
            deps: ["jquery", "jqxcore"]
        },
         "jqxchart.core": {
            export: "$",
            deps: ["jquery", "jqxcore","jqxdraw"]
        },
         "jqxchart": {
            export: "$",
            deps: ["jquery", "jqxcore","jqxdraw"]
        },
        "jqxgrid": {
            export: "$",
            deps: ["jquery", "jqxcore", "jqxdata"]
        },
        "jqxgrid.edit": {
            export: "$",
            deps: ["jquery", "jqxcore", "jqxgrid"]
        },
        "jqxgrid.filter": {
            export: "$",
            deps: ["jquery", "jqxcore", "jqxgrid"]
        },
        "jqxgrid.selection": {
            export: "$",
            deps: ["jquery", "jqxcore", "jqxgrid"]
        },
        "jqxgrid.pager": {
            export: "$",
            deps: ["jquery", "jqxcore", "jqxgrid"]
        },
    }
});
var App;
require(["controller"], function(Application) {

    App = Application;
    App.start();
});

And also i have called the required chart js in chartoverview.js model file as below:

/**
 * 
 */
define(["controller",
    'text!./template/salesoverview.html',
    'jqxcore','jqxdata','jqxchart.core','jqxdraw'
], function(App,sov) {
    "use strict";
    App.module("Home.View", function(View, App, Backbone, Marionette, $, _) {

       View.Salesoverview = Marionette.ItemView.extend({
            template: _.template(sov),
            initialize: function() {
                _.bindAll(this, 'render');
            },
            render: function() {
                var salesView = this;
                $(salesView.el).addClass('row');
                salesView.$el.html(salesView.template());
salesView.$(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
                    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
                    { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
                    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
                    { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
                ];
            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise by activity",
               
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                    {
                        dataField: 'Day',
                        showTickMarks: true,
                        valuesOnTicks: false,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
                        axisSize: 'auto'
                    },
                colorScheme: 'scheme05',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            showLabels: true,
                            valueAxis:
                            {
                                unitInterval: 10,
                                minValue: 0,
                                maxValue: 100,
                                description: 'Goal in minutes',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'Goal', displayText: 'Personal Goal', symbolType: 'square'}
                                ]
                        }
                    ]
            };
            // setup the chart
            salesView.$('#chartContainer').jqxChart(settings);
        });
            }
        });
       
           });
    return App.Home.View;
});

Can you please check the above two js and let me know weather i am doing any mistake.And also please let me know what it the use of demo.js and is that js file required to display chart.

Thank you

[Peter StoevKeymaster]

Hi mani582,

Please, at least try my working example to see how it works and what you should do in order to make it to work on your side. As far as I see in your code, you should remove:

` “jqxchart”: {
export: “$”,
deps: [“jquery”, “jqxcore”,”jqxdraw”]
},
`

because jqxchart.js = jqxdraw.js + jqxchart.core.js + jqxchart.rangeselector.js.

demo.js is not required. It is required only for our demos to detect the Theme setting in the Theme chooser.

Best Regards,
Peter Stoev

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

[Author]

Posts