How to show a daily chart with different colors for each bit of data?

« 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 giuseppe de lorenzo on 9th June 2017
I need to make a graph a little complicated. I hope to explain in right mode my needs.

the graph should show the daily situation of a solar inverter loads, during hours of the day,
with different colors : green for battery, red for grid, yellow for sun

please look at example graph i made using "line" command of visual basic 6.0

X axis shows the day number; in this case are first and second day of the month (In the end i will have to build a month).
Y axis shows hours number.
In the specific example, every day is divided in 96 lines, one on the other. So every hour is composed by 4 lines.

In the specific example (day number 1)
from midnight to 6.30 loads were "battery"
from 6.30 to 8.15 loads were "sun"
from 8.15 to 8.30 loads were "battery"
and so on
Last example of the same day : from 18.45 to 23 loads were "grid".

To better understand, the first green part of day 1 if composed by 26 green lines ( 4 lines per hours * 6 hours + 2 lines for half hour) one on the other .
The red part is composed by 17 red lines (1 line for a quarter of hour + 4 lines per hour *4 hours) one on the other.

Which is the type of graph and the best solution to build the same graph with your tool ?

Many thanks for your help

Posted by Richard on 9th June 2017
Hi there,

How about something like this:

Posted by Richard on 9th June 2017
Hi there,

PS. I used the canvas libraries because the SVG Bar chart library had a rounding error in it which resulted in bars that were shorter than they should be. So use the canvas library for the time being.

Posted by giuseppe de lorenzo on 9th June 2017
it seems very good result !!!
in some days i will try with real data and i put the result in my server.
question : if i wanted to change the step (for example one line every 5 minutes) the array days.push should be of 288 [(60*24)/5] elements ... right ?
many thanks
Posted by Richard on 9th June 2017
Hi there,

Yes I think so - so instead of this array being made up of 96 elements:

]);'d have 288.

Posted by giuseppe de lorenzo on 16th June 2017
hi ..
finally i made the graph !!
this link is for weekly situation and is composed from 1440 * 7 lines (one every minute x seven days).
i also made the monthly one, that is composed from 1440 * 30 lines !!! it is little slow to create but it works fine too.
i add the % graph to understand better general situation.
many thanks for your help. rgraph tool is really a big tool !;Tipo=carichi_gestione&quando=settimanale&giorno=15-06-17
Posted by Richard on 16th June 2017
Hi there,

You're welcome.


Add a reply

« Back to message list