I am trying to put two charts, 320px width each, inside a Window and have them beside each other like in the screen shot.
Putting the charts into <div>s set at that width with a float doesn't work, the charts end up still stacked on top of each other:
Putting the charts into <div>s set at that width with a float doesn't work, the charts end up still stacked on top of each other:
Html.Kendo().Window()
.Name(windowId)
.Width(650)
.Title(Model.ChartTitle)
.Content(@<
text
>
<
div
style
=
"width: 320px;"
>
CHART
</
div
>
<
div
style
=
"width: 320px; float:right"
>
CHART
</
div
>
3 Answers, 1 is accepted
0
Hello Ian,
Also you should remove the default padding which is set to the div.k-window-content element. I.e.:
Regards,
Iliana Nikolova
Telerik
In order to achieve this you could set display: inline-block to the charts' parents divs. For example:
<
div
style
=
"width: 320px; display: inline-block;"
>
CHART
</
div
>
<
div
style
=
"width: 320px; display: inline-block;"
>
CHART
</
div
>
<style>
div.k-window-content{
padding
:
0
;
}
</style>
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Ian
Top achievements
Rank 2
answered on 22 Jul 2013, 04:48 PM
Hi Lliana,
Thank you, but I am sorry but that solution doesn't work even with extra space for the charts.
See the attached image, you can verify that the charts overlap and are not sized correctly.
Here's my full code for your reference:
Thank you, but I am sorry but that solution doesn't work even with extra space for the charts.
See the attached image, you can verify that the charts overlap and are not sized correctly.
Here's my full code for your reference:
//Add the Popup window
Html.Kendo().Window()
.Name(windowId)
.Width(660)
.Height(430)
.Title(Model.ChartTitle)
.Content(@<
text
>
<
div
style
=
"width: 290px; height:290px; display: inline-block;"
>
@{
Html.Kendo().Chart<
AccountPerformance
>(Model.Results)
.Name("chartMKT")
.Title("Market Value")
.Legend(legend => legend.Visible(false))
.Series(series =>
series.Line(model => model.Metrics.MarketValue)
.Name(Model.ColumnTitle)
.Labels(false)
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:C0}")))
.CategoryAxis(axis => axis
.Categories(model => model.Observation)
.Labels(labels => { labels.Format("MMM d"); })
)
.SeriesDefaults(builder => builder.Line().Color("#005984"))
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:C}")
.Color("white")
.Background("black")
.Template("#= value #")
)
.Render();
}
</
div
>
<
div
style
=
"width: 290px; height:290px; display: inline-block;"
>
@{
Html.Kendo().Chart<
AccountPerformance
>(Model.Results)
.Name("chartPCT")
.Title("% Return")
.Legend(legend => legend.Visible(false))
.Series(series =>
series.Column(model => model.Metrics.Return)
.Name(Model.ColumnTitle)
.Labels(false)
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0}%")))
.CategoryAxis(axis => axis
.Categories(model => model.Observation)
.Labels(labels =>
{
labels.Format("MMM");
}))
.SeriesDefaults(builder => builder.Column().NegativeColor("#BE2D55").Color("#C0BD7F"))
.Tooltip(tooltip => tooltip
.Visible(true)
.Color("white")
.Background("black")
.Format("{0:P2}")
.Template("#= value #")
)
.Render();
}
</
div
>
</
text
>)
.Visible(false)
.Modal(true)
.Draggable(true)
.Animation(animation => { animation.Open(open => { open.Fade(FadeDirection.In); }); })
.Render();
0
Accepted

Ian
Top achievements
Rank 2
answered on 22 Jul 2013, 05:50 PM
I found a solution. The surrounding DIVs needed to be referenced in a seperate style sheet. (No idea why)
Instead of inline CSS, I used this and it's working great now:
Instead of inline CSS, I used this and it's working great now:
/* Remove default window padding to hold the charts better */
div.k-window-content{
padding: 0;
}
.k-chart {
width: 320px;
}
#divChartLeft
{
float:left; padding-left:15px;
}
#divChartRight {
float:right; padding-right:15px;
}
</
style
>