jQuery UI Widgets Forums Chart JQXCHART IN MOBILE

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  athenea 10 years, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • JQXCHART IN MOBILE #27052

    athenea
    Member

    HELLO GOOD! NIGHT!

    HELP ME I HAVE A QUESTION

    I NEED PUT A JQXCHART IN MOBILE VERSION FOR ANDROID AND IOS

    I TRY TO PUT WIDTH:100% AND HEIGTH:100% but not working

    how can i display the jqxchart in mobile?

    some idea?

     

    Its very importan thanks

     

     

    JQXCHART IN MOBILE #27059

    Peter Stoev
    Keymaster

    Hi athenea,

    Here’s a sample which shows how to create a Chart that is with 100% width and height.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
    <title id='Description'>jqxChart Bar Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <style>
    html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function () {
    // prepare chart data
    var sampleData = [
    { Country: 'China', Population: 1347350000, Percent: 19.18},
    { Country: 'India', Population: 1210193422, Percent: 17.22},
    { Country: 'USA', Population: 313912000, Percent: 4.47},
    { Country: 'Indonesia', Population: 237641326, Percent: 3.38},
    { Country: 'Brazil', Population: 192376496, Percent: 2.74}];
    // prepare jqxChart settings
    var settings = {
    title: "Top 5 most populated countries",
    description: "Statistics for 2011",
    showLegend: true,
    enableAnimations: true,
    padding: { left: 20, top: 5, right: 20, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData,
    categoryAxis:
    {
    dataField: 'Country',
    showGridLines: true,
    flip: false
    },
    colorScheme: 'scheme01',
    seriesGroups:
    [
    {
    type: 'column',
    orientation: 'horizontal',
    columnsGapPercent: 100,
    toolTipFormatSettings: { thousandsSeparator: ',' },
    valueAxis:
    {
    flip: true,
    unitInterval: 100000000,
    maxValue: 1500000000,
    displayValueAxis: true,
    description: '',
    formatFunction: function (value) {
    return parseInt(value / 1000000);
    }
    },
    series: [
    { dataField: 'Population', displayText: 'Population (millions)' }
    ]
    }
    ]
    };
    // setup the chart
    $('#jqxChart').jqxChart(settings);
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxChart' style="width:100%; height:100%; position: relative; left: 0px; top: 0px;">
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    JQXCHART IN MOBILE #27138

    athenea
    Member

    Hi thank you for your answer

    I done your example in my apllication

    my code is:

    @model IEnumerable
    @{
    ViewBag.Title = “ChartGrafico”;
    }

    @section grafico
    {

    html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    }

    $(document).ready(function () {
    // prepare the data
    var sampleData = [
    { Country: ‘China’, Population: 1347350000, Percent: 19.18 },
    { Country: ‘India’, Population: 1210193422, Percent: 17.22 },
    { Country: ‘USA’, Population: 313912000, Percent: 4.47 },
    { Country: ‘Indonesia’, Population: 237641326, Percent: 3.38 },
    { Country: ‘Brazil’, Population: 192376496, Percent: 2.74 }];

    // prepare jqxChart settings
    var settings = {
    title: “Top 5 most populated countries”,
    description: “Statistics for 2011″,
    showLegend: true,
    enableAnimations: true,
    padding: { left: 20, top: 5, right: 20, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData,
    categoryAxis:
    {
    dataField: ‘Country’,
    showGridLines: true,
    flip: false
    },
    colorScheme: ‘scheme01’,
    seriesGroups:
    [
    {
    type: ‘column’,
    orientation: ‘horizontal’,
    columnsGapPercent: 100,
    toolTipFormatSettings: { thousandsSeparator: ‘,’ },
    valueAxis:
    {
    flip: true,
    unitInterval: 100000000,
    maxValue: 1500000000,
    displayValueAxis: true,
    description: ”,
    formatFunction: function (value) {
    return parseInt(value / 1000000);
    }
    },
    series: [
    { dataField: ‘Population’, displayText: ‘Population (millions)’ }
    ]
    }
    ]
    };

    // setup the chart
    $(‘#jqxChart’).jqxChart(settings);
    });

    }
    Grafica

    I have used Visual Studio 2012
    and MVC4
    but when I run the aplication the chart didnĀ“t display

    but when i put this line

    work correctly…..

    mmmm

    am i doing bad some????????

    Thank you

    JQXCHART IN MOBILE #27139

    athenea
    Member

    this line

    JQXCHART IN MOBILE #27140

    athenea
    Member

    well jeje when widht:400px and heigth:400px work well

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.