I would like to see some sample klips for cash flow, I am brainstorming for a client who is thinking of migrating away from finagraph. Anyone want to show off their creations?
Date
Votes
7 comments
-
Hi Trudy,
Thanks for posting in our Community!
This is a great question, and one that has a few different possible answers.
Depending on if you are grabbing this data from a specific service, like Salesforce, you might want to start at our Klip Gallery and see if you can find a Klip that suits your needs.
Otherwise, in general, you can use a funnel component,
or a custom Sankey Chart, of which I can pass you a sample example to work with.
Hope this helps!
Best regards,
Joshua
_________________
Joshua Cohen-Collier,
Technical Support Specialist, Klipfolio -
Do you have an example Klip of the Sankey chart, or any other information about interacting with google charting resources ? It looks amazing !
-
Hi Catherine,
In general, to accommodate 3rd party HTML and JavaScript templates, you can use this documentation here.In regards to the Google Sankey chart, I have built out an example using the HTML template component.
What you can do is download copy the below Klip Schema, then in the Advanced Tools of the Editor(top left corner), view the Klip Source Code.
Then, paste this text, and hit update.
You can then change the "From", "To", and "Weight" fields as appropriate.
Hope this helps!
{
"title": "Production Line Chart",
"id": "7ce448707d2bc916876f177c29b13c56",
"workspace": {
"datasources": [],
"dimensions": {
"w": 1060
}
},
"appliedMigrations": {
"post_dst": true,
"separate_root_dsts": true
},
"components": [
{
"type": "html_tpl2",
"id": "909c302c-3",
"displayName": "HTML Template",
"dstContext": {
"id": "dst909c302c3"
},
"components": [
{
"type": "html_data",
"role": "data",
"id": "22a8afb0-8",
"displayName": "From",
"fmt": "txt",
"fmtArgs": {
"resultMetadata": {
"ignoreDateFormat": false,
"isAggregated": false,
"resultCount": 1
}
},
"dstContext": {
"id": "dst22a8afb08",
"kid": "7ce448707d2bc916876f177c29b13c56"
},
"isDstRoot": true,
"formulas": [
{
"txt": "ARRAY(\"America\",\"Canada\",\"Japan\",\"Congo\",\"Congo\",\"Congo\")",
"ver": 2
}
],
"data": [
[
"America",
"Canada",
"Japan",
"Congo",
"Congo",
"Congo"
]
],
"autoFmt": false,
"mixin": "label",
"dataId": "From"
},
{
"type": "html_data",
"role": "data",
"id": "21d1de34-9",
"displayName": "To",
"fmt": "txt",
"fmtArgs": {
"resultMetadata": {
"ignoreDateFormat": false,
"isAggregated": false,
"resultCount": 1
}
},
"dstContext": {
"id": "dst21d1de349",
"kid": "7ce448707d2bc916876f177c29b13c56"
},
"isDstRoot": true,
"formulas": [
{
"txt": "ARRAY(\"Congo\",\"Congo\",\"Congo\",\"Beijing\",\"Sudan\",\"Alaska\")",
"ver": 2
}
],
"data": [
[
"Congo",
"Congo",
"Congo",
"Beijing",
"Sudan",
"Alaska"
]
],
"autoFmt": false,
"mixin": "label",
"dataId": "To"
},
{
"type": "html_data",
"role": "data",
"id": "079c746e-10",
"displayName": "Weight",
"fmt": "num",
"fmtArgs": {
"precision": "0",
"resultMetadata": {
"ignoreDateFormat": false,
"isAggregated": false,
"resultCount": 1
}
},
"dstContext": {
"id": "dst079c746e10",
"kid": "7ce448707d2bc916876f177c29b13c56"
},
"isDstRoot": true,
"formulas": [
{
"txt": "ARRAY(5,5,10,3,12,10)",
"ver": 2
}
],
"data": [
[
5,
5,
10,
3,
12,
10
]
],
"autoFmt": false,
"mixin": "label",
"dataId": "Weight"
}
],
"tpl": "<p hidden id=\"From\">${From}</p>\n<p hidden id=\"To\">${To}</p> \n<p hidden id=\"Weight\">${Weight}</p> \n<div id=\"sankey_multiple\" style=\"width: 900px; height: 500px;\"></div> \n ",
"script_tpl": "//%20https://developers.google.com/chart/interactive/docs/gallery/sankey%0A%0Arequire(%5B%22https://www.gstatic.com/charts/loader.js%22%5D,%20function%20(ok)%20%7B%0A%0A//%20Modify%20packages%20corechart%20to%20sankey%0A%20%20%20%20google.charts.load('current',%20%7B%0A%20%20%20%20%20%20%20%20'packages':%20%5B'sankey'%5D%0A%20%20%20%20%7D);%0A%0A%20%20%20%20google.charts.setOnLoadCallback(drawChart);%0A%0A%20%20%20%20function%20drawChart()%20%7B%0A%0A%20%20%20%20%20%20%20%20var%20data%20=%20new%20google.visualization.DataTable();%0A%20%20%20%20%20%20%20%20data.addColumn('string',%20'From');%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20data.addColumn('string',%20'To');%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20data.addColumn('number',%20'Weight');%0A%0A%09var%20From=document.getElementById('From').innerHTML.split(',');%0A%09var%20To=document.getElementById('To').innerHTML.split(',');%0A%09var%20Weight=document.getElementById('Weight').innerHTML.split(',');%0A%09%0A%09%0A%20%0A%09for(var%20i=0;i%3CFrom.length;i++)%0A%09%7B%0A%20%20%09%20%20%20%20var%20currentFrom=From%5Bi%5D;%0A%09%20%20%20%20var%20currentTo=To%5Bi%5D;%0A%20%20%20%09%20%20%20%20var%20currentWeight=Weight%5Bi%5D;%0A%09%20%20%20%20data.addRow(%5BcurrentFrom,currentTo,parseInt(currentWeight)%5D);%09%0A%09%7D%0A%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20var%20options%20=%20%7B%0A%20%20%20%20%20%20%20%20%20%20width:%201000,%0A%20%20%20%20%20%20%20%7D;%20%20%20%20%20%0A%0A%20%20%20%20%20%20%20%20var%20chart%20=%20new%20google.visualization.Sankey(document.getElementById('sankey_multiple'));%0A%20%20%20%20%20%20%20%20chart.draw(data,%20options);%0A%20%20%20%20%7D%0A%0A%0A%7D);",
"overflow": "ns",
"dataModelType": "arr"
}
]
}
____________________
Joshua Cohen-Collier
Technical Support Specialist, Klipfolio -
Hi Joshua,
That is very cool. I didn't get it to work though. You can see the error below. Any suggestion to what might cause this?
Regards, Jon
-
Hi Jon,
It looks like as of yesterday, Google Charts made some kind of change to their source code in regards to Sankey Chart, which also broke the working example I had in my account.
Unfortunately, I am not able to explain why this no longer works, however other charts I have built using Google Charts do seem to still be working, so this may be a temporary issue.
Sorry for the inconvenience Jon.
Best regards,
Joshua -
Was it a temporary issue? - Because then I might think of looking into it more deeply as I need something like this as well.
best,
Uwe -
Hi Uwe,
Unfortunately, after taking another quick look it seems the Sankey integration is still not functioning in Klipfolio, so it may not be something that can be used unfortunately.
A potential workaround may be to have an HTML file hosted somewhere on the web and publicly accessible, and put it inside of the Klip using the Iframe component.
However, you would not be able to modify the values inside of Klipfolio, as you would need to change them manually in the HTML page.
Other integrations using Google Charts seem to continue to be working fine, however.
Sorry for the inconvenience here Uwe.
____________________
Joshua Cohen-Collier
Technical Support Specialist, Klipfolio
Please sign in to leave a comment.