How to define the size of graph in jqPlot

Question

I am using jqPlot to render a graph on a page.

I am following this link. http://www.jqplot.com/tests/bar-charts.php

The data point that I give to the graph are dynamic. so sometime the size of the graph is different. Is there a way/or able to set property for jqPlot?

To be precise, the question is how to set the height and width of graph so that every time I get new data the size of the graph and size of labels are always same. An example with jsFiddle would help everyone including myself.

Answer 1

You can fix the size by configuring the height and width:

$.jqplot('chartdiv', [data],
{
    height: 400,
    width: 400,
    ...

You also need to give the height and width to the target div:

<div id="chartdiv" style="height:500px; width:500px;"></div>

Answer 2

if you specify the height and width for div, then it has preference over the height and width specified inside the option for JqPlot.

Answer 3

Try this: (its inline CSS)...

<div id="chart1" style="height:400px;width:300px; "></div>

*div id ( chart1 ) must be same like the jqPlot JS File.

plot1 = $.jqplot("chart1", [DATA]

You can change the height and width as per your requirements.

Answer 4

While the other answers are correct that you can specify the height and width of the surrounding div, it's best to do this separately in CSS (which jqPlot also allows). You future self will thank you for the lack of mess and better maintainability.

HTML:

<div id="chartdiv"></div>

CSS:

#chartdiv {
    height: 400px;
    width: 300px;
}