Page 1 of 1
How to create a graph with ApexCharts and import .csv data
Posted: Sun Mar 28, 2021 5:16 pm
by Janusz
A step by step video is available on the YouTube how to create graph in the nuBuilder with ApexCharts.
As well example how to import data from .cvs file is explained.
It demonstrates basic nuBuilder functionality - so it's rather dedicated for new users.
https://youtu.be/FNz5e6vbuYg
This database is available on our server where you can have an access to the used code.
https://test.nubuilder.cloud/
login: test
psw: nutest
Re: How to create a graph with ApexCharts and import .csv da
Posted: Mon Mar 29, 2021 4:27 pm
by GlenMcCabe
Janusz
Very good video. A few questions if I may.
I am still running v4 is that ok.
Can I use your example for reports to include date selection i.e. start date and end date?
Can I have a drop down to select type of graph?
Is the chart downloadable as a graphic eg .png to include in documents?
Thanks in advance.
Glen
Re: How to create a graph with ApexCharts and import .csv da
Posted: Mon Mar 29, 2021 8:36 pm
by Janusz
Hi Glen,
Please find enclosed quick example in the following video.
https://drive.google.com/file/d/1Csvj1I ... sp=sharing
Re: How to create a graph with ApexCharts and import .csv da
Posted: Mon Mar 29, 2021 8:43 pm
by Janusz
You can find as well other approach to choose apex graph type in our demo server:
https://demo.nubuilder.cloud/
log: demo
psw: nudemo
and this one also demonstrates the graph type change:
https://jsfiddle.net/kvipe/7sxLrz54/7/
Re: How to create a graph with ApexCharts and import .csv da
Posted: Mon Mar 29, 2021 9:06 pm
by GlenMcCabe
Janusz
Thanks for this. I should get a chance to try it in the morning.
Glen
Re: How to create a graph with ApexCharts and import .csv da
Posted: Mon Apr 19, 2021 3:07 pm
by GlenMcCabe
Janusz
Sorry about the delay. My company work is in the health sector and recently we have been swamped with programming etc for COVID. I get to work on this only occasionally and have just tried your suggestions.
Firstly I have upgraded the system to version 4.5.
I followed your suggestions but can't get the dates to work. The changing graph type is working.
I tested the graph type by simply putting fixed dates into my selection. The selection works and I can change between bar and line. Will try others later.
When I try to include variable dates I get a blank graph
My coding is
onchange for start_date which is a nudate format yyyy/mm/dd
var y =$(this) val();
nuSetProperty('start_date',y);
nuGetBreadcrumb();
onchange for start_date which is a nudate format yyyy/mm/dd
var z =$(this) val();
nuSetProperty('end_date',z);
nuGetBreadcrumb();
Before Edit PHP is
$a[] = ['Owner', 'Referrals'];
$start_date=#start_date#;
$end_date=#end_date#;
nudebug($start_date);
$s = "
SELECT
practitioners.name AS owner,
COUNT(referral.ownerID) AS Referrals
FROM
referral
LEFT JOIN practitioners ON referral.ownerID=practitioners.id
WHERE
(referral.referralDate BETWEEN '$start_date' AND '$end_date')
GROUP BY referral.ownerId
";
$t = nuRunQuery($s);
while($r = db_fetch_row($t)){
$a[] = [$r[0], Floatval($r[1])];
}
nudebug($a);
$j = "gdata = " . json_encode($a) . ";";
nuAddJavascript($j);
I was using different variable names but changed to use the ones you had used, just in case. No luck. nuDebug of dates produces [0]
Any pointers would be great.
Re: How to create a graph with ApexCharts and import .csv da
Posted: Mon Apr 19, 2021 5:09 pm
by Janusz
Hi, I am as well now quite close with covid, because currently I am in hospital but recovery seems to go well. Do not have access to computer to try anything but what I would suggest - so after creating the $s variable make nuDebug($s). And try to paste the output directly to phpmyadmin if it will create proper data set. You can try to use as well nuDebug($t) to see the output if any. Potentially there might be some data missmatch between nuBuilder notation and mysql notststion of dates.
Re: How to create a graph with ApexCharts and import .csv da
Posted: Mon Apr 19, 2021 10:34 pm
by GlenMcCabe
Janusz
Thanks for replying. Take care of yourself and be well. My problem is not comparable to yours. I will struggle on.
Glen