jQuery UI Widgets › Forums › Chart › Disabling animation for pie chart
Tagged: Angular chart, animation, chart, enableanimations, jquery chart, jqxChart, pie, series
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 8 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
Hello,
How do you disable loading animation for a pie chart?
“enableAnimations: false” doesn’t seem to work.
Hello Nicolas,
enableAnimations: false
works with version 3.8.0. Here is an example:<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare chart data as an array var source = { datatype: "csv", datafields: [ { name: 'Browser' }, { name: 'Share' } ], url: '../sampledata/desktop_browsers_share_dec2011.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); // prepare jqxChart settings var settings = { title: "Desktop browsers share", description: "(source: wikipedia.org)", enableAnimations: false, showLegend: false, showBorderLine: true, legendPosition: { left: 520, top: 140, width: 100, height: 100 }, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 0, top: 0, right: 0, bottom: 10 }, source: dataAdapter, colorScheme: 'scheme02', seriesGroups: [ { type: 'pie', showLabels: true, series: [ { dataField: 'Share', displayText: 'Browser', labelRadius: 120, initialAngle: 15, radius: 170, centerOffset: 0, formatSettings: { sufix: '%', decimalPlaces: 1 } } ] } ] }; // setup the chart $('#chartContainer').jqxChart(settings); }); </script> </head> <body class='default'> <div id='chartContainer' style="width: 850px; height: 500px;"> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.