0

I am showing up some data using d3 donut chart as shown below, however when I switch to mobile view, chart is not visible properly how can I make it work or make it show entire donut and details in mobile view ?

enter image description here

  var width = $(".chart-time-spent").width(), height = 250, radius = Math.min(width, height) / 2, legendPosY = (height / 2) - 20;
    
            var color = d3.scale.ordinal().range(["#99ecf0", "#1cb5bb", "#10538c", "#75c6f3", "#60d3ff", "#4ec3d7", "#37c2a5", "#8bcb6b"]);
            var API = apiUrl+"getDeviceCounters";


            console.log("deviceController api_> "+API);

            var arc = d3.svg.arc().innerRadius(radius - 20).outerRadius(radius - 60);
            var arcOver = d3.svg.arc().outerRadius(radius - 18).innerRadius(radius - 62);
          
            var pie = d3.layout.pie().sort(null).value(function (d) { return parseInt(d.time); });
           
            
            var svg = $rootScope.getDonutSVG(".chart-time-spent", width, height);
  <div class="col-md-6 col-xs-12 chart-total-users"></div>
nightfury
  • 384
  • 6
  • 18

1 Answers1

0

I assume you're setting the size of your chart once when the page gets rendered.

When setting static values you need to listen to resize to make your chart responsive: https://api.jquery.com/resize/ (Maybe only rerender when resize ends : jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?)

I'm not getting the relation between "chart-time-spent" and your "chart-total-users"

I set up a fiddle having Bootstrap and d3 as well as your base variables:

var width = $(".chart-time-spent").width(),
    height = 250,
    radius = Math.min(width, height) / 2,
    legendPosY = (height / 2) - 20;

https://jsfiddle.net/772n9mrn/6/

If resize does not solve your problem, try to describe it there.

Community
  • 1
  • 1
The_Original
  • 63
  • 8
  • it does not work & my issue is I want to move graph which is on col-xs-12 to move a bit towards left as it is not visible throughout (even when it is supposed to be showing everything perfectly in mobile view). – nightfury May 22 '17 at 11:55
  • "I'm not getting the relation between "chart-time-spent" and your "chart-total-users" they are not related, those are names of 2 donut chart being shown – nightfury May 23 '17 at 03:34