JQPlot not recognized by Jquery-Collection of common programming errors

I am working on a web app, and I very much like the drag graphs that JQPlot offers. I am referring to this example on their site: http://www.jqplot.com/deploy/dist/examples/customHighlighterCursorTrendline.html

As I understand, to get JQPlot working, I need to include Jquery, the jquery jqplot fucntion, and a couple of styling files. The JQPlot download provides its own jquery.js and jquery.jqplot.js.

Additionally, I am also using Knockout.js as part of this project, and I am including the standard jquery-1.9.1.js file to get that working.

However, the definition file for “$” is jquery-1.9.1.js, and since JQPlot provides its own jquery file, there must be some sort of conflict that makes the jqplot function unrecognizable. Is there a workaround for this? Here is my HTML code:

@model FluidBedSimulation.Models.BedState
@using Newtonsoft.Json

@{
    ViewBag.Title = "Index";
}

Index

@if (false)
{
    
    
    

}











    $(document).ready(function () {


        $.jqplot.config.enablePlugins = true;

        s1 = [['23-May-08', 1], ['24-May-08', 4], ['25-May-08', 2], ['26-May-08', 6]];

        plot1 = $.jqplot('chartdiv', [s1], {
            title: 'Highlighting, Dragging, Cursor and Trend Line',
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%#m/%#d/%y'
                    },
                    numberTicks: 4
                },
                yaxis: {
                    tickOptions: {
                        formatString: '$%.2f'
                    }
                }
            },
            highlighter: {
                sizeAdjust: 10,
                tooltipLocation: 'n',
                tooltipAxes: 'y',
                tooltipFormatString: 'hello %.2f',
                useAxesFormatters: false
            },
            cursor: {
                show: true
            }
        });
    });



@*grab values from the view model directly*@


Bed Weight: 

H2O Bed Weight: 

Fraction of Binder in Spray Solution: 



    Enter the Bed Mass: 
            

            @*Html.TextBoxFor(model => model.BedMass, new { data_bind = "value: BedMass" })*@



    Enter the H2O Mass in the Bed: 
            @Html.TextBoxFor(model => model.BedWaterMass, new { data_bind = "value: BedWaterMass" })



    Enter the Fraction of Binder in the Spray Solution: 
            @Html.TextBoxFor(model => model.binderFraction, new { data_bind = "value: binderFraction" })


Simulate


@*to be used later as controls for the simulation*@




    this.BedMass = ko.observable(1);
    this.BedWaterMass = ko.observable(1);
    this.binderFraction = ko.observable(1);

    (function () {
        var model = '@Html.Raw(Json.Encode(Model))';
        var viewModel = ko.mapping.fromJS(model);
        ko.applyBindings(viewModel);

    })();

The exact error I get when I run the project is: "Uncaught TypeError: Cannot read property 'config' of undefined " This is the line that triggers it: $.jqplot.config.enablePlugins = true; When I write "$." in Visual Studio, jqplot is not even an option. I have searched a bunch of threads, but can't seem to find anything relevant. I would like to know if there is some way to use both jqplot and knockout (among other things that use the standard jquery file). Thanks in advance!

1. I had the same problem. I traced through the processing of the jquery.jqplot.js file and it was being executed, the config was defined and by the end of the processing of the file everything seemed in place (i.e. the variables were correctly assigned to the jQuery variable and the $ alias). It would seem, however, that by the time I reach the $(document).ready() callback $.jqplot was undefined…

   I found that the same issue occurred with the extension ‘noty’… Eventually I noticed that at the end of my Layout.cshtml (I am implementing within MVC 4) I found that there was a @RenderSection("scripts", required: false) which was preceded by a reference to the JQuery bundle.

   In summary: the jQuery bundle was being included in the head section (by me) of the HTML and then, again, in the footer (which overwrote all the extensions that had been included in hte html ). This was a feature of the MVC 4 template – something I’m not over enamoured with.