how to d3funnel ?

[FFREDIANELLI]

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

[Sherzod]

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:

[FFREDIANELLI]

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 ?

 

[FFREDIANELLI]

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

 

[Sherzod]

https://d3js.org/d3.v4.js

https://raw.githubusercontent.com/jakezatecky/d3-funnel/master/dist/d3-funnel.js

[FFREDIANELLI]

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

[FFREDIANELLI]

Forget it ! i find where to put... inside the debug folder ! thanks again !!!

[FFREDIANELLI]

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;

[Sherzod]

Hi,

Please make a simple testcase for this if possible, we will check

[FFREDIANELLI]

Thanks for any help !

 

funnel.rar

[Sherzod]

Ok, thanks for the testcase, I will check 

[FFREDIANELLI]

Hi , some evolution on this ? my time to deliver the application is finishing...

 

[Sherzod]

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

[FFREDIANELLI]

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