[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

[Author]

Posts