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
James Peebles
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