0

Are there any open source frameworks to visualize data in mostly Bullet charts/Gantt charts/ Bar charts and line charts. I am using d3.js right now but it is not responsive. Is there any other frameworks which can give me all above charts and also need to be responsive or is there any way to make D3 responsive.

SiddP
  • 1,603
  • 2
  • 14
  • 36
  • One of the first results I got when I googled: "Responsive dynamic chart javascript": http://www.chartjs.org/ – MiltoxBeyond Jan 11 '16 at 07:03
  • Thanks, I need some custom charts as such gantt charts and bullet graphs. Is it possible to create custom charts in chart.js as there are no examples or showcase of those charts. – SiddP Jan 11 '16 at 07:13
  • D3.js charts can be responsive. However, D3 being a low level framework, you need to make it responsive – ocket-san Jan 11 '16 at 08:22
  • Any tip how to make it responsive – SiddP Jan 11 '16 at 09:40

1 Answers1

0

I know 2 ways to make D3 responsive:

1) check the window resize event. Basically, when the window resizes, you delete your charts and you redraw them based on the new dimensions. 

d3.select(window).on("resize",resize);

        function resize() {
            /* resetting the entire visualisation, the svg's and other added elements */
            d3.selectAll("svg").remove();
            d3.selectAll(".graphline").remove();
            d3.select("#namerow").remove();

            *function to redraw everthing*
        }

In your draw function, you can capture the width of the window as following: 

var chartWidth = parseInt(divParentContainer.style("width"),10);
var chartHeight = chartWidth * 0.8; // 0.8 can be seen as width-height ratio

2) check the answer on this page. In my personal opinion, that way is the easiest one.

Community
  • 1
  • 1
ocket-san
  • 874
  • 12
  • 22