{
            "cells": [
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["// can\u0027t yet format YamlFrontmatter ([\"title: Funnel Charts\"; \"category: Finance Charts\"; \"categoryindex: 7\"; \"index: 2\"], Some { StartLine = 2 StartColumn = 0 EndLine = 6 EndColumn = 8 }) to pynb markdown\n",
"\n"]
          }
,
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": null, "outputs": [], 
           "source": ["#r \"nuget: Plotly.NET, 2.0.0-preview.14\"\n",
"#r \"nuget: Plotly.NET.Interactive, 2.0.0-preview.14\"\n"]
          }
,
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["# Funnel Charts\n",
"\n",
"[![Binder](https://plotly.net/img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath=07_1_funnel.ipynb)\u0026emsp;\n",
"[![Script](https://plotly.net/img/badge-script.svg)](https://plotly.net/07_1_funnel.fsx)\u0026emsp;\n",
"[![Notebook](https://plotly.net/img/badge-notebook.svg)](https://plotly.net/07_1_funnel.ipynb)\n",
"\n",
"*Summary:* This example shows how to create funnel charts in F#.\n",
"\n",
"let\u0027s first create some data for the purpose of creating example charts:\n",
"\n"]
          }
,
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": 3, "outputs": [], 
           "source": ["let y = [|\"Sales person A\"; \"Sales person B\"; \"Sales person C\"; \"Sales person D\"; \"Sales person E\"|]\n",
"let x = [|1200.; 909.4; 600.6; 300.; 80.|]\n"]
          }
,
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["Funnel charts visualize stages in a process using length-encoded bars. This trace can be used to show data in either a part-to-whole \n",
"representation wherein each item appears in a single stage, or in a \"drop-off\" representation wherein each item appears in each stage \n",
"it traversed. See also the [FunnelArea](https://plotly.net//6_2_funnel_area.html) chart for a different approach to visualizing funnel data.\n",
"\n"]
          }
,
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": 4, "outputs": [], 
           "source": ["open Plotly.NET \n",
"open Plotly.NET.TraceObjects\n",
"\n",
"// Customize the connector lines used to connect the funnel bars\n",
"let connectorLine = Line.init (Color=Color.fromString \"royalblue\", Dash=StyleParam.DrawingStyle.Dot, Width=3.)\n",
"let connector = FunnelConnector.init(Line=connectorLine)\n",
"\n",
"// Customize the outline of the funnel bars\n",
"let line = Line.init(Width=2.,Color=Color.fromHex \"3E4E88\")\n",
"\n",
"// create a funnel chart using custom connectors and outlines\n",
"let funnel =\n",
"    Chart.Funnel (x,y,Color=Color.fromHex \"59D4E8\", Line=line, Connector=connector)\n",
"    |\u003e Chart.withMarginSize(Left=100)\n"]
          }
