Question

I’m using Dojo’s (1.7.3) chart component (dojox.charting.chart) inside an HTML table (and I cannot change this because it’s a kind of template provided by someone else where I have to put charts at unknown locations).

Actually (simplified) HTML code may look like this:

<table class="fit-parent">
 <tbody>
  <tr>
   <td>
    <div id="chart123" class="full-size-chart"></div>
   </td>
  </tr>
 </tbody>
</table>

And its CSS is something like this (consider full-size-chart equivalent to fit-parent):

.fit-parent
{
 width: 100%;
 height: 100%;
}

Code to create the chart:

<script type="text/javascript">
    require([
            "dojox/charting/Chart",
            "dojox/charting/themes/MiamiNice",
            "dojox/charting/plot2d/Columns",
            "dojo/domReady!"
        ],
        function (Chart, theme, ChartType) {
            var chart = new Chart("chart123");

            chart.setTheme(theme);

            chart.addPlot("default", {
                type: ChartType
            });

            chart.addSeries("Series name", chartData);

            chart.render();
        }
    );
</script>

Rendered table is inserted inside others Dojo containers (BorderContainer and ContentPane) with both a header and an edge panel. Site is made with ASP.NET MVC3 and above code is inside one view page, main layout is inside _Layout.cshtml page.

The problem is that the chart size is not correct, it’s bigger than the size of the page and scrolls appear. Ideally the table should fit the content box and resize with the window size.

The green box is the table (2 rows in this example). The chart should fill the entire row (because of 100% width and height), table layout is right (it fills the “document area” and everything else is fine). Wrong with my code/layout? Please remember I can change HTML (and use CSS classes) but I can’t ask them to use CSS float/positions directly or to “imagine” final layout with CSS (probably they use a simple HTML editor or notepad).

Answer 1

Chart doesn’t support CSS-set sizes, nor sizes in percents. You should specify a chart size either directly on its node in pixels before creating, or during creating as 2nd and 3rd parameters. If you want to support a fluid layout, use a simple JavaScript tracking code for that and resize chart accordingly when needed.