amCharts support forum

denebj · #1 2012-08-10 11:55:42

Hello guys :)

I am running on a slight issue on the ipad.

I am trying to have
=> Zoom or no zoom
=> Always be able to roll over an event (click on a bubble and see the display the content)
=> Be able to slide on the graph an see the values when sliding with the finger

Since I cannot have all of that in one shot I let the customer choose :

1) Zoom : YES RollOver on event click: NO Pan Sliding finger: NO

=>          //For tablet - Activate zoom feature
   function setZoom(){
      this.chartData.chartCursorSettings.pan = true;
      this.chartData.chartCursorSettings.zoomable = true;
      this.chartData.validateNow();
      this.chartData.zoomOut();
   }

1) Zoom : NO RollOver on event click: YES Pan Sliding finger: NO

=>    //For tablet - Activate the click on event to show details
   function setEvents(){
      this.chartData.chartCursorSettings.pan = false;
      this.chartData.chartCursorSettings.zoomable = false;
      this.chartData.validateNow();
      this.chartData.zoomOut();
   }

1) Zoom : NO RollOver on event click: NO Pan Sliding finger: YES

   //For tablet - Activate the smooth data scrolling
=>    function setPan(){

      this.chartData.chartCursorSettings.pan = true;
      this.chartData.chartCursorSettings.zoomable = false;
      this.chartData.validateNow();
      this.chartData.zoomOut();
   }

So nothing really complicated, except that it does not work :-/
By default I have the zoom feature enable, and when try to select the setPan option it does not work.

Thanks for the help :)

martynasma · #2 2012-08-13 04:06:38

Shouldn't you be calling methods on "chart" object, not chartData? Or are you storing chart object in "chartData" variable?

denebj · #3 2012-08-13 09:28:16

Hello qemm :)
Yes it is a global object of type = > new AmCharts.AmStockChart();

martynasma · #4 2012-08-14 06:47:42

Do you get any JavaScript errors? You can enable error console in iPad's Safari settings.

denebj · #5 2012-08-14 10:00:30

Unfortunatly no error is being displayed :-/ That's the first thing I thought of !

martynasma · #6 2012-08-15 10:20:35

Does the chart work as expected on regular browser like Chrome?

denebj · #7 2012-08-15 10:42:15

Not really, when for example I select SetEvent in chrome after the loading it is working (no more zoom), but after if select SetZoom, I am ending up with that (the cursor) and no zoom capability:

I am wondering if it is because of the pan property. When I comment the pan changes , it is working properly on chrome.
But I need that property for the tablet :)

Last edited by denebj (2012-08-15 10:45:02)

martynasma · #8 2012-08-15 10:48:53

Could you please post your data and code so we can test directly on your setup? That would help us greatly.

denebj · #9 2012-08-15 11:40:28

