2 charts, side by side in a Window

4 posts, 1 answers
  1. Ian
    Ian avatar
    73 posts
    Member since:
    Jun 2013

    Posted 19 Jul 2013 Link to this post

    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>
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 22 Jul 2013 Link to this post

    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!
  3. Ian
    Ian avatar
    73 posts
    Member since:
    Jun 2013

    Posted 22 Jul 2013 Link to this post

    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();
  4. Answer
    Ian
    Ian avatar
    73 posts
    Member since:
    Jun 2013

    Posted 22 Jul 2013 Link to this post

    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>
Back to Top