jQWidgets Forums
jQuery UI Widgets › Forums › Chart › Line Chart mobile issues
Tagged: charting
This topic contains 3 replies, has 2 voices, and was last updated by LeoSquall 11 years ago.
-
AuthorLine Chart mobile issues Posts
-
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
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 StoevjQWidgets Team
http://www.jqwidgets.comHi,
thanks for the fast answer. I’ll hope to see a solution for the size’s symbols in the next version.Best Regards
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
-
AuthorPosts
You must be logged in to reply to this topic.