How to create a graph with ApexCharts and import .csv data

[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

[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

[Janusz]

Hi Glen,
Please find enclosed quick example in the following video.

https://drive.google.com/file/d/1Csvj1I ... sp=sharing

[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/

[GlenMcCabe]

Janusz

Thanks for this. I should get a chance to try it in the morning.

Glen

[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.

[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.

[GlenMcCabe]

Janusz

Thanks for replying. Take care of yourself and be well. My problem is not comparable to yours. I will struggle on.

Glen