Jump to content

how to d3funnel ?


FFREDIANELLI

Recommended Posts

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:

d3funnel.png.9e2452ecb04cdfa83cc29fc63faf21e2.png

Link to comment
Share on other sites

:blink:  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

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;

image.thumb.png.62f8332feb52060db034ad87084e1c96.png

Link to comment
Share on other sites

  • 2 weeks later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...