This is a migrated thread and some comments may be shown as answers.

Charts not rendering locally

3 Answers 26 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 05 Aug 2015, 09:47 PM

If I just copy one of the simple examples and paste it into my code the only thing it renders are the legend and the labels. I have to set renderAs to canvas in order for it to show up.

I have all the right css and js files loaded but still I get nothing if I don't render as canvas.

Happens on all browsers. See attached image

 This is my code:

data returned is:

[{Key:Male,Value:42},{Key:Female,Value:​29},{Key:​Other,Value:​16},{Key:Unspecified,Value:31}]

<div id="genderChart" ng-controller="GenderChartController" class="chart"></div>

<div id="workingChart" ng-controller="GenderChartController" class="chart"></div>

 

$("#genderChart").kendoChart({
            dataSource: {
                transport: {
                    read: function (options) {
                        RadiusAjax.get('Person/GetPersonGenderMetrix').then(function (data) {
                            options.success(data);
                        })
                    }
                },
                sort: {
                    field: "Key",
                    dir: "asc"
                }
 
            },
            theme: "material",
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "pie"
            },
            series: [{
                type: 'pie',
                field: "Value",
                categoryField: "Key",
                overlay: {
                    gradient: "sharpBevel"
                }
 
            }]
            
        });
 
        $("#workingChart").kendoChart({
            dataSource: {
                transport: {
                    read: function (options) {
                        RadiusAjax.get('Person/GetPersonGenderMetrix').then(function (data) {
                            options.success(data);
                        })
                    }
                },
                sort: {
                    field: "Key",
                    dir: "asc"
                }
 
            },
            theme: "material",
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "pie"
            },
            series: [{
                type: 'pie',
                field: "Value",
                categoryField: "Key",
                overlay: {
                    gradient: "sharpBevel"
                }
 
            }],
            renderAs: "canvas",
        });

 

 

 

 

3 Answers, 1 is accepted

Sort by
0
Jason
Top achievements
Rank 1
answered on 05 Aug 2015, 09:49 PM
here is the rendered html page
0
Iliana Nikolova
Telerik team
answered on 07 Aug 2015, 11:41 AM
Hi Jason,

I tried to reproduce the issue using the provided chart configuration but to no avail (dojo). Is it possible to modify my example or provide an isolated runnable example which I could test on my side - this way I would be able to check what exactly is going wrong and provide concrete recommendations? Thank you in advance for your cooperation and time.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jason
Top achievements
Rank 1
answered on 07 Aug 2015, 05:07 PM

Got it solved, when I was creating a runnable sample and it was working fine I did a little more looking into our app and found we had some old references to 3rd party css files that interfere with your charts.

"morris-chart/morris.min.css",
"c3-chart/c3.min.css",

Tags
Charts
Asked by
Jason
Top achievements
Rank 1
Answers by
Jason
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Share this question
or