CODEWITHSUNDEEP
jqueryjquery-pluginsjqplot
Justin
Justin

Reputation: 619

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 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 the div its going into:

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

Here is what I get on the page: page output

Let me know if you need any more details.

Upvotes: 4

Views: 10869

Answers (5)

Reporter
Reporter

Reputation: 3948

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.

Upvotes: 0

Fazhom Arnaud
Fazhom Arnaud

Reputation: 61

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.

Upvotes: 3

Kurkula
Kurkula

Reputation: 6762

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

Upvotes: 0

otso
otso

Reputation: 514

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)

Upvotes: 11

user635090
user635090

Reputation: 1401

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).

Upvotes: 0

Related Questions