Open bluemonk3y opened 4 years ago
AMCharts example: https://codepen.io/team/amcharts/pen/NMvZGV ` var chart = am4core.create("chartdiv", am4charts.SankeyDiagram);
// Set data chart.data = [ { "from":'Payment>$1000', "to": 'Debit-10ms', "value": 100}, { "from":'Payment>$1000', "to": 'Debit-5ms', "value": 55}, { "from":'Payment>$1000', "to": 'Debit-1ms', "value": 15},
{ "from":'Payment>$500', "to": 'Debit-10ms', "value": 70},
{ "from":'Payment>$500', "to": 'Debit-5ms', "value": 20}, { "from":'Payment>$500', "to": 'Debit-1ms', "value": 10},
{ "from":'Payment>$100', "to": 'Debit-10ms', "value": 60}, { "from":'Payment>$100', "to": 'Debit-5ms', "value": 31}, { "from":'Payment>$100', "to": 'Debit-1ms', "value": 11},
{ "from":'Debit-10ms', "to": 'Credit-50ms', "value": 41},
{ "from":'Debit-5ms', "to": 'Credit-25ms', "value": 11},
{ "from":'Debit-1ms', "to": 'Credit-10ms', "value": 31},
{ "from":'Credit-50ms', "to": 'Payment>$1000-100ms', "value": 31},
{ "from":'Credit-25ms', "to": 'Payment>$1000-25ms', "value": 21},
{ "from":'Credit-10ms', "to": 'Payment>$1000-10ms', "value": 11},
{ "from":'Credit-50ms', "to": 'Payment>$500-50ms', "value": 51},
{ "from":'Credit-25ms', "to": 'Payment>$500-25ms', "value": 11},
{ "from":'Credit-10ms', "to": 'Payment>$500-10ms', "value": 3},
{ "from":'Credit-50ms', "to": 'Payment>$100-50ms', "value": 41},
{ "from":'Credit-25ms', "to": 'Payment>$100-25ms', "value": 11},
{ "from":'Credit-10ms', "to": 'Payment>$100-10ms', "value": 11}
];
// Configure data fields chart.dataFields.fromName = "from"; chart.dataFields.toName = "to"; chart.dataFields.value = "value";
// Configure nodes var nodeTemplate = chart.nodes.template; nodeTemplate.width = 30; nodeTemplate.stroke = am4core.color("#fff"); nodeTemplate.strokeWidth = 2; nodeTemplate.nameLabel.locationX = 0.2; nodeTemplate.nameLabel.label.fill = am4core.color("#fff"); nodeTemplate.nameLabel.label.fontWeight = "bold";
// Configure links var linkTemplate = chart.links.template; linkTemplate.tension = 1; linkTemplate.controlPointDistance = 0.1; linkTemplate.fill = am4core.color("#A8C686");`
https://www.anychart.com/buy/ cheap-dev license for startup $49 amcharts (free with watermark) https://www.amcharts.com/timeline-chart/
Using a Sankey chart to show dataflow visualizations would be simple and useful. It plays nicely with visualization of flows using something simple correlationIds. It would be simpler to hook up than distributed tracing.
Datamodel For example, imagine a dataflow of payments - incoming, debit, credit, outgoing. It could show a model where the incoming are broken down by the amount. { // stage 1 incoming-$100+, debit-10ms, 1000 incoming-$50-100, debit-5ms, 20 incoming-$0-50, debit-1ms, 20 incoming-$0-50, debit-5ms, 20 incoming-$0-50, debit-10ms, 20
// stage 2 debit-1ms, credit-10ms, 1000 debit-1ms, credit-5ms, 100 debit-10ms, credit-10ms, 100
// stage 3 credit-10ms, end-to-end-10ms-$100, 1000 credit-1ms, end-to-end-10ms-$50, 1000 credit-5ms, end-to-end-5ms-$10, 50
Fields:
Query: field.extract('.(txnId:)', correlation) field.extract('.(dddd-dd-dd)', timestamp) field.extract('.status: (\w+), stage) field.extract('.amount: (\w+), y-value)
Analytic: analytic.dataflow(correlation, timestamp, stage, y-value)
Raw data: 2020-mar-15 1200:32.31 txn: 123 stage: inbound amount: 1000 some other stuff 2020-mar-15 1200:33.31 txn: 423 stage: inbound amount: 1000 some other stuff 2020-mar-15 1200:33.31 txn: 523 stage: inbound amount: 1000 some other stuff
2020-mar-15 1200:35.31 txn: 123 stage: debit amount: 1000 some other stuff 2020-mar-15 1200:35.31 txn: 423 stage: debit amount: 1000 some other stuff 2020-mar-15 1200:35.31 txn: 523 stage: debit amount: 1000 some other stuff
2020-mar-15 1200:35.31 txn: 123 stage: credit amount: 1000 some other stuff 2020-mar-15 1200:35.31 txn: 423 stage: credit amount: 1000 some other stuff 2020-mar-15 1200:35.31 txn: 523 stage: credit amount: 1000 some other stuff
2020-mar-15 1200:35.31 txn: 123 stage: complete amount: 1000 some other stuff 2020-mar-15 1200:35.31 txn: 423 stage: complete amount: 1000 some other stuff 2020-mar-15 1200:35.31 txn: 523 stage: complete amount: 1000 some other stuff
Highcharts jsfiddle: https://jsfiddle.net/5anhsxku/
Google Charts fiddle: http://jsfiddle.net/d8znLj4f/
Splunk developer view: https://docs.splunk.com/Documentation/SankeyDiagram/1.3.0/SankeyDiagramViz/SankeyIntro
https://developers.google.com/chart/interactive/docs/gallery/sankey