Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Chart > Chart is being squeezed

Not answered Chart is being squeezed

Feed from this thread
  • Max avatar

    Posted on Feb 17, 2012 (permalink)

    Hi all
    I have a View which display a Chart and it works great if I have a few rows but once I try to display around 30 rows, for instance, I would need to display a Bar Chart with 30 dates vertical line and 3 categories on horizontal line, everything gets squeezed.
    Here is my code:

    @(Html.Telerik().Chart(Model)
        .Name("chartTop")
        .Title(title => title.Text("Test").Visible(ViewBag.ShowTitle))
        .Legend(legend => legend.Position(ViewBag.LegendPosition).Visible(ViewBag.ShowLegend))
     
        .SeriesDefaults(series =>
        {
            series.Bar().Stack(ViewBag.Stack);
            series.Column().Stack(ViewBag.Stack);
            series.Line().Stack(ViewBag.Stack);
        })   
         
        .Series(series =>
        {
            if (ViewBag.SeriesType == "bar")
            {
                series.Bar(s => s.Targets).Name("Target")
                    .Labels(labels => labels.Position(ViewBag.NumberBarColumnPosition).Font("12px Arial, sans-serif").Visible(true));
                series.Bar(s => s.Failed).Name("Failed").Labels(true)
                    .Labels(labels => labels.Position(ViewBag.NumberBarColumnPosition).Font("12px Arial, sans-serif").Visible(true));
                series.Bar(s => s.PowerOn).Name("Success").Labels(true)
                    .Labels(labels => labels.Position(ViewBag.NumberBarColumnPosition).Font("12px Arial, sans-serif").Visible(true));
            }
            else if (ViewBag.SeriesType == "column")
            {
            //ommited for brevity
            }
            else //Line chart
            {
            //ommited for brevity
            }       
     
        })
        .CategoryAxis(axis =>
            {
                axis.Categories(s => s.UpgradeDate);
                //axis.Labels(l => l.Rotation(90));
            })              
        .Tooltip(tooltip => tooltip.Visible(true))   
         
        .HtmlAttributes(new { style = "width: 600px; height: 2000px;" })
        //.HtmlAttributes(new { style = "width:100%; height:100%;" }) 
    )

    Any ideas?
    Thank you

    Attached files

    Reply

  • Max avatar

    Posted on Feb 17, 2012 (permalink)

    Almost fixed! Some more info...
    I display 30 days in my axis and one solution I found was the following:
    .CategoryAxis(axis =>
    {
    axis.Categories(s => s.UpgradeDate);
    axis.Labels(l => l.Rotation(50));
    })
    That works great for Columns, however when I change it to Bars the dates move to the vertical line (which is the normal behaviour) and they are all crunched. I still have plenty of room in the screen, not sure why the space between the dates are not streched or why the height of the chart is not extended giving more space among the data grid lines.

    If you could shed some light here I'd appreciate it.

    Thank you

    Reply

  • Tsvetomir Tsonev Tsvetomir Tsonev admin's avatar

    Posted on Feb 20, 2012 (permalink)

    Hi,

    Please see my reply to you in this forum thread.

    Regards,
    Tsvetomir Tsonev
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

    Reply

  • Max avatar

    Posted on Feb 20, 2012 (permalink)

    Yep, that changed the way the dates are displayed a bit but does not fix the issue.
    Here is a screen shot... Bear in mind, all I need is to increase the height of each grid (the area portion highlighed in read!.
    --Thanks for your reply! Love the work you all do.

    Attached files

    Reply

  • Max avatar

    Posted on Feb 20, 2012 (permalink)

    nevermind....increasing the height actually helped a lot!
    //.HtmlAttributes(new { style = "width:100%; height:100%;" }) 
    .HtmlAttributes(new { style = "width:100%; height:700px;" })

    Not sure why it would not take 100% but 700px fixed the issue :)

    Thank you

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Chart > Chart is being squeezed
Related resources for "Chart is being squeezed"

ASP.NET MVC Chart Features  |  Documentation  |  Demos  |  Telerik TV ]