This is a migrated thread and some comments may be shown as answers.

2 charts, side by side in a Window

3 Answers 875 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 2
Ian asked on 19 Jul 2013, 09:57 PM
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:

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

Sort by
0
Iliana Dyankova
Telerik team
answered on 22 Jul 2013, 12:54 PM
Hello Ian,

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>
Also you should remove the default padding which is set to the div.k-window-content element. I.e.: 
<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:

//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:

/* 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>
Tags
Charts
Asked by
Ian
Top achievements
Rank 2
Answers by
Iliana Dyankova
Telerik team
Ian
Top achievements
Rank 2
Share this question
or