Strange span inside the chart


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Emanuele on 24th March 2014
Hello, I am running into a strange issue. I have a canvas with multiple lines and multiple YAxis.

The HTML is pretty easy, as it is: <canvas id="cvs" width="1240" height="600">[No canvas support]</canvas>

The js is like this:
-------------------------
window.onload = function (e)
    {
    gutterLeft = 200;
    gutterRight = 20;

    var line1 = new RGraph.Line('cvs',[3.689949,3.69063,3.691312,3.691993,3.692674,3.693356,3.694037,3.694718,3.695399,3.696081,3.696762,3.697443,3.698124,3.698806,3.699487,3.700105,3.700366,3.700626,3.700886,3.701147,3.701407,3.701668,3.701928,3.702188,3.702449,3.702709,3.70297,3.70323,3.703491,3.703751,3.704012,3.70443,3.705747,3.707064,3.70838,3.709697,3.711014,3.712331,3.713647,3.714964,3.716281,3.717597,3.718914,3.718835,3.718005,3.717175,3.716345,3.717024,3.717729,3.718434,3.719139,3.719844,3.720549,3.721254,3.721959,3.722664,3.723369,3.724074,3.724779,3.725484,12])
     .Set('hmargin', 5)
     .Set('gutter.right', gutterRight)
     .Set('gutter.left', gutterLeft)
     .Set('gutter.bottom', 50)
     .Set('ymax',14)
     .Set('ymin',0)
    .Set('labels', ['4/17 21:00','4/17 21:05','4/17 21:10','4/17 21:15','4/17 21:20','4/17 21:25','4/17 21:30','4/17 21:35','4/17 21:40','4/17 21:45','4/17 21:50','4/17 21:55','4/17 22:00'])
    .Set('key', ['pH_PV', 'pH_SP', 'pH_OUT', 'pH_EC1', 'pH_EC2'])
    .Set('colors', ['red', 'orange', 'green', 'blue', 'violet'])
    .Set('key.position', 'gutter')
    .Set('key.position.gutter.boxed', false)
    .Set('key.position.y', -0.5)
    .Set('text.angle', 30)
    .Set('key.position.x', ((document.getElementById('cvs').width - gutterLeft - gutterRight) / 2)- gutterLeft / 4)
    .Set('noaxes', true)
    .Set('ylabels', false)
    .Draw();

     var yaxis1 = new RGraph.Drawing.YAxis('cvs',40)
     .Set('colors', ['red'])
     .Set('text.color', 'red')
     .Set('max',14)
     .Set('min',0)
     .Set('gutter.bottom', 50)
     .Set('units.post','pH')
.Draw();
}
---------------
[I have removed the infos for the other 4 pens].

Actually, the issue is that Rgraph displays an empty space before starting to print the line, as you can see here: i59.tinypic.com/308ll37.jpg
What can cause it?

Thanks,
Emanuele
Posted by Richard on 24th March 2014
Hi there,


No idea - try putting the page in question online.




Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Emanuele on 24th March 2014
Here you are: www.automazioniesistemi.com/tmp/006_Trend_V2_pH_006.html
Thanks for your great support,
Emanuele
Posted by Richard on 24th March 2014
Hi there,

This looks like a possible culprit - one of the line charts that you're drawing:

    var line4 = new RGraph.Line('cvs',[13.89429,13.89432,13.89436,13.8944,13.89443,13.89447,13.89451,13.89454,13.89458,13.89462,13.89465,13.89469,13.89473,13.89476,13.8948,13.89484,13.89487,13.89491,13.89495,13.89498,13.89502,13.89506,13.89509,13.89513,13.89517,13.8952,13.89524,13.89528,13.89531,13.89535,13.89539,13.89542,13.89546,13.8955,13.89553,13.89557,13.89561,13.89564,13.89568,13.89572,13.89575,13.89579,13.89583,13.89586,13.8959,13.89594,13.89597,13.89601,13.89605,13.89608,13.89612,13.89616,13.89619,13.89623,13.89627,13.8963,13.89634,13.89637,13.89641,13.89645])
     .Set('hmargin', 5)
     .Set('gutter.right', gutterRight)
     .Set('gutter.left', gutterLeft)
     .Set('gutter.bottom', 50)
     .Set('ymax',14)
     .Set('ymin',0)
    .Set('colors', ['blue'])
    .Set('noaxes', true)
    .Set('ylabels', false)
    .Draw();

You can easily tell by adding a datapoint of 7 to the start of the data:

    var line4 = new RGraph.Line('cvs',[7, 13.89429,13.89432,13.89436,13.8944,13.89443,13.89447,13.89451,13.89454,13.89458,13.89462,13.89465,13.89469,13.89473,13.89476,13.8948,13.89484,13.89487,13.89491,13.89495,13.89498,13.89502,13.89506,13.89509,13.89513,13.89517,13.8952,13.89524,13.89528,13.89531,13.89535,13.89539,13.89542,13.89546,13.8955,13.89553,13.89557,13.89561,13.89564,13.89568,13.89572,13.89575,13.89579,13.89583,13.89586,13.8959,13.89594,13.89597,13.89601,13.89605,13.89608,13.89612,13.89616,13.89619,13.89623,13.89627,13.8963,13.89634,13.89637,13.89641,13.89645])
     .Set('hmargin', 5)
     .Set('gutter.right', gutterRight)
     .Set('gutter.left', gutterLeft)
     .Set('gutter.bottom', 50)
     .Set('ymax',14)
     .Set('ymin',0)
    .Set('colors', ['blue'])
    .Set('noaxes', true)
    .Set('ylabels', false)
    .Draw();


Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Emanuele on 24th March 2014
I am not getting the point. If I add one more value at the begining what I get is again a little span between the start of the grid and the first value. You can see the result by refreshing the above page.
The same matter is visible even on the right side of the chart.

Thanks,
Emanuele
Posted by Richard on 24th March 2014
Hi there,

Ah. You mean space not span. That's the hmargin. You can just set the hmargin to 0:

obj.Set('hmargin', 0);





Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Emanuele on 24th March 2014
Thanks a lot Richard, it worked like a charm. :-)

Emanuele

Add a reply

 




« Back to message list
RGraph on social media