Tagged: ,

This topic contains 2 replies, has 2 voices, and was last updated by  arkgroup 9 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    IPhone style Posts
  • IPhone style #62062

    arkgroup
    Participant

    I need help to fix IPhone styling. Below code works fine in Windows browser and IPAD. For IPhne grid text is too small and graph labels are small as well. I’d like to keep metrodark style.
    How can I fix that?
    Thanks.

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html>
    <head><title></title>
    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link href=”jqwidgets/styles/jqx.metrodark.css” rel=”stylesheet” type=”text/css” />

    <script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxtabs.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdraw.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxchart.core.js”></script>
    <script src=”jqwidgets/jqxscrollview.js” type=”text/javascript”></script>
    <script src=”jqwidgets/jqxtouch.js” type=”text/javascript”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    var source =
    {
    datatype: “csv”,
    datafields: [
    { name: ‘Date’ },
    { name: ‘S&P 500’ },
    { name: ‘NASDAQ’ }
    ],
    url: ‘sampledata/nasdaq_vs_sp500.txt’
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });

    $(“#jqxGrid”).jqxGrid(
    {
    width: ‘100%’,
    height: ‘50%’,
    rowsheight: 34,
    columnsheight: 34,
    source: dataAdapter,
    theme: ‘metrodark’,
    touchmode: true,
    columns: [
    { text: ‘Date’, datafield: ‘Date’, cellsformat: ‘d’, width: 250 },
    { text: ‘S&P 500’, datafield: ‘S&P 500’, width: 150 },
    { text: ‘NASDAQ’, datafield: ‘NASDAQ’ }
    ]
    });

    var source =
    {
    datatype: “csv”,
    datafields: [
    { name: ‘Date’ },
    { name: ‘S&P 500’ },
    { name: ‘NASDAQ’ }
    ],
    url: ‘sampledata/nasdaq_vs_sp500.txt’
    };

    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
    var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];

    // prepare jqxChart settings
    var settings = {
    title: “U.S. Stock Market Index Performance (2011)”,
    description: “NASDAQ Composite compared to S&P 500″,
    enableAnimations: true,
    showBorderLine: false,

    showLegend: true,
    enableCrosshairs: true,
    padding: { left: 10, top: 5, right: 10, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    backgroundColor: ‘Black’,
    source: dataAdapter,

    xAxis:
    {
    textRotationAngle: 90,
    dataField: ‘Date’,
    formatFunction: function (value) {
    return months[value.getMonth()] + ‘\” + value.getFullYear().toString().substring(2);
    },
    toolTipFormatFunction: function (value) {
    return value.getDate() + ‘-‘ + months[value.getMonth()];
    },
    minValue: ’01-01-2011′,
    maxValue: ’01-01-2012’,
    type: ‘date’,
    baseUnit: ‘month’,
    showTickMarks: true,
    tickMarksInterval: 1,
    tickMarksColor: ‘#888888’,
    unitInterval: 1,
    showGridLines: true,
    gridLinesInterval: 1,
    gridLinesColor: ‘#888888’,
    valuesOnTicks: true
    },
    colorScheme: ‘scheme05’,
    seriesGroups:
    [
    {
    type: ‘area’,
    alignEndPointsWithIntervals: true,
    valueAxis:
    {
    unitInterval: 500,
    minValue: 0,
    maxValue: 3000,
    displayValueAxis: true,
    description: ‘Daily Closing Price’,
    //descriptionClass: ‘css-class-name’,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888’
    },
    series: [
    { dataField: ‘NASDAQ’, displayText: ‘NASDAQ’ },
    { dataField: ‘S&P 500’, displayText: ‘S&P 500’ }
    ]
    }
    ]
    };

    $(‘#jqxChart’).jqxChart(settings);

    $(“#jqxGrid”).jqxGrid(‘selectrow’, 0);

    });
    </script>
    <style type=”text/css”>
    .jqx-chart-axis-text, .jqx-chart-label-text, .jqx-chart-legend-text, .jqx-chart-axis-description, .jqx-chart-title-text, .jqx-chart-title-description
    {
    fill: #ffffff;
    color: #ffffff;
    }
    html, body {
    background: #222;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 16px;
    }
    </style>
    </head>
    <body>
    <div style=”border: none; width: 100%; height: 50%” id=”jqxGrid”>
    </div>

    <div id=’jqxChart’ style=”border: none; width: 100%; height: 50%”>
    </div>

    </body>
    </html>

    • This topic was modified 9 years, 7 months ago by  arkgroup.
    IPhone style #62071

    Peter Stoev
    Keymaster

    Hi arkgroup,

    Have you tried by adding tbe below to your page:

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    IPhone style #62113

    arkgroup
    Participant

    Thanks, I forgot meta tag.

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

You must be logged in to reply to this topic.