We have a page where we are printing Kendo pie charts which is working perfectly fine. We have a facility to print these charts using default windows Print option using Windows.Print(). Issue that we have seen is that the charts which are Center aligned shifts to right while we are printing. On investingating further we understood that this is happening because the page is resizing itself while Printing but Kendo Charts are not resizing and aligning themselves in center. We explicitely refreshed the Kendo charts by adding followed by explicit refresh of Kendo Chart
$(“#Chart”).data("kendoChart").refresh();
However still we are facing challenge while getting it center aligned while printing. Has anyone faced similar challenge? Is there a workaround?
You can resize kendo chart by redraw method
$("#myChart").data("kendoChart").redraw();
Related
Does the Nivo charts library allow on-load animations for pie charts? I have only been able to get on-load animations for bar charts, but not for pie charts.
Nivo has a transition mode property which gives animation when a chart node is clicked. I need the animation to show on component load. Is there a workaround for this or has anyone managed to get this feature to work before? My pie chart is a react js storybook component.
This seems to be a difficult problem to solve. Nivo has an outstanding issue out where they made some progress, but based on the final postings the initial draw still has issues. I was able to force an initial render with a little help from window.setTimeout() but the animation ends up warping the circle, I'm guessing that is why it doesn't work by default.
I tried Victory.js and it also has the exact same issue. You can use this technique in React.js to force the initial draw.
My solution was to move to react-chartjs-2, which worked right out of the box.
https://react-chartjs-2.js.org/components/doughnut/
I have several dc.js charts in a dashboard and would like to allow the user to view a selected chart is a modal window that can be resized. Does anyone have suggestions or examples?
I don't think this is dc.js related exactly. More a html / javascript solution for showing a modal and providing resize options - then writing extra javascript so the dc.js chart resizes nicely with the modal.
Does it have to be a modal? An easier solution, in my opinion, would be to provide the ability to expand/resize/drag n drop the existing chart div - this can be done using a javascript library like gridster.js
Consider the Kendo scatter chart HERE in the telerik demos. What I want is to visually separate the chart area with some background colors. As I know Kendo itself doesn't facilitate such configuration.
I'm tring to solve it within the Kendo. I guess it can be done through svg drawings. But I've never done it before. If it's really impossible is there any way to do it or is there any other scatter chart to fulfill this requirement.(saw somewhat similar thing in google charts)
I'm including the expected result as below.
I came up with this code . It does the exact thing what I want. This is the solution.
I am using Telerik for Silverlight (for desktop browsers) and Kendo UI (for mobile browsers) in my data visualisation project.
Multi axis chart of types Bubble and Column works fine in Silverlight. But the same does not work in Kendo UI. Kendo just draws Column and not the bubbles. Anybody knows the way to achieve this in Kendo UI?
Please see my two images below:
Desktop Silverlight Chart
Mobile (Kendo UI) Chart
You can achieve that by creating multiple (in your case two) series. One for column and one for bubble.
Example can be found here: http://demos.telerik.com/aspnet-mvc/bar-charts/multiple-axes
If you've tried this and it doesn't work, post some code so we can debug. :)
I want to add data to kendo linechart series but when I add data then kendo redraw chart with all series so it cause performance problem. Is there any way draw it one by one ? Or how can I make real time line chart with kendo ?
This is my code. It cause performance problem.
http://demos.kendoui.com/dataviz/api/benchmark.html How can do it like in this link?
BlueChart.options.series[0].data.push(bvalue);
BlueChart.redraw();
Disable the chart animation. That will help a lot. Here is a complete list of perf tips for the DataViz suite...
http://docs.telerik.com/kendo-ui/dataviz/performance-tips