jQWidgets Forums

jQuery UI Widgets Forums Chart Line Chart mobile issues

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  LeoSquall 11 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Line Chart mobile issues #57204

    LeoSquall
    Participant

    Hi,
    I have a question about Line Chart, i create a line chart and i use the tag ” symbolType=”circle” ” in the method series. I want to increase the size of symbols because is too difficult to touch it with the mobile device like smartphone and ipad. For visualize the value i use a clickEvent and I print it at the bottom of the Chart. First question: Is possible increase the size of symbols?
    Second question: Can i enable the touch in the chart when i use a mobile device? If yes, how can i do it?

    this is the script of a chart:

    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘Mese’ },
    { name: ‘GammaUfficio’ },
    { name: ‘Concorrenza’ }
    ],
    url: ‘Dashboard/GetParcoMacc’
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
    // setto i parametri del grafico
    var settings = {
    title: “Numero Parco Macchine”,
    description: “MIF”,
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 11, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    xAxis:
    {
    dataField: ‘Mese’,
    unitInterval: 1,
    showGridLines: true,
    valuesOnTicks: false,
    //con il seguente codice inserisco un range di valori ed uno schema che mi permetta di gestirlo sul grafico
    rangeSelector: {
    serieType: ‘area’,
    padding: { left: 0, right: 0, top: 0, bottom: 0 },
    // il metodo renderTo serve per inserire lo schema di gestione del periodo in un div separato dal grafico
    renderTo: $(‘#RangeChart1’),
    backgroundColor: ‘white’,
    size: 70,
    showGridLines: false
    }

    },
    seriesGroups:
    [
    {
    type: ‘line’,
    valueAxis:
    {
    unitInterval: 1,
    displayValueAxis: true,
    description: ‘Numero Macchine’,
    tickMarksColor: ‘#888888’
    },
    //———–
    click: myEventHandler,
    //———–
    series: [
    { dataField: ‘GammaUfficio’, displayText: ‘Gamma Ufficio’, color: ‘#383838’, lineColor: ‘#383838’, symbolType: ‘square’, showToolTips: false },
    { dataField: ‘Concorrenza’, displayText: ‘Concorrenza’, color: ‘#ED1C24’, lineColor: ‘#ED1C24’, symbolType: ‘square’, showToolTips: false }
    ]
    }
    ]
    };
    //creazione evento per visualizzazione dati
    function myEventHandler(e) {
    var eventData = ‘ ‘ + e.serie.dataField + ‘ device: ‘ + e.elementValue;
    $(‘#eventTextLine1’).html(eventData);
    };
    //—————————————
    // Setup del grafico
    $(‘#Row1Chart1’).jqxChart(settings);
    });
    </script>

    Best Regards

    Line Chart mobile issues #57219

    Peter Stoev
    Keymaster

    Hi LeoSquall,

    – Touch events work on mobile devices, but it is very hard to touch a small line on a small screen. However, tooltips are positioned correctly when that happens.
    – There’s currently no available setting for increasing the symbol’s size.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Line Chart mobile issues #57229

    LeoSquall
    Participant

    Hi,
    thanks for the fast answer. I’ll hope to see a solution for the size’s symbols in the next version.

    Best Regards

    Line Chart mobile issues #57237

    LeoSquall
    Participant

    Hi,
    I have a last question. Can I enable the scroll on the chart when i use my ipad or smartphone? Because when i try to scroll the page and I touch the chart with my finger the page don’t scroll. If is it possible can you tell me how to do it please?

    Best Regards

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

You must be logged in to reply to this topic.