Individually coloured sections with the Line chart

Share RGraph:   Share or Like RGraph on Facebook!

« 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 fotosettore on 17th May 2016
hi !
is it possibile to create a graph with segment individually coloured like this ?

www.homoandroidus.com/graph/graph.png

many thanks fo your help

peppe
Posted by Richard on 17th May 2016
Hi,

You can do that by using multiple lines and null values like this example shows:

www.rgraph.net/fiddle/view.html/line-with-different-colours-for-each-segment



Richard
Posted by Enter your name... on 17th May 2016
hi richard
thanks for your very fast reply.
i tried your example and i saw line-orange graph too. it works fine!
i ask now for another question.
my graph must visualize a day divided into minutes.
so i need to build 60x24 = 1440 lines.
i tried to do it but graph stops at 2745th line.
please note that label of x is ok and it write the 1439th minute (canvas width is now of 20000) but vertical lines and graph lines stop before 5 o'clock (about 2745 min).
is it a my error in programming or a limit of rgraph?
thanks for your help
peppe
Posted by Richard on 17th May 2016
Hi there,

Here's the chart now updated with 1440 datapoints. The canvas sits in a 700px wide DIV which has been set to scroll so that you can see all of the canvas.

www.rgraph.net/fiddle/view.html/line-with-different-colours-for-each-segment




Richard
Posted by Enter your name... on 17th May 2016
Hi Richard

I'm afraid that address is wrong. Is the same of previous message...
Peppe
Posted by Richard on 17th May 2016
Hi there,

No its not - your browser may have cached it.



Richard
Posted by fotosettore on 18th May 2016
hi richard
you were in right ... after more loading of page all was ok !
more : without effects, loading of all data is really fast!
 
very very very nice work ... really !


i made my graph of one day divided in minutes, with 3 colors.
i made a static y bar too, reading docs on your web page.
all works really fine.
now i must resolve more problems, so please help me again.


1. i should need to put two x axis label : one for minutes and another one for hour.
no problem about the first one (minutes), because i used "label" inside options.
is there a solution about that ?
-----example----------------------------------

...40 50 0 10 20 30 40 50 0 10 20 ... <--- first label
         12am 1pm <--- second label

-----------------------------------------------

the two labels must be connected, so if graph moves to left or right, two bars about minutes and hour must run together.
 

2. i'm having some difficulty about putting a vertical line in the middle of graph (like "today" in line-orange example)
i saw it works on draw function but i tried to put inside the example you made for me yesterday but it does not work.
please note i'm not expert of js.


many thanks for your help
Posted by Richard on 18th May 2016
Hi,

1. For this you can use the drawing API X axis. Set the colour of the axis to transparent so just the labels will be visible. And if you keep the gutters for the chart and the X axis the same the axis should stay underneath the chart.

2. Put your drawing in the RGraph draw event so that it gets redrawn whenever the chart is. Note that there is no X scale for the Line chart - but if you want it to line up with a particular point then the coordinates are in the obj.coords property. The line-orange.html demo does this but using the obj.coords2 array (which are the same coordinates, but just arranged a little differently).





Richard
Posted by fotosettore on 25th May 2016
hi Richard
thanks a lot for your help.
i did all you said and now all works fine.
so i'm near end of my work but i need another little help.
please refere to your example :
www.rgraph.net/fiddle/view.html/line-with-different-colours-for-each-segment
when the graph is loaded, it goes ever on begin.
i should need to place it in (for example) position number 450
so my question is : is there a way to move automatically cursor in that position, or better to move cursor so that the view of line number 450 is positioned in the middle of chart ?
many thanks
peppe
Posted by Richard on 25th May 2016
Hi there,

With the Line chart you would need to fill the data array that you give the line chart with null values either side of the item do that it looks like this array:

[null,null,null,null,null,49,45,null,null,null,null,null]

But obviously with however many values that you normally have. The RGraph.arrayPad() function will help you when creating the array like this:


// Fill the data array with 1440 values (1 per minute)
var data = RGraph.arrayPad([], 60 * 24, null);

// Add information into the array
data[46] = 46.2;
data[47] = 30.5;






Richard
Posted by Enter your name... on 25th May 2016
hi richard
sorry for my question again, but i'm afraid i did nor explain well my problem last time.
 
please note that the graph is already full of data (1440 lines).
normally, when the graph is loaded, the cursor goes in 0 position
 
www.homoandroidus.com/graph/rgraph_1.PNG
 
i dont' need this scenario.
i need that when i load graph, the cursor of it goes directly to position 720 without sliding with mouse or finger. so cursor automatically is in the middle of the graph
 
www.homoandroidus.com/graph/rgraph_2.PNG
 
is it possibile ?
 
many thanks
peppe
Posted by Richard on 25th May 2016
Hi there,

That 'cursor' is actually not a cursor at all, but a tickmark. There's probably one at the other end of the chart too.

You can set the tickmarks property to null in your configuration to get rid of it:

...
tickmarks: null,
...





Richard
Posted by Enter your name... on 25th May 2016
hi richard
sorry for my english. probably there is a misurderstanding.
i post the question in other way: i hope i explain better my request
 
is there a way to put a tickmark (ghost or dot) only on line 720 and overall go there directly when graph is loaded ?
(i need this : www.homoandroidus.com/graph/rgraph_2.PNG)
 
many thanks
peppe
Posted by Richard on 25th May 2016
Hi there,

You could add a mark by using the coordinates in the obj.coords array with the drawing API circle object.

Or alternatively you could use the RGraph.path function:




var line = new RGraph.Line({
     id: 'cvs',
     data: [4,6,3,5,8,9,4,5],
     options: {
     }
}).on('draw', function (obj)
{
     var x = obj.coords[2][0];
     var y = obj.coords[2][1];

     RGraph.path2(obj.context, 'b a % % 15 0 6.2830 false f red', x, y);

}).draw();





Richard
Posted by fotosettore on 25th May 2016
hi Richard
it's ok for first question : i added a mark in 720 position and it works fine

     var x = obj.coords[720][0];
     var y = obj.coords[720][1];


but unfortunately second question was not solved :-(
when i load graph i must slide the cursor with mouse until 720.
 
so : is it possibile to add a command button to slide the graph directly to 720 without using mouse ?

regards
peppe
Posted by Richard on 25th May 2016
Hi there,

The sliding action isn't something that RGraph does I'm afraid.



Richard
Posted by Enter your name... on 30th May 2016
hi richard
this is a good idea for next version ;)

regards
peppe

Add a reply




« Back to message list