Code:

 function startChart() {
                    
                    try{
                        this.createChart();        
                        this.parseData("date,TEST,TEST1#01-17-2012 08:10:00:000,10,100#01-17-2012 08:10:00:125,500,5000#01-17-2012 08:10:00:250,1000,1#01-17-2012 08:10:00:500,375,35#01-17-2012 08:10:00:500,2000,40#01-17-2012 08:10:00:625,5000,40#01-17-2012 08:10:00:750,100,75#01-17-2012 08:10:00:875,5000,30#01-17-2012 08:10:01:000,10000,0");    
                        this.createScrollBar();
                        this.setchartheight("chartclass",this.chartData.panels.length);
                        this.chartData.write("dataChartData"); 
                    }
                    catch(err)
                    {
                        errorJSF();
                    }
                }



  var chartTimeline;
            var chartData;
            var lineColors = [ "#3A81EC" ,"#FF0000", "#FF6A00", "#FFD800", "#4CFF00" , "#0026FF", "#808080", "#000000", "#007F0E"   , "#FFAD84", "#D7FF87"]; 
            var allPageTags = new Array();

            //Dynamically set the height of the charts depending of the number of parameters
            function setchartheight(theClass,size) {
                var divWidth = document.getElementById("dataChartData").offsetWidth;
                var currWidth = parseInt(divWidth);
                var numberParam = parseInt(size);
                if(numberParam == 1)
                {
                    numberParam = 0;
                }
                var newHeight = (currWidth *3 /4) + numberParam*150 +"px";
                var allPageTags=document.getElementsByTagName("*");
                
                    for (var i=0; i<allPageTags.length; i++) {
                        if (allPageTags[i].className==theClass) 
                        {
                            allPageTags[i].style.height=newHeight;
                        }
                    }
                }
            
            //Parse string date to Date format (xx-xx-xx yy:yy:yy:yy) 
            function parseDate(dateString) {

                var dateDateAndTime = dateString.split(" ");
                var dateArray = dateDateAndTime[0].split("-");
                var timeArray = dateDateAndTime[1].split(":");

                var date = new Date(Number(dateArray[2]), Number(dateArray[0]) - 1,
                        Number(dateArray[1]), Number(timeArray[0]), Number(timeArray[1]),
                        Number(timeArray[2]), Number(timeArray[3]));
                return date;
            }

            //Parses CSV data and set chart values
            function parseData(data) {
                  
                chartData.dataSets=[];
                chartData.panels = [] ;
                
                //replace UNIX new line
                data = data.replace(/\r\n/g, "\n");
                //replace MAC new lines
                data = data.replace(/\r/g, "\n");
                //split into rows
                var rows = data.split("#");

                var dataSet = new AmCharts.DataSet();
                dataSet.categoryField = "date";
                
                var dataProvider = [];
                var dataObject={} ;
                
                // loop through all rows
                for ( var i = 1; i < rows.length - 1; i++) {
                    var column = rows[i].split(",");
                    var date = this.parseDate(column[0]);
                
                    dataObject = "{date: \"" +date.getTime() + "\"";

                    for ( var j = 1; j < column.length; j++) {
                        var headerName = new String(rows[0].split(",")[j]);
                        var value1 = column[j];

                        if(value1 != "")
                        {
                            dataObject+=  " , " + "\"" + headerName + "\" : \"" + value1 +"\"" ;
                        }
                    }    
                    
                    dataObject+= "}";
                    eval("dataProvider.push(" + dataObject + ");");
                    dataProvider[i-1].date = new Date(parseInt(dataProvider[i-1].date));     
                }
                    
                var map = [];
                
                for (var i = 1; i < rows[0].split(",").length; i++) {
                    
                    var name =  rows[0].split(",")[i];
                    
                    //Create Mapping
                    var item = "{fromField: \"" +name + "\", toField: \"" + name  + "\"}";
                    eval("map.push(" + item + ");");
                    
                    

                        //Create panel for a graph
                        var stockPanel = new AmCharts.StockPanel();
                        stockPanel.panEventsEnabled = true;    
                        stockPanel.title = paramName;
                    
                        var graph = new AmCharts.StockGraph();
                        graph.type = "line";
                        graph.fillAlphas = 0; 
                        graph.connect = true; 
                        graph.lineColor =lineColors[i-1];
                        graph.useDataSetColors = false;
                        graph.lineThickness = 1;
                        graph.showBalloon = true;
                        graph.bullet="square";
                        graph.bulletSize=2;
                        graph.valueField = name ;
                        
                        stockPanel.addStockGraph(graph);

                        var legend = new AmCharts.StockLegend();
                        legend.markerType = "none";
                        legend.markerSize = 0;
                                                
                        stockPanel.stockLegend = legend;

                        chartData.addPanel(stockPanel);
                    
                   
                }
                
                dataSet.fieldMappings = map;
                dataSet.dataProvider = dataProvider;                    
                chartData.dataSets = [dataSet];
                chartData.mainDataSet  = dataSet;
            }




function createScrollBar()
{
    //Chart Scrollbar Settings
    var chartScrollbarSettings = new AmCharts.ChartScrollbarSettings();
    chartScrollbarSettings.graph =this.chartData.panels[0].stockGraphs[0];
    chartScrollbarSettings.graphType = "smoothedLine";
    chartScrollbarSettings.autoGridCount = true;
    chartScrollbarSettings.graphLineColor = "#3a81ec";
    chartScrollbarSettings.graphFillColor = "#AFDCFF";
    chartScrollbarSettings.graphLineAlpha= 1;
    chartScrollbarSettings.selectedGraphFillColor="#91BEF5";
    chartScrollbarSettings.backgroundAlpha = 0.3;
    chartScrollbarSettings.height=70;
    this.chartData.chartScrollbarSettings = chartScrollbarSettings;
    
}


