The jqplot graphical chart is not displayed correctly.

Question

Receiving a log message: Pie diameter is too small, not rendering.

Then it seems when I hover or click inside the page I get: Uncaught TypeError: Can't read property '0' from undefined

<link href="/Content/jqPlot/jquery.jqplot.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery.jqplot.js" type="text/javascript"></script> <script src="/Scripts/jqplot.pieRenderer.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //GetWeeklyProjectSummary(); Test(); }); function Test() { var data = [["987 Project",74],["ABC Project",68],["XYZ project",26]]; var plot1 = jQuery.jqplot('weeklyProjectSummary', [data], { seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels: true } }, legend: { show: true, location: 'e' } } ); } </script> 

Here is its div:

 <div id="weeklyProjectSummary"></div> 

Here is what I see on the page:

Let me know if you need more details.

Answer 1

I had a similar problem when using jqplot with blueprintcss - based on your screen. I believe you are using blueprintcss.

Try deleting the following line:

 legend: { show: true, location: 'e' } 

and see if it displays correctly.

(Edit: More information here:

https://bitbucket.org/cleonello/jqplot/issue/48/legends-doesnt-look-nice-when-using )

Answer 2

I added the following line to my CSS file :

.jqplot-table-legend {width: auto; }

to overload the properties from the jssplot css file.

Worked for me.

Answer 3

Your JQPlot chart definition seems correct. The cake displays correctly on my screen.

I do not see jquery.js or jquery.min.js. Can you confirm that you have a link to this file in your code?

Also make sure all of your js / css files are correctly specified (you can use the JSView Firefox Extension to quickly confirm that they are indeed included).

Answer 4

Include canvas.min.js. You can find it in the examples in the download files. It worked for me with a legend.

Answer 5

I just want to extend the answer from Amaud T :

I ran into the same problem and I used the above answer with a few changes:

 <style type="text/css"> #chartComponentId table.jqplot-table-legend { width: auto !important;} </style> <div id="chartComponentId" class="chartComponent"> ... </div> 

Due to the need to use! importantly, binding this style sheet to specific div objects prevents any side effects for other elements.