,
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": null, "outputs": [
          {
           "data": {
            "text/html": ["\u003cdiv id=\"af51394c-6136-4303-880b-6fef5d8e126c\"\u003e\u003c!-- Plotly chart will be drawn inside this DIV --\u003e\u003c/div\u003e",
"\u003cscript type=\"text/javascript\"\u003e",
"",
"            var renderPlotly_af51394c61364303880b6fef5d8e126c = function() {",
"            var fsharpPlotlyRequire = requirejs.config({context:\u0027fsharp-plotly\u0027,paths:{plotly:\u0027https://cdn.plot.ly/plotly-2.4.2.min\u0027}}) || require;",
"            fsharpPlotlyRequire([\u0027plotly\u0027], function(Plotly) {",
"",
"            var data = [{\"type\":\"funnel\",\"x\":[1200.0,909.4,600.6,300.0,80.0],\"y\":[\"Sales person A\",\"Sales person B\",\"Sales person C\",\"Sales person D\",\"Sales person E\"],\"connector\":{\"line\":{\"color\":\"royalblue\",\"width\":3.0,\"dash\":\"dot\"}},\"marker\":{\"color\":\"rgba(89, 212, 232, 1.0)\",\"line\":{\"color\":\"rgba(62, 78, 136, 1.0)\",\"width\":2.0}}}];",
"            var layout = {\"width\":600,\"height\":600,\"template\":{\"layout\":{\"title\":{\"x\":0.05},\"font\":{\"color\":\"rgba(42, 63, 95, 1.0)\"},\"paper_bgcolor\":\"rgba(255, 255, 255, 1.0)\",\"plot_bgcolor\":\"rgba(229, 236, 246, 1.0)\",\"autotypenumbers\":\"strict\",\"colorscale\":{\"diverging\":[[0.0,\"#8e0152\"],[0.1,\"#c51b7d\"],[0.2,\"#de77ae\"],[0.3,\"#f1b6da\"],[0.4,\"#fde0ef\"],[0.5,\"#f7f7f7\"],[0.6,\"#e6f5d0\"],[0.7,\"#b8e186\"],[0.8,\"#7fbc41\"],[0.9,\"#4d9221\"],[1.0,\"#276419\"]],\"sequential\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"sequentialminus\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]},\"hovermode\":\"closest\",\"hoverlabel\":{\"align\":\"left\"},\"coloraxis\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}},\"geo\":{\"showland\":true,\"landcolor\":\"rgba(229, 236, 246, 1.0)\",\"showlakes\":true,\"lakecolor\":\"rgba(255, 255, 255, 1.0)\",\"subunitcolor\":\"rgba(255, 255, 255, 1.0)\",\"bgcolor\":\"rgba(255, 255, 255, 1.0)\"},\"mapbox\":{\"style\":\"light\"},\"polar\":{\"bgcolor\":\"rgba(229, 236, 246, 1.0)\",\"radialaxis\":{\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"ticks\":\"\"},\"angularaxis\":{\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"ticks\":\"\"}},\"scene\":{\"xaxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"gridwidth\":2.0,\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"backgroundcolor\":\"rgba(229, 236, 246, 1.0)\",\"showbackground\":true},\"yaxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"gridwidth\":2.0,\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"backgroundcolor\":\"rgba(229, 236, 246, 1.0)\",\"showbackground\":true},\"zaxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"gridwidth\":2.0,\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"backgroundcolor\":\"rgba(229, 236, 246, 1.0)\",\"showbackground\":true}},\"ternary\":{\"aaxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\"},\"baxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\"},\"caxis\":{\"ticks\":\"\",\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\"},\"bgcolor\":\"rgba(229, 236, 246, 1.0)\"},\"xaxis\":{\"title\":{\"standoff\":15},\"ticks\":\"\",\"automargin\":true,\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"zerolinewidth\":2.0},\"yaxis\":{\"title\":{\"standoff\":15},\"ticks\":\"\",\"automargin\":true,\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"zerolinecolor\":\"rgba(255, 255, 255, 1.0)\",\"zerolinewidth\":2.0},\"annotationdefaults\":{\"arrowcolor\":\"#2a3f5f\",\"arrowhead\":0,\"arrowwidth\":1},\"shapedefaults\":{\"line\":{\"color\":\"rgba(42, 63, 95, 1.0)\"}},\"colorway\":[\"rgba(99, 110, 250, 1.0)\",\"rgba(239, 85, 59, 1.0)\",\"rgba(0, 204, 150, 1.0)\",\"rgba(171, 99, 250, 1.0)\",\"rgba(255, 161, 90, 1.0)\",\"rgba(25, 211, 243, 1.0)\",\"rgba(255, 102, 146, 1.0)\",\"rgba(182, 232, 128, 1.0)\",\"rgba(255, 151, 255, 1.0)\",\"rgba(254, 203, 82, 1.0)\"]},\"data\":{\"bar\":[{\"marker\":{\"line\":{\"color\":\"rgba(229, 236, 246, 1.0)\",\"width\":0.5},\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}},\"errorx\":{\"color\":\"rgba(42, 63, 95, 1.0)\"},\"errory\":{\"color\":\"rgba(42, 63, 95, 1.0)\"}}],\"barpolar\":[{\"marker\":{\"line\":{\"color\":\"rgba(229, 236, 246, 1.0)\",\"width\":0.5},\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}}}],\"carpet\":[{\"aaxis\":{\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"endlinecolor\":\"rgba(42, 63, 95, 1.0)\",\"minorgridcolor\":\"rgba(255, 255, 255, 1.0)\",\"startlinecolor\":\"rgba(42, 63, 95, 1.0)\"},\"baxis\":{\"linecolor\":\"rgba(255, 255, 255, 1.0)\",\"gridcolor\":\"rgba(255, 255, 255, 1.0)\",\"endlinecolor\":\"rgba(42, 63, 95, 1.0)\",\"minorgridcolor\":\"rgba(255, 255, 255, 1.0)\",\"startlinecolor\":\"rgba(42, 63, 95, 1.0)\"}}],\"choropleth\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}],\"contour\":[{\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}],\"contourcarpet\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}],\"heatmap\":[{\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}],\"heatmapgl\":[{\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}],\"histogram\":[{\"marker\":{\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}}}],\"histogram2D\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"histogram2Dcontour\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"mesh3d\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}],\"parcoords\":[{\"line\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}}],\"pie\":[{\"automargin\":true}],\"scatter\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}}],\"scatter3d\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}},\"line\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}}],\"scattercarpet\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}}],\"scattergeo\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}}],\"scattergl\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}}],\"scattermapbox\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}}],\"scatterpolar\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}}],\"scatterpolargl\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}}],\"scatterternary\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}}}}],\"surface\":[{\"colorbar\":{\"outlinewidth\":0.0,\"ticks\":{\"Case\":\"Empty\"}},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}]}},\"margin\":{\"l\":100}};",
"            var config = {\"responsive\":true};",
"            Plotly.newPlot(\u0027af51394c-6136-4303-880b-6fef5d8e126c\u0027, data, layout, config);",
"});",
"            };",
"            if ((typeof(requirejs) !==  typeof(Function)) || (typeof(requirejs.config) !== typeof(Function))) {",
"                var script = document.createElement(\"script\");",
"                script.setAttribute(\"src\", \"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js\");",
"                script.onload = function(){",
"                    renderPlotly_af51394c61364303880b6fef5d8e126c();",
"                };",
"                document.getElementsByTagName(\"head\")[0].appendChild(script);",
"            }",
"            else {",
"                renderPlotly_af51394c61364303880b6fef5d8e126c();",
"            }",
"\u003c/script\u003e",
""]
        },
           "execution_count": null,
           "metadata": {},
           "output_type": "execute_result"
          }], 
           "source": ["funnel\n"]
          }],
            "metadata": {
            "kernelspec": {"display_name": ".NET (F#)", "language": "F#", "name": ".net-fsharp"},
            "langauge_info": {
        "file_extension": ".fs",
        "mimetype": "text/x-fsharp",
        "name": "C#",
        "pygments_lexer": "fsharp",
        "version": "4.5"
        }
        },
            "nbformat": 4,
            "nbformat_minor": 1
        }