Sign In Register

How can we help you today?

Start a new topic
Not Taken

Ability to create charts in GSML using form data

I would like the ability to create charts in management via GSML using form data, supplying my own x and y data.


1 person likes this idea

Found a work around, GSML draws charts using C3 so here is an example of a custom chart


  

<div id="chart"></div>

<script>
var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', 30, 50, 100, 230, 300, 310],
            ['data1', 30, 200, 100, 400, 150, 250],
        ]
    }
});
</script>

  

The following code in a snippet will generate a chart for you. 


<div id="mychartelement"></div>


<script>

    c3.generate({

    bindto: '#mychartelement',

    data: {

      columns: [

        ['data1', 30, 200, 100, 400, 150, 250],

        ['data2', 50, 20, 10, 40, 15, 25]

      ]

    }

});

</script>


We use csj3, so all options for c3 are available to you. The c3js site has a ton of examples for different chart types here http://c3js.org/examples.html


Gabriel

This is a pretty old topic but I had a follow up question on this.


Is it possible to construct the JSON in JS snippet and then use that in the GSML for that snippet?


Javascript -


    result.chartData= {

    data: {

        x: 'x',

        columns: [

            ['x', 30, 50, 100, 230, 300, 310],

            ['data1', 30, 200, 100, 400, 150, 250],

        ]

    }


GSML -


        <div id="chart"></div>


<script>

var chart = c3.generate({{result.chartData}})

</script>


I have tried this, but doesn't work.  Maybe I missed something?


Javascript -


    result.declareString = "var chartData=" + JSON.stringify({

    data: {

        x: 'x',

        columns: [

            ['x', 30, 50, 100, 230, 300, 310],

            ['data1', 30, 200, 100, 400, 150, 250],

        ]

    }) + ";";


GSML -


        <div id="chart"></div>


<script>

{{{result.declareString}}}

var chart = c3.generate(chartData)

</script>


----

note there are triple {{{ }}} in GSML,


this should work

Login to post a comment