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

Questions related to using nuBuilder Forte.

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

Unread postby Janusz » Mon Mar 29, 2021 12:46 am

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
If you like nuBuilder, please leave a review on SourceForge
Janusz
nuBuilder Team
 
Posts: 467
Joined: Fri Dec 28, 2018 10:11 pm
Location: Krakow, Poland
nuBuilder Version: 4.5

Re: How to create a graph with ApexCharts and import .csv da

Unread postby GlenMcCabe » Mon Mar 29, 2021 11:57 pm

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
GlenMcCabe
 
Posts: 87
Joined: Sun Sep 29, 2019 8:10 pm

Re: How to create a graph with ApexCharts and import .csv da

Unread postby Janusz » Tue Mar 30, 2021 4:06 am

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

https://drive.google.com/file/d/1Csvj1I ... sp=sharing
If you like nuBuilder, please leave a review on SourceForge
Janusz
nuBuilder Team
 
Posts: 467
Joined: Fri Dec 28, 2018 10:11 pm
Location: Krakow, Poland
nuBuilder Version: 4.5

Re: How to create a graph with ApexCharts and import .csv da

Unread postby Janusz » Tue Mar 30, 2021 4:13 am

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/
If you like nuBuilder, please leave a review on SourceForge
Janusz
nuBuilder Team
 
Posts: 467
Joined: Fri Dec 28, 2018 10:11 pm
Location: Krakow, Poland
nuBuilder Version: 4.5

Re: How to create a graph with ApexCharts and import .csv da

Unread postby GlenMcCabe » Tue Mar 30, 2021 4:36 am

Janusz

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

Glen
GlenMcCabe
 
Posts: 87
Joined: Sun Sep 29, 2019 8:10 pm

Re: How to create a graph with ApexCharts and import .csv da

Unread postby GlenMcCabe » Mon Apr 19, 2021 10:37 pm

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.
GlenMcCabe
 
Posts: 87
Joined: Sun Sep 29, 2019 8:10 pm

Re: How to create a graph with ApexCharts and import .csv da

Unread postby Janusz » Tue Apr 20, 2021 12:39 am

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.
If you like nuBuilder, please leave a review on SourceForge
Janusz
nuBuilder Team
 
Posts: 467
Joined: Fri Dec 28, 2018 10:11 pm
Location: Krakow, Poland
nuBuilder Version: 4.5

Re: How to create a graph with ApexCharts and import .csv da

Unread postby GlenMcCabe » Tue Apr 20, 2021 6:04 am

Janusz

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

Glen
GlenMcCabe
 
Posts: 87
Joined: Sun Sep 29, 2019 8:10 pm


Return to General

Who is online

Users browsing this forum: No registered users and 11 guests