Articles in this section
Category / Section

How to create responsive Chart using jQuery UI

1 min read

Chart supports the responsive behavior on resizing the browser window. We can also create responsive chart using the jQuery Resizable.

To create responsive chart in jQuery Resizable the below steps are followed

Step1: Create chart along with the required functionalities

 
<ej:Chart ClientIDMode="Static" ID="Chart1" runat="server" >     
</ej:Chart>
 

 

Step2: Add the scripts required for the jQuery UI in the sample

 
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
       //resizable container
<div id="resizable" >
 

 

Step3: In the stop event of the jQuery resizable the height and width of the resized container is set to the chart and it is redrawn

 
 
 $("#resizable").resizable ({
      // stop event of the resizable is triggered
            stop: function (event, ui) {
      // resized container height and width are obtained
               var height = ui.size.height;
                var width = ui.size.width;
                var chart = $("#Chart1").ejChart("instance");
       // chart is redrawn with the resized values
                chart.model.size.width = width.toString();
                chart.model.size.height = height.toString();
                chart.redraw();
                $(".e-input")[0].value = height.toString();
                $(".e-input")[2].value = width.toString();
            }
        });
 

 

The following screenshot displays the Chart resized using the jQuery UI and its height and width are displayed in the textbox

 

The Chart resized using the jQuery UI

Sample link: Sample

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied