TypeError with jQuery FLOT v 0.8 but not with v0.7

I am using the jQuery FLOT plugin to plot some data. The tool that I am using to save the image is canvas2image. This small library lets you save a HTML5 canvas element as an image file. This code is working on my page and I am able to save the canvas element.

The problem was having was that the axis labels were not part of the canvas, and were therefore not being saved as part of the image. I then learned that FLOT 0.8 supports drawing axis labels to canvas using the canvas plugin. Since I had been using FLOT 0.7, I updated the library to the new version 0.8, and now I am getting an error: TypeError: options.grid.borderWidth is null.

When I switch back to version 0.7 of FLOT, the error message goes away, but with version 0.8 I get the error. I know that the div containing the flot plot needs to have the width and height specified, which is why I am using this: <div id="flot" style="height:10px; width:10px;"></div>.

In addition to specifying the width and height of the plot area in the HTML, I also specify it again on the success callback of my AJAX method. Here is the code for that:

$("#flotAverageSalePricesCity").result(function(event, data, formatted) {
if (data){
$.ajax({ 
    url: sURL + "utility/ajaxmuniChart1c",
    type: "POST",
    data: {muni: data[0]},
    dataType: 'json',               
    success: function(json){
        if  (data) {                    
            myWidth =  (document.getElementById('flot_widget').offsetWidth-45)+"px";
            myHeight = (document.getElementById('flot_widget').offsetWidth*.66)+"px";
            document.getElementById('flot').style.width = myWidth;
            document.getElementById('flot').style.height = myHeight;                    
            var options = {
                series: {
                    lines: { show: true, fill: false, fillColor: "rgba(255, 255, 255, 0.8)" },
                    points: { show: true, fill: true }
                }
            }; 
            var xxx = $.plot("#flot", [json], options);         
            var ctx = xxx.getCanvas();              
            cb = $('#flot').find('canvas.base');       
            canvas = cb.get(0);
            loc = sURL + 'php/saveme.php';
            var cs = new CanvasSaver(loc);                  
            var btnSave = cs.generateButton('Save', canvas, 'PTS_Chart');                   
            c3.appendChild(btnSave);
            var btnSave2 = cs.generateButton('Save2', ctx, 'PTS_Chart2');                   
            c3.appendChild(btnSave2);
        }
    }
})
}
})

Open in new window


Can someone explain why I might be receiving this error? Thanks.
Screenshot-2013-10-14-02.04.08.png
DanielAttardAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Please post your complete code and better if you can post the url to your test page.  We can't tell anything from your image other then restating what the error is.

I have only used the older version of flot myself.  I would first start with the examples they  have  with the newest version.  Also  looking at their example http://www.flotcharts.org/flot/examples/canvas/index.html there is an additional file for canvas <script language="javascript" type="text/javascript" src="../../jquery.flot.canvas.js"></script> did you include that?

Please supply a link to your test page for us to review.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What is the data being provided

if (data){
$.ajax({ 
    url: sURL + "utility/ajaxmuniChart1c",
    type: "POST",
    data: {muni: data[0]},
//**** What is in data[0] ****** 
alert data(data[0])
// *************************
    dataType: 'json',               
    success: function(json){
//**** What is in success ****** 
alert(json);
//**************************
        if  (data) {

Open in new window

0
DanielAttardAuthor Commented:
Hi padas - Thanks for the help.  Here is the data that comes back from the success callback:

data: [[2008, 48], [2009, 120], [2010, 44], [2011, 85], [2012, 42], [2013, 60]]
label: "Average Sale Price per SF for Ajax"

Open in new window


It is not easy for me to provide a link to the actual page I am working because it is behind a password-protected login.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
In that case, please recreate your info in jsbin.  Here I have used the flot canvas example but replaced the oil price data with yours and instead of your year dates, used some of the epoch dates provided in the exchange rates.

http://jsbin.com/uZIRAdu/6/edit?html,js,output

Since you can't use a url, please try and recreate in jsbin.  You can type over this version http://jsbin.com/uZIRAdu/7/edit.  Instead of ajax, just use the data as a variable.
0
DanielAttardAuthor Commented:
thanks padas.   will try this later today.  have to take my daughter for a swim now.  jsbin.com is returned 502 Bad Gateway error right now . . .
0
DanielAttardAuthor Commented:
Hi padas - I have moved my code to attardpropertytax.ca so that you can see the error i am receiving.  Just search for the municipality 'Ajax' and then click the 'Convert' button and you will see the error.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It looks like the problem is your php page http://attardpropertytax.ca/utility/ajaxmuniChart1c on line 52
Severity: Notice

Message: Undefined variable: JsonArray

Filename: controllers/utility.php

Line Number: 52

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.