locked
Resize canvas based on screen resolution.

    Question

  • Hi,

    I have a canvas element that displays pie chart. When there is change in screen resolution I want to resize the canvas accordingly(If screen resolution is higher a bigger pie chart and smaller a small one ).

    I guess it is required to re-draw the entire graph with new dimensions.If so could some one help me on this.

    Do suggest if any other alternative that helps..


    Thanks & Regards Tejaswi Chandrapatla

    Thursday, November 28, 2013 10:49 AM

Answers

  • Hi Teja510,

    Try the following code, should help with the scaling stuff.

    <style>
        #vb{
           transform: scale(0.5);
        }
    </style>
    
    
    <div id="vb" data-win-control="WinJS.UI.ViewBox" >
        <canvas id="dougnutchart" class="doughtnutclass"></canvas>
    </div>
    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, November 29, 2013 8:16 AM
    Moderator

All replies

  • Hi Teja510,

    Put your control into ViewBox and it will automatically scale for you instead of re-draw the entire graph.

    And take a look at this documentation: Quickstart: Defining app layouts, will help you create a adaptive layout for your WinJS app.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, November 29, 2013 1:46 AM
    Moderator
  • Thanks Jamles Hez.

    Below is how I tried placing the WInJS.UI.ViewBox. But I could not find any difference.

     <div class="graphdisplayer">
    
                        <div id="graphdisplayer" style="-ms-grid-row:1;-ms-grid-column:1;margin-left:30px;">
    
                        </div>
                       
    
                        <div data-win-bind="WinJS.UI.ViewBox">
                            <div style="-ms-grid-row:2;-ms-grid-column:1;margin-left:40%; width:80%;height:80%">
    
                                <canvas id="dougnutchart" class="doughtnutclass"></canvas>
    
                            </div>
                        </div>
                    </div>
    Here is how Im setting height and width of canvas in JS and assigning it to chart plotter.
    var canvas = document.getElementById('dougnutchart');
            canvas.width = 600;
            canvas.height = 500;
    
    var datapoints = [];
            var labels = new Array();
            var colors = new Array();
    
            for (var item = 0; item < chartdata.length; item++) {
                datapoints.push(parseInt(chartdata.getItem(item).data.contentcount));
    
    
                labels[item] = new String(chartdata.getItem(item).data.contentname).substr(0, 20);
    
                colors[item] = new String(chartdata.getItem(item).data.colorcode);
    
    
            }
    
    
            var dougnutchart = new AwesomeChart('dougnutchart');
     dougnutchart.data = datapoints;
    dougnutchart.colors = colors;
            dougnutchart.randomColors = true;
            dougnutchart.animate = true;
            dougnutchart.draw();
    If possible could you provide me a sample for the same, any ways all the places Im seeing it for text but not charts.


    Thanks & Regards Tejaswi Chandrapatla


    • Edited by Teja510 Friday, November 29, 2013 5:55 AM
    Friday, November 29, 2013 5:54 AM
  • Hi Teja510,

    Try the following code, should help with the scaling stuff.

    <style>
        #vb{
           transform: scale(0.5);
        }
    </style>
    
    
    <div id="vb" data-win-control="WinJS.UI.ViewBox" >
        <canvas id="dougnutchart" class="doughtnutclass"></canvas>
    </div>
    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, November 29, 2013 8:16 AM
    Moderator