Show selected chart in a resizable modal - dc.js

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

Related

How to zoom on a Laravel AreaChart?

Is it possible to have an area Laravel chart on which we can zoom to have a closer look on it?
I have an area chart with three components to show, two of them having very close values i would like to zoom into onclick.
This has nothing to do with laravel. You should check the chart plugin's documentation if it support the zoom mechanism that you want. If it's not, You should find other plugin.

Slick + Shopify theme causing strange behavior

Live site is here: www.wiivv.com
Here's a video of the issue: http://imgur.com/a/JEFne
On mobile, buttons are skipping around when you scroll. I think the issue may have something to do with Slick Carousel.
How would you troubleshoot an issue like this?
Looks like Slick is adjusting the height of your slideshow div according to the device you are using. It doesn't know to adjust the height for your second button.
The height adjustment to the div is usually done via Javascript. You can adjust the JS code to suit your buttons or put some CSS media queries in place to override what the JS is putting on your div.

Make Responsive Svg inside angular-gridster item

I want to make Gridster grid responsive according to grid resize as well as window resize. Currently I am using DC.js to render charts inside the gridster grid, but if the screen resolution changes from bigger to smaller , the value of the item stored previously for the width for svg remain too big for the screen.
Any tips how to make it responsive. How to set the width of gridster item , it looks to me it injected through java-script.
I found out the answer. Angular Gridster have a event "gridster-resized" , whenever this event happens try to resize the items in the gridster.

Issue with Kendo Graph in Printing

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();

KendoUI multiple axis Chart (mixed chart with Bubble and Column chart types)

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

Resources