{
            "cells": [
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["Your First XPlot Chart\n",
"======================\n",
"\n",
"In this tutorial we will walk through creating a chart in the browser,\n",
"from an F# script running in [Visual Studio Code](https://code.visualstudio.com/).\n",
"\n",
"We assume that:\n",
"\n",
"- VS Code is already installed,\n",
"- F# is already installed ([see fsharp.org under \"Use\"](http://fsharp.org/)), and\n",
"- VS Code extensions [Ionide FSharp](https://marketplace.visualstudio.com/items?itemName=Ionide.Ionide-fsharp)\n",
"and [Ionide Paket](https://marketplace.visualstudio.com/items?itemName=Ionide.Ionide-paket) are installed.\n",
"\n",
"First, create a new F# script file: `Script.fsx`.\n",
"\n",
"Copy-paste the following code into the editor:\n",
"\n"]
          }
,
          {
           "cell_type": "code",
           "metadata": {},
            "execution_count": 1, "outputs": [], 
           "source": ["#r \"nuget: XPlot.Plotly\"\n",
"\n",
"open XPlot.Plotly\n",
"\n",
"[ 1 .. 10 ] |\u003e Chart.Line |\u003e Chart.Show\n"]
          }
,
          {
           "cell_type": "markdown",
           "metadata": {},
           
           "source": ["Select all of the code you pasted in and press `Alt`+`Enter` to execute it.\n",
"\n",
"That\u0027s it! You should see a chart popping up in your browser.\n",
"\u003c!DOCTYPE html\u003e\n",
"\u003chtml\u003e\n",
"    \u003chead\u003e\n",
"        \u003cmeta charset=\"UTF-8\" /\u003e\n",
"        \u003cscript src=\"https://cdn.plot.ly/plotly-latest.min.js\"\u003e\u003c/script\u003e\n",
"    \u003c/head\u003e\n",
"    \u003cbody\u003e\n",
"        \u003cdiv id=\"bffcc4b5-cdd3-47c4-89cc-2ded152f2b1d\" style=\"width: 900px; height: 500px;\"\u003e\u003c/div\u003e\n",
"        \u003cscript\u003e\n",
"            var data = [{\"type\":\"scatter\",\"y\":[1,2,3,4,5,6,7,8,9,10]}];\n",
"           var layout = \"\";\n",
"           Plotly.newPlot(\u0027bffcc4b5-cdd3-47c4-89cc-2ded152f2b1d\u0027, data, layout);\n",
"        \u003c/script\u003e\n",
"    \u003c/body\u003e\n",
"\u003c/html\u003e\n",
"\n",
"Notes\n",
"\n",
"- you will need an internet connection for the chart to render, as the code relies on Plotly.\n",
"\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
        }