CODEWITHSUNDEEP
javascriptjqueryjquery-mobilecordovahighcharts
teekib
teekib

Reputation: 2821

Highcharts unable to fit it to mobile screen size

Hi im my jquery mobile + phonegap app i am using spider chart to display my sales, but i am finding hard time to make it fit in to my mobile screen. tried as below

 <table >
    <tr id="chartRow">
        <td style="width:50%;">
            <div id="container"></div>
        </td>
        <td style="width:50%;">

        </td>
    </tr>
</table>

javascript:

<script type="text/javascript">
$(function () {

    $('#container').highcharts({

        chart: {
            reflow: false,
            polar: true,
             renderTo: 'container',

            type: 'line'
        },

        title: {
            text: '',
            x: -80
        },

        pane: {
            size: '50%'
        },

        xAxis: {
            categories: ['Aligt', 'Reach', 'ment', 'Acqa', 
                    'Adv', 'Gover'],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },

        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },

        tooltip: {
            shared: true,
            pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
        },

        legend: {
             layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
        },

        series: [{
            name: 'Max Score',
            data: [25,25,25,25,25,25],
            pointPlacement: 'on'
        }, {
            name: 'Organization Score',
            data: [30,20,15,25,10,0],
            pointPlacement: 'on'
        }]

    });

    $(window).resize(function() {
    height = chart.height
    width = $("#chartRow").width() / 2
    chart.setSize(width, height, doAnimation = true);
});


});

</script>

tried to resize the window but itz not working..can someone please let me know how can i achieve this.

Upvotes: 0

Views: 596

Answers (1)

wergeld
wergeld

Reputation: 14442

Made a jsFiddle from that code. You have a syntax error where you are setting height/width:

$(window).resize(function() {
    height = chart.height
    width = $("#chartRow").width() / 2
    chart.setSize(width, height, doAnimation = true);
});

You need ; after the height and width settings.

More importantly - you never tell it what chart is. To do this you need to setup the var:

var chart = $("#container").highcharts();

Now it does re-sizing but without knowing the expected outcome I cannot tell if it is re-sizing correctly.

Upvotes: 1

Related Questions