Question

It seems that the Render method is not supported in DotNet.HighCharts which makes it hard to align multiple charts in the same page.
I am able to populate multiple charts on the same page, but I am not able to align them next to each other. However they will be displayed after each other. Does anyone has an idea how to display 2 charts next to each other? or even 4 charts as a block?

Note: I am using ASP.Net Mvc3.

Answer 1

Why not create a sets of DIVs that will hold one chart DIV container each.
With a layout you decide (side by side or whatever). And then send each chart to the “master” container you want?

Here is some psuedo-code since I am not too familiar with MVC.

Create a table or some other structured container with addressable elements in your display page (aspx, etc). Then add your literal tag for each chart separately inside one of these elements (ie, a table cell). In the codebehind create your individual charts instead of what series of charts.
So something like:

<table>
<cell1>
<asp:literal id="ltrchart1">
</cell1>
<cell2>
<asp:literal id="ltrchart2">
</cell2>
<cell3>
<asp:literal id="ltrchart3">
</cell3>
<cell4>
<asp:literal id="ltrchart4">
</cell4>
</table>

Then in your codebehind do something like:

chart1 as new highcharts("chart1").....
ltrchart1.Text = chart1.ToHtmlString()

chart2 as new highcharts("chart2").....
ltrchart2.Text = chart2.ToHtmlString()

chart3 as new highcharts("chart3").....
ltrchart3.Text = chart3.ToHtmlString()

chart4 as new highcharts("chart4").....
ltrchart4.Text = chart4.ToHtmlString()

This is not pretty but it gets the job done.