Blank page without errors

#1

Hi community, I’m new with ChartFactor and I create my first demo application just coping some code from the Static Data demo, and after solving some import issues I finish with a blank HTML page without any console error, maybe I’m forgetting something but is difficult to continue since I don’t get any feedback. This is my code, thanks in advance.

<html>
    <head>
        <meta charset="utf-8">
        <script src="../assets/jquery.min.js"></script>
        <script src="../../lib/cftoolkit.min.js"></script>
        <script src="../assets/cft-standard-charts.min.js"></script>
    </head>
    <body>
        <div id="chart"></div>
        
    <script>
        var cf = window.cf;

        var data = {
            groups: ['Brand'],
            metrics: ['Speed'],
            data: [
                { group: ['Peugeot' ], current: { metrics: { Speed: 40}}},
                { group: ['Renault' ], current: { metrics: { Speed: 50}}},
                { group: ['Ferrari'], current: { metrics: { Speed: 100}}},
                { group: ['Lamborghini'], current: { metrics: { Speed: 120}}}
            ]
        };

        var chart = cf
                    .create()
                    .pie()
                    .element('chart')
                    .data(data);
        chart.execute();
    </script>
    </body>
</html>
#2

Hi @emma84, from what I see, your code is fine, however, you need to specify width and height for the div element where you want to place your chart. For example, with this small modification in the chart div: <div style="with: 100%; height: 100%" id="chart"></div> you will be able to see your visualization. Let me know if this answers your question. Best regards.

#3

Hi guys, I’ll ask here instead of creating a new thread since I think my problem is somehow related. I was able to render the visualization without issues. But then I placed the visual in a modal that is hidden and it is shown when the user clicks a button to open it.

When the page is loaded, I’m also not receiving any errors, but when the modal is opened, it shows blank instead of the chart. I have set a proper height and with in my css. But still doesn’t show anything. What could it be?

#4

Hello @patrick. Hidden elements have a width of 0, that’s why you are not seeing the visual. What you can do then is to call visualization.resize() a couple of milliseconds after the modal has open the first time. After the visualization has been resized you don’t need to do it again since it will keep the size even when the modal closes. That way you avoid to call resize() next time the modal is opened. Hope it helps.

#5

Hi @eduardo, I tried what you say, but didn’t work, I’m 99% sure that I’m doing something wrong lol, but can’t figure it out. When I did crStats.resize() where crStats is my visualization, I get this error: “crStats.resize is not a function”.

#6

Are you sure crStats is the right visualization object? It sounds to me like is not. All visualizations have the .resize() method. Can you let me know how are you using the crStats variable?

#7

I’m creating the visual and then assigning it to a variable:

var crStats = cf.provider(myProvider)
                        .source('att_calls')
                        .groupby(cr_id)
                        .metrics(count, timeMs)
                        .graph('Bars')
                        .execute()

Then in the event onclick I’m just calling resize with a timeout:

setTimeout(function(){ crStats.resize() },  100);
#8

I see, the problem is that you are assigning the result of .execute() to the crStats variable, which returns a promise that is resolved when the data queried is retrieved, and that’s why it doesn’t have any resize method.

Remove the .execute() from there and then call it from the crStats variable like this:

crStats.execute()

This way the crStats variable will be an Aktive object instead of a promise object