Set chart height dynamically based on how much data it contains

[BFY]

Hi,

Is there a way to make the chart change it's size based on how much data is inserted?
For example we have a chart with horizontal bars, and want it to adjust it's size(height) based on how many bars there is to display.

[Dharanidharan Dharmasivam]

Hi Viktor, 

Thanks for contacting Syncfusion support. 

We will calculate the size of axis title, chart title and legend, then with the balance area, chart will get rendered. And depends upon the points length and axis height (bar chart) the height of each point will be calculated. So it is not possible to achieve your requirement exactly.   

However, we have achieved your requirement as an workaround without chart title, axis title and legends. In the sample, in button click we have generated points and bind to chart data source and specified the height dynamically depends upon the length of the data source. In general, when single point is given to chart with height of 100px, then chart area will render 40 pixel with bar size 20 pixel approximately. With respect to this we have prepared a sample. Find the code snippet below. 

ASP.NET: 

  <input type="button" id="1" value="Point 1" onclick="updatePoints(this.id)"/> 

  <input type="button" id="5" value="5 Points" onclick="updatePoints(this.id)" /> 

  <input type="button" id="50" value="50 Points" onclick="updatePoints(this.id)" /> 

  <input type="button" id="100" value="100 Points" onclick="updatePoints(this.id)" /> 

 

function updatePoints(id) { 

          var chart = $("#Chart1").ejChart("instance"), 

      //Get the points depends upon the input 

              data = getData(id), 

              chartArea = 40, 

              chartBounds = 60; 

          chart.model.series = []; 

      

     //Assign points to data source 

          chart.model.series.push({ dataSource: data, xName: "xValue", yName: "yValue" }) 

 

     //Specify the size of chart with respect to length of data source 

          chart.model.size.height = chartBounds + (chartArea * parseInt(id)); 

          chart.redraw(); 

      } 

 

      function getData(count) { 

          var chartPoint = []; 

          for (var i = 1; i <= parseInt(count) ; i++) { 

              var y = Math.random() * 1 + 0; 

              chartPoint.push({ xValue: i, yValue: y }); 

          } 

          return chartPoint 

      } 

In this the chartBounds variable holds the sum of margin and axis labels height. If you render axis title or chart title, you need to sum those height to this variable. 

Screenshot with single point: 

 

Screenshot with 5 points: 

 

Sample for reference can be find from below link. 

http://www.syncfusion.com/downloads/support/forum/130338/ze/chartSample1635839154  

 

Thanks, 

Dharani.