How to define the size of graph in jqPlot

jquery asp.net-mvc jqplot
VolleyBall Player picture VolleyBall Player · Jul 31, 2013 · Viewed 15.2k times · Source

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

zs2020 picture zs2020 · Jul 31, 2013

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>

Related questions

JQuery - $ is not defined

I have a simple jquery click event <script type="text/javascript"> $(function() { $('#post').click(function() { alert("test"); }); }); </script> and a jquery reference defined in the site.master <script src="<%=ResolveUrl("~/Scripts/jquery-1.3.2.js")%&…

Read More
Send JSON data via POST (ajax) and receive json response from Controller (MVC)

I created a function in javascript like that: function addNewManufacturer() { var name = $("#id-manuf-name").val(); var address = $("#id-manuf-address").val(); var phone = $("#id-manuf-phone").val(); var sendInfo = { Name: name, Address: address, Phone: phone }; $.ajax({ type: "POST", url: "/Home/Add", dataType: "json", success: function (…

Read More
Passing data to a bootstrap modal

I've got a couple of hyperlinks that each have an ID attached. When I click on this link, I want to open a modal ( http://twitter.github.com/bootstrap/javascript.html#modals ), and pass this ID to the modal. I …

Read More