// method which creates chart
function createChart() {

    //AmStockChart
    this.chartData = new AmCharts.AmStockChart();
    this.chartData.pathToImages = "/charts/stock/images/";
    this.chartData.panEventsEnabled = true;
    this.chartData.zoomOutOnDataSetChange = true;
    
    //Panel Settings
    var panelsSettings = new AmCharts.PanelsSettings();
    panelsSettings.panEventsEnabled = true;
    panelsSettings.startAlpha = 0.5;
    this.chartData.panelsSettings = panelsSettings;
    
    //Category Axes Settings
    var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
    categoryAxesSettings.dashLength = 5;
    categoryAxesSettings.minPeriod = "fff";
    categoryAxesSettings.equalSpacing = true;
    categoryAxesSettings.axisAlpha = 1;
    categoryAxesSettings.axisColor = "#2d66bb";
    categoryAxesSettings.color= "#2d66bb";
    categoryAxesSettings.autoGridCount = true;
    categoryAxesSettings.maxSeries = 0;
    this.chartData.categoryAxesSettings = categoryAxesSettings;

    //Value Axes Settings
    var valueAxesSettings = new AmCharts.ValueAxesSettings();
    valueAxesSettings.axisColor = "#2d66bb";
    valueAxesSettings.gridAlpha = 0;
    valueAxesSettings.fillColor = "#2d66bb";
    valueAxesSettings.fillAlpha = 0.2;
    valueAxesSettings.dashLength = 3;
    this.chartData.valueAxesSettings = valueAxesSettings;
    
    //Chart Cursor Settings
    var chartCursorSettings = new AmCharts.ChartCursorSettings();
    chartCursorSettings.valueBalloonsEnabled = true;
    chartCursorSettings.bulletsEnabled = true;
    chartCursorSettings.categoryBalloonDateFormats = [{period:"fff", format:"JJ:NN:SS:fff"}];
    this.chartData.chartCursorSettings = chartCursorSettings;

    //Period Selector
    var periodSelector = new AmCharts.PeriodSelector();
    periodSelector.dateFormat="HH:NN:SS:QQQ";
    periodSelector.periods = [ {
        period : "mm",
        selected : true,
        count : 3,
        label : "3 Min"
    }, {
        period : "mm",
        count : 10,
        label : "10 Min"
    }, {
        period : "HH",
        count : 1,
        label : "1 Hour"
    }, {
        period : "MAX",
        label : "MAX"
    } ];
    this.chartData.periodSelector = periodSelector;
      
}


    //For tablet - Activate zoom feature
            function setZoom(){
                this.chartData.chartCursorSettings.pan = true;
                this.chartData.chartCursorSettings.zoomable = true;
                this.chartData.validateNow();
                this.chartData.zoomOut();
            }

          //For tablet - Activate the click on event to show details
            function setEvents(){
                this.chartData.chartCursorSettings.pan = false;
                this.chartData.chartCursorSettings.zoomable = false;
                this.chartData.validateNow();
                this.chartData.zoomOut();
            }


           //For tablet - Activate the smooth data scrolling
            function setPan(){
                
                this.chartData.chartCursorSettings.pan = true;
                this.chartData.chartCursorSettings.zoomable = false;
                this.chartData.validateNow();
                this.chartData.zoomOut();
            }




And button for Testing :

                <a4j:commandButton value="Set Zoom" onclick="setZoom();"/>
                <a4j:commandButton value="Set Events" onclick="setEvents();"/>
                <a4j:commandButton value="Set Pan" onclick="setPan();"/>

martynasma · #10 2012-08-16 01:31:18

Looking at your code setting both pan and zoomable to true at the same time makes no sense.

Your solution would probably be to detect if it's iPad, only then set panEventsEnabled.

denebj · #11 2012-08-16 09:28:25

I understand that, but I does not change the fact that it is not working on the ipad ;-)
I already show and hide the choices when I detect a tablet.

martynasma · #12 2012-08-20 06:30:32

OK, so looking at your code I get the impression that you are setting both pan and zoomable to true for tablets. Is that right? If not, can you please post your recent code or provide a link to a page that we can test.

denebj · #13 2012-08-20 09:40:23

Yes, for the tablet, the default behavior is pan and zoom to true.
Then I let the user choose what he wants withe setZoom/setEvent/setPan

martynasma · #14 2012-08-21 03:29:05

But you do agree that both pan and zoom set to true makes little sense?

Also, I have tried setZoom and setPan functions on iPad. Both work as expected.

denebj · #15 2012-08-21 09:41:13

Hum, yes I need to change that.

But my code is posted is running on your ipad has expected ?

martynasma · #16 2012-08-22 02:54:40

I'm running your code locally. And yes I'm able to switch between pan and zoom using your code.

amCharts support forum

Announcement

JavaScript Charts: JavaScript Charts Bundle (Serial, Pie, XY, Radar)

#1 2012-08-10 11:55:42

Ipad + ValidateNow()

#2 2012-08-13 04:06:38

Re: Ipad + ValidateNow()

#3 2012-08-13 09:28:16

Re: Ipad + ValidateNow()

#4 2012-08-14 06:47:42

Re: Ipad + ValidateNow()

#5 2012-08-14 10:00:30

Re: Ipad + ValidateNow()

#6 2012-08-15 10:20:35

Re: Ipad + ValidateNow()

#7 2012-08-15 10:42:15

Re: Ipad + ValidateNow()

#8 2012-08-15 10:48:53

Re: Ipad + ValidateNow()

#9 2012-08-15 11:40:28

Re: Ipad + ValidateNow()

Code:

#10 2012-08-16 01:31:18

Re: Ipad + ValidateNow()

#11 2012-08-16 09:28:25

Re: Ipad + ValidateNow()

#12 2012-08-20 06:30:32

Re: Ipad + ValidateNow()

#13 2012-08-20 09:40:23

Re: Ipad + ValidateNow()

#14 2012-08-21 03:29:05

Re: Ipad + ValidateNow()

#15 2012-08-21 09:41:13

Re: Ipad + ValidateNow()

#16 2012-08-22 02:54:40

Re: Ipad + ValidateNow()