jqplot pie chart not rendering correctly.

Getting the log message: Diameter of pie too small, not rendering.

Then, it seems when I hover or click inside the page I get: Uncaught TypeError: Cannot read property '0' of 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 Pr开发者_如何转开发oject",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 the div its going into:

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

Here is what I get on the page:

Let me know if you need any more details.

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

Try removing the following line:

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

and see if it renders properly.

(Edit: More information here:

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

I added the following line in my CSS file:

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

to overload properties from the jqplot css file.

Worked for me.

Your JQPlot chart definition seems correct. The pie renders correctly on my screen.

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

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

Include canvas.min.js. You can find it in examples in downloads. It worked for me with legend.

I just want to extend the answer from Amaud T:

I faced the same issue and I used the above answer, with some small modifications:

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

Due to the need of use !important, binding this stylesheet on a particular div objects prevents any side effects to other elements.