Sign In Register

How can we help you today?

Start a new topic
Answered

Using a c3 graph

Hello,


according to some other threads (like this one: https://support.gamesparks.net/support/discussions/topics/1000058086) it is possible to use c3 to generate custom graphs for admin screens.


I tried to generate a graph, but every time the javscript error occurs "c3 is undefined".

Do I need to load c3.js?


Best Answer
So to setup charts in dynamic forms you need to create the chart in a script block in your html window.

There are four parts to this...

  1. Construct your array in the JavaScript window and pass it in from the snippet-processor function.
  2. Put some hidden fields into your HTML so the script has reference to those arrays
  3. Declare a div for your chart
  4. Create a script block and add the chart details.


So, your html code looks like this...



 

<gs-row>
        <gs-title-block title="Filter Chart" padding="10" margin="0">
            <gs-row>
                <input id="X" type="hidden" value="{{form.arrayX}}" />
                <input id="Y" type="hidden" value="{{form.arryY}}" />
                <div id="myChart"></div>
            </gs-row>
        </gs-title-block>
    </gs-title-block>
</gs-row>

 


And your script would look something like this...



 

<script>
    console.log($("#arrayX").val().split(','));
    console.log($("#arrayY").val().split(','));

    
    var chart = c3.generate({
        bindto: '#myChart',
        data: {
            x: 'Date',
            xFormat : '%Y%m%d', // default '%Y-%m-%d'
            columns: [
                $("#arrayX").val().split(','),
                $("#arrayY").val().split(',')
            ]
        },
        axis : {
            x : {
                type : 'timeseries'
            }
        }
    });

</script>

 



 


Answer
So to setup charts in dynamic forms you need to create the chart in a script block in your html window.

There are four parts to this...

  1. Construct your array in the JavaScript window and pass it in from the snippet-processor function.
  2. Put some hidden fields into your HTML so the script has reference to those arrays
  3. Declare a div for your chart
  4. Create a script block and add the chart details.


So, your html code looks like this...



 

<gs-row>
        <gs-title-block title="Filter Chart" padding="10" margin="0">
            <gs-row>
                <input id="X" type="hidden" value="{{form.arrayX}}" />
                <input id="Y" type="hidden" value="{{form.arryY}}" />
                <div id="myChart"></div>
            </gs-row>
        </gs-title-block>
    </gs-title-block>
</gs-row>

 


And your script would look something like this...



 

<script>
    console.log($("#arrayX").val().split(','));
    console.log($("#arrayY").val().split(','));

    
    var chart = c3.generate({
        bindto: '#myChart',
        data: {
            x: 'Date',
            xFormat : '%Y%m%d', // default '%Y-%m-%d'
            columns: [
                $("#arrayX").val().split(','),
                $("#arrayY").val().split(',')
            ]
        },
        axis : {
            x : {
                type : 'timeseries'
            }
        }
    });

</script>

 



 

Hi Chris,


It is possible to use c3 in custom manage screens however we are currently fixing the implementation of this on the new portal. It is still possible on the old portal.


We anticipate that this will be fixed in the next week or so.


-Pádraig

Login to post a comment