Created
May 3, 2020 12:18
-
-
Save sahajamit/db1e5deb05fb6b0559dbd8523e9243ba to your computer and use it in GitHub Desktop.
// source https://jsbin.com/vejoduq
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style id="jsbin-css"> | |
| @import 'https://code.highcharts.com/css/highcharts.css'; | |
| .highcharts-waterfall-series .highcharts-point { | |
| fill: #90ed7d; | |
| } | |
| .highcharts-color-0 { | |
| fill: rgb(89, 166, 89); | |
| stroke: rgb(89, 166, 89); | |
| } | |
| .xAxis.labels.style { | |
| fill: #000000; | |
| cursor: default; | |
| font-size: 1.9em; | |
| } | |
| </style> | |
| <script src="https://code.highcharts.com/highcharts.js"></script> | |
| <script src="https://code.highcharts.com/highcharts-more.js"></script> | |
| <script src="https://code.highcharts.com/modules/exporting.js"></script> | |
| <div id="container" style="min-width: 400px; height: 600px; margin: 0 auto"></div> | |
| <script id="jsbin-javascript"> | |
| Highcharts.chart('container', { | |
| chart: { | |
| type: 'columnrange', | |
| inverted: true | |
| }, | |
| title: { | |
| text: 'Different MicroServices Timings in a Waterfall Chart' | |
| }, | |
| subtitle: { | |
| text: 'Time taken by each microservice' | |
| }, | |
| xAxis: { | |
| categories: ['Orchestrator Service', | |
| 'MicroService A', | |
| 'MicroService B', | |
| 'MicroService C', | |
| 'MicroService D', | |
| 'MicroService E', | |
| 'MicroService F'], | |
| labels: { | |
| style: { | |
| color: 'black', | |
| fontSize: '14px' | |
| } | |
| } | |
| }, | |
| yAxis: { | |
| title: { | |
| text: 'Timings in Seconds', | |
| style: { | |
| fontSize: '18px' | |
| } | |
| } | |
| }, | |
| tooltip: { | |
| valueSuffix: ' sec' | |
| }, | |
| plotOptions: { | |
| columnrange: { | |
| dataLabels: { | |
| enabled: true, | |
| formatter: function () { | |
| return this.y + ' sec'; | |
| } | |
| } | |
| } | |
| }, | |
| legend: { | |
| enabled: false | |
| }, | |
| series: [{ | |
| name: 'Timings', | |
| data: [ | |
| {x: 1, low: 0.06, high: 4.6}, | |
| {x: 2, low: 0.96, high: 3.1}, | |
| {x: 3, low: 0.55, high: 2.96}, | |
| {x: 4, low: 0.16, high: 4.26}, | |
| {x: 5, low: 4.6, high: 10.1}, | |
| {x: 6, low: 4.6, high: 10.3}, | |
| ] | |
| }] | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><script src="https://code.highcharts.com/highcharts.js"><\/script> | |
| <script src="https://code.highcharts.com/highcharts-more.js"><\/script> | |
| <script src="https://code.highcharts.com/modules/exporting.js"><\/script> | |
| <div id="container" style="min-width: 400px; height: 600px; margin: 0 auto"></div> | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">@import 'https://code.highcharts.com/css/highcharts.css'; | |
| .highcharts-waterfall-series .highcharts-point { | |
| fill: #90ed7d; | |
| } | |
| .highcharts-color-0 { | |
| fill: rgb(89, 166, 89); | |
| stroke: rgb(89, 166, 89); | |
| } | |
| .xAxis.labels.style { | |
| fill: #000000; | |
| cursor: default; | |
| font-size: 1.9em; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| Highcharts.chart('container', { | |
| chart: { | |
| type: 'columnrange', | |
| inverted: true | |
| }, | |
| title: { | |
| text: 'Different MicroServices Timings in a Waterfall Chart' | |
| }, | |
| subtitle: { | |
| text: 'Time taken by each microservice' | |
| }, | |
| xAxis: { | |
| categories: ['Orchestrator Service', | |
| 'MicroService A', | |
| 'MicroService B', | |
| 'MicroService C', | |
| 'MicroService D', | |
| 'MicroService E', | |
| 'MicroService F'], | |
| labels: { | |
| style: { | |
| color: 'black', | |
| fontSize: '14px' | |
| } | |
| } | |
| }, | |
| yAxis: { | |
| title: { | |
| text: 'Timings in Seconds', | |
| style: { | |
| fontSize: '18px' | |
| } | |
| } | |
| }, | |
| tooltip: { | |
| valueSuffix: ' sec' | |
| }, | |
| plotOptions: { | |
| columnrange: { | |
| dataLabels: { | |
| enabled: true, | |
| formatter: function () { | |
| return this.y + ' sec'; | |
| } | |
| } | |
| } | |
| }, | |
| legend: { | |
| enabled: false | |
| }, | |
| series: [{ | |
| name: 'Timings', | |
| data: [ | |
| {x: 1, low: 0.06, high: 4.6}, | |
| {x: 2, low: 0.96, high: 3.1}, | |
| {x: 3, low: 0.55, high: 2.96}, | |
| {x: 4, low: 0.16, high: 4.26}, | |
| {x: 5, low: 4.6, high: 10.1}, | |
| {x: 6, low: 4.6, high: 10.3}, | |
| ] | |
| }] | |
| }); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import 'https://code.highcharts.com/css/highcharts.css'; | |
| .highcharts-waterfall-series .highcharts-point { | |
| fill: #90ed7d; | |
| } | |
| .highcharts-color-0 { | |
| fill: rgb(89, 166, 89); | |
| stroke: rgb(89, 166, 89); | |
| } | |
| .xAxis.labels.style { | |
| fill: #000000; | |
| cursor: default; | |
| font-size: 1.9em; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Highcharts.chart('container', { | |
| chart: { | |
| type: 'columnrange', | |
| inverted: true | |
| }, | |
| title: { | |
| text: 'Different MicroServices Timings in a Waterfall Chart' | |
| }, | |
| subtitle: { | |
| text: 'Time taken by each microservice' | |
| }, | |
| xAxis: { | |
| categories: ['Orchestrator Service', | |
| 'MicroService A', | |
| 'MicroService B', | |
| 'MicroService C', | |
| 'MicroService D', | |
| 'MicroService E', | |
| 'MicroService F'], | |
| labels: { | |
| style: { | |
| color: 'black', | |
| fontSize: '14px' | |
| } | |
| } | |
| }, | |
| yAxis: { | |
| title: { | |
| text: 'Timings in Seconds', | |
| style: { | |
| fontSize: '18px' | |
| } | |
| } | |
| }, | |
| tooltip: { | |
| valueSuffix: ' sec' | |
| }, | |
| plotOptions: { | |
| columnrange: { | |
| dataLabels: { | |
| enabled: true, | |
| formatter: function () { | |
| return this.y + ' sec'; | |
| } | |
| } | |
| } | |
| }, | |
| legend: { | |
| enabled: false | |
| }, | |
| series: [{ | |
| name: 'Timings', | |
| data: [ | |
| {x: 1, low: 0.06, high: 4.6}, | |
| {x: 2, low: 0.96, high: 3.1}, | |
| {x: 3, low: 0.55, high: 2.96}, | |
| {x: 4, low: 0.16, high: 4.26}, | |
| {x: 5, low: 4.6, high: 10.1}, | |
| {x: 6, low: 4.6, high: 10.3}, | |
| ] | |
| }] | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment