Home forums Using CanvasJS Start in Year 1905 and Not PAN

This topic contains 10 replies, has 2 voices, and was last updated by  GABO57 3 years, 2 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #5268

    GABO57
    Participant

    My application uses to pan and zoom.
    With the values of y no problem.
    The problem exists in the x values to be dates.
    Problem 1. The chart begins in the year 1905? and I not feeds this date.
    Problem 2. I can not perform panning. When PAN digit button will reset?.
    Attached the code.

    /////////////////////////////////////////////////////////////////////////////////////

    <script type=”text/javascript” src=”canvasjs.min.js”></script>
    <script type=”text/javascript”>

    window.onload = function() {
    ///////////////////////////////////////////////////

    var y = 0;
    var data = [];
    var dataSeries = { type: “line” };
    var dataPoints = [];

    vpoly = “20130101F20130102F20130103F20130104F20130105F”;
    var vpyactualf = new Array();
    vpyactualf = vpoly.split(“F”);
    vpoly = “176586.38N1044945.92N160295.99N422044.89N647601.52N”;
    var vpyactualn = new Array();
    vpyactualn = vpoly.split(“N”);
    var limit = vpyactualf.length;

    for (var i = 0; i <= limit – 1; i++) {

    y = parseFloat(vpyactualn[i]);
    xpaso = vpyactualf[i];
    xpaso1 = xpaso.substring(0, 4);
    xpaso2 = xpaso.substring(4, 6);
    xpaso3 = xpaso.substring(6, 8);
    xpasoc = xpaso1.concat(xpaso2, xpaso3);
    dateTimex = new Date(xpaso1, xpaso2 – 1, xpaso3);
    dataPoints.push({
    x: dateTimex,
    y: y
    });
    }
    dataSeries.dataPoints = dataPoints;
    data.push(dataSeries);
    dateMinact = new Date(‘2013′, ’00’, ’01’); //Force not begin in year 1905

    var chart = new CanvasJS.Chart(“chartContainer”,
    {
    zoomEnabled: true,
    title: {
    text: “Zoom And Observe AxisX ”
    },
    axisX: {
    // minimum: dateMinact, <<< if I active this line NOT zoom >>>
    labelAngle: -30
    },
    axisY: {
    includeZero: false
    },
    legend: {
    horizontalAlign: “right”,
    verticalAlign: “center”
    },
    data: data

    });

    chart.render();
    }
    </script>
    ///////////////////////////////////////////////////////////////////////////////////////

    #5274

    GABO57
    Participant

    Ok

    the problem 1.

    Starts in 1905

    it corrected as follows:
    in the line of code

    “for (var i = 0; i <= limit – 1; i + +)”

    should be
    “for (var i = 0; i <= limit – 2; i + +)” was feeding the x axis nulls.

    Sunil now please check my code and help me to solve problem 2.

    Why does not the PAN and type it resets the chart

    Thanks in Advance

    • This reply was modified 3 years, 2 months ago by  GABO57.
    #5277

    Sunil Urs
    Keymaster

    for (var i = 0; i < = limit – 2; i + +) was feeding the x axis nulls.

    You were getting a null value because there is an additional N in the end. You can either remove that N in the end and use limit – 1 or you can use limit – 2 as you are doing now.

    You are not able to zoom/pan because there are only 5 dataPoints in the chart. CanvasJS stops zooming when there are only a few dataPoints in the view port and are clearly visible. If you add another 5-10 dataPoints atleast, you’ll be able to zoom/pan.


    Sunil Urs

    #5278

    GABO57
    Participant

    Sunil. In the documentation of

    Overview – Zooming & Panning in CanvasJS HTML5 & JavaScript Charts

    in the example section

    Basic Zooming and Panning

    If your modified so

    var limit = 5;

    The PAN button works
    In my application graph more than 200 points and instead of panning resets and loses the zoom

    Thanks in advance for your help.
    I’m working against the clock.

    #5279

    Sunil Urs
    Keymaster

    Hi,

    I can surely help you with this. But without knowing the actual code & data its not possible to figure out the problem. In the code that you had previously provided there are only 5 data points and pan still works for me – though it doesn’t zoom. If you can create a jsfiddle which reproduces the issue, I can figure out the problem easily and suggest you a solution.


    Sunil Urs

    #5294

    GABO57
    Participant

    Hi Sunil.
    I install the version that is in

    and my application works with ZOOM and PAN in IE8

    in CHROME ZOOM works fine

    but when typing the PAN button the graph is initialized.
    So my code is good.
    Apparently my error is with CanvasJS version I’m using.

    Thanks in Advance.

    #5297

    Sunil Urs
    Keymaster

    Sorry, but am not able to reproduce the issue. Can you please create a jsfiddle that reproduces the issue. Without a way to reproduce the issue its not possible to give a solution.

    Please fork this template jsfiddle and create your chart that reproduces the issue.

    #5298

    GABO57
    Participant

    Hi Sunil

    This is my jsfiddle of issue

    http://jsfiddle.net/canvasjs/QwZuf/

    Thanks in Advance.

    #5299

    GABO57
    Participant

    Hi Sunil

    This is my jsfiddle of issue

    http://jsfiddle.net/QwZuf/11/

    Im sorry the last one no saved.

    Thanks in Advance.

    #5301

    Sunil Urs
    Keymaster

    From what I see, the graph is working fine. My I know what you mean by “when typing the PAN button the graph is initialized.”

    #5304

    GABO57
    Participant

    Hi Sunil.
    When I run my application the graph shown OK
    ZOOM performs fine and perfect.

    But when I want to make the switch Between zooming and panning using the toolbar That Appears on the chart,
    the chart is reset, as if I had pressed the reset button of the toolbar.

    I install the version That is in

    And with this in (Visual Studio 2008) local computer, in debug and IE8, It performs the operation of zooming and panning OK!.

    After I publish and run my application from my SERVER 2003, IIS 6 the zooming OK , but the panning IS NOT working fine.

    Please Help.

    Thanks in advance

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

You must be logged in to reply to this topic.