how to create Multiple Charts on page

[ASK123]

Hi,
I want to make my webpage responsive. I have added <meta name=”viewport” content=”width=device-width, initial-scale=1″>

It doesn’t resize the chart container when size of the window is changed.
Is there something else I could do such that the canvas window resizes according to the width of the window ?

I also wanted to know if it is possible to have a dropdown menu from which the graphs can be displayed ?

[Sunil Urs]

Chart should ideally resize itself to fill the container whenever window resizes. But if the container itself is not resizing, then chart won’t resize either.

I also wanted to know if it is possible to have a dropdown menu from which the graphs can be displayed ?

Here is an example.

[ASK123]

This is how it looks when resized; the chart container is not resizing. How do i fix it ?

[Vishwas R]

We are unable to know the issue just by looking at the screenshots, it would help us resolve issue if we look into the code. Can you please create a jsfiddle, so that we can look into it and help you out?

[ASK123]

File

I want the entire chart container to fit to the browser screen size when resized. (Responsive/Adaptive web design)

[Sanjoy]

Hi,

In your code in line 83, 151, 220, 289, 358, 427, 496 you have set the width property to 600 (px). Removing these lines helps in resizing the chart.

[Anne]

The tool tip for the second column chart shows at up the corresponding position of the first column. Is there any way to correct this?

[Vishwas R]

Anne,

As toolTip is a DOM element, CSS you use over the div will be applied to that aswell. You can use display: inline-block; and it works fine.

Check this page for tutorial on how to render multiple charts in a page.

[Anne]

Vishwas,

Thanks.. That was exactly what I was looking for!