Skip to content

Looking at Pie Charts in JQPlot extensively for ASP.NET and how the browsers render it Part 3

May 11, 2012

Today, I had pinpointed as to why Google Chrome had not been display the JQPlot graph (as predicting it may be a bug), well in fact it may be a programming flaw / bug that has caused it to not display the JQPlot graph after the first graph is displayed.

After writing the following code where ‘Chart’ is the chart area, and Dates is a C# oobject containing the Year, Month, Day in integer with Count as an integer count. This extract of the code if you had been following the previous posts, works perfectly fine in IE( and Mozilla Firefox, but not in Google Chrome.

At the front end: –

        plot2 = $.jqplot(‘Chart’, ret, {
            axes: {
                xaxis: {
                    label: ‘Date’,
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: { formatString: ‘%Y/%#m/%#d’ }
                yaxis: {
                    label: ‘No. Of Sessions’,
                    min: 0
            highlighter: {
                show: true,
                sizeAdjust: 7.5
            cursor: {
                show: true,
                zoom: true,
                tooltipLocation: ‘sw’

At the back end: –

            Data2 = “[“;

            IList<Dates> dates= Dates.GetDates(username);

            for (int i = 0; i < dates.Count; i++)
                string dateString = “[” + “\”” + (dates[i].Year + “-” + dates[i].Month + “-” + dates[i].Day).ToString() + “\”” + “” + “, “;

                string pointString = dates[i].Count.ToString() + “]”;

                Data2 += dateString + pointString;

                if (i != dates.Count – 1)
                    Data2 += “, “;

            Data2 += “]”;

It actually turns out that the single quotation or in this case, the double quotation being parsed onto the web browsing page cannot be interpreted by Google Chrome correctly!! A major bug!! This had been from a Javascript console error display on Chrome stating Uncaught TypeError: Object NaN has no method ‘getTime’ .

In other words, Google Chrome cannot read single quotes or double quotations as JSON or string with this JQPlot plugin for DateAxisRenderer and hence throws the error! That’s pretty bad!

This not very useful error message states that it couldn’t get the time element from the string, which means it was either a JSON error or browser rendering error, it turns out after multiple tries that it is a browsing rendering error with the plugin which is worse!

My testing showed that if I had changed:-

tickOptions: { formatString: ‘%Y/%#m/%#d’ } to

tickOptions: { formatString: ‘%s’ } which inteprets the output as UNIX timestamp, this meant that JQPlot reads the JSON . In this case the C# string as an integer rather than a string when parsed to the web browser in theory!

Changing back to tickOptions: { formatString: ‘%Y/%#m/%#d’ } displays it in year/month/day format on the graph.

So according to my theory of the C# code behind string being intepreted an integer rather than a string when parsed to the web browser, I removed “\”” in the varialbe dateString, and to my amazement, Google Chrome displays the JQPlot graph ok, which means it can render JSON as integers!


From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: