FFREDIANELLI Posted November 20, 2018 Share Posted November 20, 2018 Hi ! , someone have a clue to how to use opensource funnel javascript chart with unigui ? i need to create a Funnel chart but my knowledge in javascritp is zero... Help please... Link to comment Share on other sites More sharing options...
Sherzod Posted November 20, 2018 Share Posted November 20, 2018 Hi, Well, for example like this 1. You need these "JS files", you can find them in the github repositories UniServerModule -> CustomFiles: files/d3.v4.js files/d3-funnel.js 2. UniHTMLFrame1 -> HTML: <div id="funnel"></div> 3. UniHTMLFrame1 -> AfterScript: const data = [{ label: 'Inquiries', value: 5000 }, { label: 'Applicants', value: 2500 }, { label: 'Admits', value: 500 }, { label: 'Deposits', value: 200 } ]; const options = { block: { dynamicHeight: true, minHeight: 15 } }; const chart = new D3Funnel('#funnel'); chart.draw(data, options); Result: Link to comment Share on other sites More sharing options...
FFREDIANELLI Posted November 20, 2018 Author Share Posted November 20, 2018 Thanks for the answer, what do i have to put in apply button ? the files directory is inside the project directory ? in case of idapi do i have to put the files in some special directory ? or create a directory just for this application ? Link to comment Share on other sites More sharing options...
FFREDIANELLI Posted November 20, 2018 Author Share Posted November 20, 2018 my is white... , may you post here your application test with the files that you used ? i downloaded the version 4.13 , renamed the file d3.js to d3.v4.js and put in a subdirectory of project1 directory with the name /files but nothing works... sorry... Link to comment Share on other sites More sharing options...
Sherzod Posted November 20, 2018 Share Posted November 20, 2018 https://d3js.org/d3.v4.js https://raw.githubusercontent.com/jakezatecky/d3-funnel/master/dist/d3-funnel.js Link to comment Share on other sites More sharing options...
FFREDIANELLI Posted November 20, 2018 Author Share Posted November 20, 2018 Sherzod, thanks again, but can you put your test file, the mine is not working, something is not right, may be the folders where i have to put this files, or the command in the apply button ? put a refresh... Link to comment Share on other sites More sharing options...
FFREDIANELLI Posted November 20, 2018 Author Share Posted November 20, 2018 Forget it ! i find where to put... inside the debug folder ! thanks again !!! Link to comment Share on other sites More sharing options...
FFREDIANELLI Posted November 21, 2018 Author Share Posted November 21, 2018 Please how to change the values of the chart and update the htmlframe ? I whant to navigate in a montly grid and update the chart... i changed the content of afterscript and call htmlframe.refresh, but with no effect... onbuttonclick.... unihtmlframe1.AfterScript.Clear; unihtmlframe1.afterscript.add('$(document).ready(function()'); unihtmlframe1.afterscript.add('{'); unihtmlframe1.afterscript.add('showfunnel();'); unihtmlframe1.afterscript.add('});'); unihtmlframe1.afterscript.add(''); unihtmlframe1.afterscript.add('function showfunnel()'); unihtmlframe1.afterscript.add('{'); unihtmlframe1.afterscript.add('var data ='); unihtmlframe1.afterscript.add('['); unihtmlframe1.afterscript.add('[''1'', 5000000],'); unihtmlframe1.afterscript.add('[''2'', 2500000],'); unihtmlframe1.afterscript.add('[''3'', 1000000],'); unihtmlframe1.afterscript.add('[''4'', 500000],'); unihtmlframe1.afterscript.add('[''5'', 400000],'); unihtmlframe1.afterscript.add('[''6'', 300000],'); unihtmlframe1.afterscript.add('[''7'', 200000],'); unihtmlframe1.afterscript.add('[''8'', 100000]'); unihtmlframe1.afterscript.add('];'); unihtmlframe1.afterscript.add('var options ='); unihtmlframe1.afterscript.add(''); unihtmlframe1.afterscript.add('{'); unihtmlframe1.afterscript.add(''); unihtmlframe1.afterscript.add('chart: {'); unihtmlframe1.afterscript.add('animate:300,'); unihtmlframe1.afterscript.add('bottomPinch:1,'); unihtmlframe1.afterscript.add('curve:'); unihtmlframe1.afterscript.add('{'); unihtmlframe1.afterscript.add('enabled: false,'); unihtmlframe1.afterscript.add('height:35,'); unihtmlframe1.afterscript.add('}'); unihtmlframe1.afterscript.add('},'); unihtmlframe1.afterscript.add('label: {'); unihtmlframe1.afterscript.add('format: ''{l}: {f}'','); unihtmlframe1.afterscript.add('},'); unihtmlframe1.afterscript.add('tooltip: {'); unihtmlframe1.afterscript.add('enabled: true,'); unihtmlframe1.afterscript.add('},'); unihtmlframe1.afterscript.add(''); unihtmlframe1.afterscript.add(''); unihtmlframe1.afterscript.add(''); unihtmlframe1.afterscript.add('block: {'); unihtmlframe1.afterscript.add('dynamicHeight: true,'); unihtmlframe1.afterscript.add('minHeight: 35,'); unihtmlframe1.afterscript.add('hoverEffects: true,'); unihtmlframe1.afterscript.add('highlight: true,'); unihtmlframe1.afterscript.add('fill:'); unihtmlframe1.afterscript.add('{'); unihtmlframe1.afterscript.add('type: ''gradient'','); unihtmlframe1.afterscript.add('}'); unihtmlframe1.afterscript.add('},'); unihtmlframe1.afterscript.add(''); unihtmlframe1.afterscript.add(''); unihtmlframe1.afterscript.add('};'); unihtmlframe1.afterscript.add(''); unihtmlframe1.afterscript.add('var chart = new D3Funnel(''#funnel'');'); unihtmlframe1.afterscript.add('chart.draw(data, options);'); unihtmlframe1.afterscript.add(''); unihtmlframe1.afterscript.add('}'); unihtmlframe1.Refresh; Link to comment Share on other sites More sharing options...
Sherzod Posted November 21, 2018 Share Posted November 21, 2018 Hi, Please make a simple testcase for this if possible, we will check Link to comment Share on other sites More sharing options...
FFREDIANELLI Posted November 21, 2018 Author Share Posted November 21, 2018 Thanks for any help ! funnel.rar Link to comment Share on other sites More sharing options...
Sherzod Posted November 21, 2018 Share Posted November 21, 2018 Ok, thanks for the testcase, I will check Link to comment Share on other sites More sharing options...
FFREDIANELLI Posted November 29, 2018 Author Share Posted November 29, 2018 Hi , some evolution on this ? my time to deliver the application is finishing... Link to comment Share on other sites More sharing options...
Sherzod Posted November 29, 2018 Share Posted November 29, 2018 24 minutes ago, FFREDIANELLI said: Hi , some evolution on this ? my time to deliver the application is finishing... Hi, You can use UniSession.AddJS('...'); instead Link to comment Share on other sites More sharing options...
FFREDIANELLI Posted November 29, 2018 Author Share Posted November 29, 2018 Thanks Sherzod, worked well !! here the test working may be usefull to others of the group that are building CRM system. All the others chart with this capability are payed this is free ! funil3.rar 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now