samedi 27 juin 2015

Setting up a Spline chart size and the image size inside the chart flexible with the browser window size

I have created a Spline chart using DevExpress controls. I want the full chart to make flexible using JS and JQuery. The problem is if I am setting up the size of the chart using JQuery and css, like using below code, the image is getting blur.

$('#myChart_IMG').css('height', $(window).height()).css('width', $(window).width());

And if I am setting the chart size using devexpress code for sizing, then it is not becoming flexible. Like the below code.

settings.Width = 1366;
settings.Height = 763; 

What can be the solution? Below is my full code.

<style type="text/css">
    body, html {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
</style>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#myChart_IMG').css('height', $(window).height()).css('width', $(window).width());
    })
</script>
@Html.DevExpress().Chart(settings =>
{
    settings.Name = "myChart";
    settings.Width = 1366;
    settings.Height = 763;
    Series chartSeries1 = new Series("My Data", DevExpress.XtraCharts.ViewType.Spline);
    chartSeries1.ArgumentDataMember = "X";
    chartSeries1.ValueDataMembers[0] = "Y";
    Series chartSeries2 = new Series("My Chart", DevExpress.XtraCharts.ViewType.Spline);
    chartSeries2.ArgumentDataMember = "X";
    chartSeries2.ValueDataMembers[0] = "Z";
    settings.Series.Add(chartSeries2);
    settings.Series.Add(chartSeries1);
}).Bind(Model).GetHtml()

Aucun commentaire:

Enregistrer un commentaire