Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="graphdiv"
  style="width:100%; height:300px;"></div>
              
            
!

CSS

              
                
              
            
!

JS

              
                  g = new Dygraph(

    // containing div
    document.getElementById("graphdiv"),

    // CSV or path to a CSV file.
    "Date,Temperature\n" +
    "20070101,94.0946841239929\n" +
"20070102,113.201811313629\n" +
"20070103,95.592303276062\n" +
"20070104,97.5064766407013\n" +
"20070105,106.963732838631\n" +
"20070106,80.2781760692596\n" +
"20070107,100.051359818317\n" +
"20070108,89.2442333698273\n" +
"20070109,106.051690578461\n" +
"20070110,101.531482040882\n" +
"20070111,89.1888439655304\n" +
"20070112,107.355877161026\n" +
"20070113,94.1611880064011\n" +
"20070114,96.1331555247307\n" +
"20070115,101.575378775597\n" +
"20070116,102.771860063076\n" +
"20070117,94.0878880023956\n" +
"20070118,109.288640022278\n" +
"20070119,100.911911055446\n" +
"20070120,112.278221845627\n" +
"20070121,78.9384078979492\n" +
"20070122,107.03338265419\n" +
"20070123,120.598442554474\n" +
"20070124,91.6525495052338\n" +
"20070125,86.6101157665253\n" +
"20070126,76.7657494544983\n" +
"20070127,104.709110856056\n" +
"20070128,87.2436583042145\n" +
"20070129,86.5187978744507\n" +
"20070130,96.5837013721466\n" +
"20070131,104.319975674152\n" +
"20070201,93.6525058746338\n" +
"20070202,132.866880893707\n" +
"20070203,93.4353011846542\n" +
"20070204,106.085510253906\n" +
"20070205,93.2852751016617\n" +
"20070206,92.3503077030182\n" +
"20070207,92.8799241781235\n" +
"20070208,90.887468457222\n" +
"20070209,97.4124673008919\n" +
"20070210,93.2560741901398\n" +
"20070211,109.902315735817\n" +
"20070212,94.9087244272232\n" +
"20070213,95.3440955281258\n" +
"20070214,102.835389971733\n" +
"20070215,84.5214533805847\n" +
"20070216,103.06267619133\n" +
"20070217,97.7182766795158\n" +
"20070218,116.737879514694\n" +
"20070219,120.076403617859\n" +
"20070220,95.6556394696236\n" +
"20070221,94.5879065990448\n" +
"20070222,101.539226770401\n" +
"20070223,98.8678465783596\n" +
"20070224,97.6890955865383\n" +
"20070225,99.6496134251356\n" +
"20070226,100.740707740188\n" +
"20070227,91.4698106050491\n" +
"20070228,98.8102301210165\n" +
"20070301,99.2288841307163\n" +
"20070302,92.5863647460938\n" +
"20070303,114.908181428909\n" +
"20070304,109.287412166595\n" +
"20070305,95.3682035207748\n" +
"20070306,95.1182308793068\n" +
"20070307,103.946290016174\n" +
"20070308,109.746969342232\n" +
"20070309,114.140131473541\n" +
"20070310,85.407782793045\n" +
"20070311,90.8102822303772\n" +
"20070312,96.6755110025406\n" +
"20070313,83.8195776939392\n" +
"20070314,108.24079990387\n" +
"20070315,104.835974276066\n" +
"20070316,93.1726837158203\n" +
"20070317,103.685465157032\n" +
"20070318,90.1124656200409\n" +
"20070319,97.3299288749695\n" +
"20070320,107.909459471703\n" +
"20070321,95.2882331609726\n" +
"20070322,108.571609854698\n" +
"20070323,99.6926294267178\n" +
"20070324,112.102061510086\n" +
"20070325,94.4191563129425\n" +
"20070326,100.833547562361\n" +
"20070327,106.16162955761\n" +
"20070328,98.9218898117542\n" +
"20070329,96.4712545275688\n" +
"20070330,96.4686763286591\n" +
"20070331,101.455799043179\n" +
"20070401,102.23684206605\n" +
"20070402,114.709233045578\n" +
"20070403,107.03797519207\n" +
"20070404,101.396441310644\n" +
"20070405,103.902289569378\n" +
"20070406,92.3808485269547\n" +
"20070407,105.23556470871\n" +
"20070408,87.1553158760071\n" +
"20070409,119.241544008255\n" +
"20070410,111.096258163452\n" +
"20070411,97.4128222465515\n" +
"20070412,110.409885644913\n" +
"20070413,95.4885852336884\n" +
"20070414,103.764507174492\n" +
"20070415,114.021297693253\n" +
"20070416,98.9073173701763\n" +
"20070417,115.810360908508\n" +
"20070418,101.422971785069\n" +
"20070419,119.795391559601\n" +
"20070420,92.0360016822815\n" +
"20070421,112.404752969742\n" +
"20070422,104.059817194939\n" +
"20070423,93.1676262617111\n" +
"20070424,93.2092815637589\n" +
"20070425,104.13601398468\n" +
"20070426,98.1847678124905\n" +
"20070427,121.308670043945\n" +
"20070428,115.053536891937\n" +
"20070429,94.0280091762543\n" +
"20070430,88.1207823753357\n" +
"20070501,111.701385974884\n" +
"20070502,98.714727461338\n" +
"20070503,103.363722264767\n" +
"20070504,111.602603197098\n" +
"20070505,99.4656148552895\n" +
"20070506,77.7958679199219\n" +
"20070507,104.113802611828\n" +
"20070508,123.41313123703\n" +
"20070509,94.3239623308182\n" +
"20070510,88.1108486652374\n" +
"20070511,105.014639496803\n" +
"20070512,100.885331854224\n" +
"20070513,100.741365477443\n" +
"20070514,91.6865712404251\n" +
"20070515,114.093443155289\n" +
"20070516,97.6279026269913\n" +
"20070517,112.286994457245\n" +
"20070518,95.2370589971542\n" +
"20070519,97.7498243749142\n" +
"20070520,108.320077061653\n" +
"20070521,99.222916662693\n" +
"20070522,96.8812572956085\n" +
"20070523,69.8594975471497\n" +
"20070524,89.9046337604523\n" +
"20070525,96.7731782793999\n" +
"20070526,112.635122537613\n" +
"20070527,104.880233108997\n" +
"20070528,108.829988837242\n" +
"20070529,113.387352228165\n" +
"20070530,94.149631857872\n" +
"20070531,106.634711623192\n" +
"20070601,99.3034096062183\n" +
"20070602,103.288851976395\n" +
"20070603,107.427718043327\n" +
"20070604,86.3590371608734\n" +
"20070605,101.470438838005\n" +
"20070606,95.8705332875252\n" +
"20070607,116.72345161438\n" +
"20070608,88.9263653755188\n" +
"20070609,99.8003915697336\n" +
"20070610,99.5304548367858\n" +
"20070611,96.5316081047058\n" +
"20070612,84.9738717079163\n" +
"20070613,103.224220573902\n" +
"20070614,90.2293705940247\n" +
"20070615,82.8239297866821\n" +
"20070616,108.036482334137\n" +
"20070617,111.484116315842\n" +
"20070618,107.548137307167\n" +
"20070619,108.109716176987\n" +
"20070620,115.827913284302\n" +
"20070621,100.512249879539\n" +
"20070622,105.511372685432\n" +
"20070623,96.7094963788986\n" +
"20070624,94.7944843769073\n" +
"20070625,98.8138699531555\n" +
"20070626,87.5452423095703\n" +
"20070627,95.6386211514473\n" +
"20070628,105.971124768257\n" +
"20070629,105.616582632065\n" +
"20070630,87.1863389015198\n" +
"20070701,122.550580501556\n" +
"20070702,97.9201781749725\n" +
"20070703,101.693934798241\n" +
"20070704,106.984695196152\n" +
"20070705,101.652606278658\n" +
"20070706,103.062781989574\n" +
"20070707,85.9849941730499\n" +
"20070708,111.554799079895\n" +
"20070709,108.148396611214\n" +
"20070710,120.08163690567\n" +
"20070711,95.8106634020805\n" +
"20070712,109.306951761246\n" +
"20070713,109.748197793961\n" +
"20070714,107.401624917984\n" +
"20070715,115.204228162766\n" +
"20070716,101.363894045353\n" +
"20070717,101.237911954522\n" +
"20070718,101.364123821259\n" +
"20070719,82.0579624176025\n" +
"20070720,87.840758562088\n" +
"20070721,96.2999013066292\n" +
"20070722,74.482958316803\n" +
"20070723,92.1898084878922\n" +
"20070724,111.657168865204\n" +
"20070725,95.6442388892174\n" +
"20070726,126.834321022034\n" +
"20070727,104.035118818283\n" +
"20070728,114.844251871109\n" +
"20070729,93.8618439435959\n" +
"20070730,110.952197313309\n" +
"20070731,94.7132760286331\n" +
"20070801,108.074281215668\n" +
"20070802,102.066531479359\n" +
"20070803,96.064564883709\n" +
"20070804,94.8778116703033\n" +
"20070805,96.9068056344986\n" +
"20070806,72.676248550415\n" +
"20070807,102.892329394817\n" +
"20070808,100.392684154212\n" +
"20070809,102.075793892145\n" +
"20070810,97.244453728199\n" +
"20070811,95.4441091418266\n" +
"20070812,98.565482199192\n" +
"20070813,104.287070035934\n" +
"20070814,109.793092012405\n" +
"20070815,112.275532484055\n" +
"20070816,77.7145385742188\n" +
"20070817,109.886486530304\n" +
"20070818,108.64046394825\n" +
"20070819,85.4451429843903\n" +
"20070820,83.6442470550537\n" +
"20070821,109.308217763901\n" +
"20070822,108.235449790955\n" +
"20070823,123.438725471497\n" +
"20070824,96.0279887914658\n" +
"20070825,116.927028894424\n" +
"20070826,98.9606958627701\n" +
"20070827,95.2501532435417\n" +
"20070828,127.378940582275\n" +
"20070829,101.324769854546\n" +
"20070830,103.480939865112\n" +
"20070831,106.017985343933\n" +
"20070901,77.277090549469\n" +
"20070902,97.553293555975\n" +
"20070903,112.12229013443\n" +
"20070904,88.9848005771637\n" +
"20070905,113.623507022858\n" +
"20070906,117.776914834976\n" +
"20070907,95.3629437088966\n" +
"20070908,107.617252469063\n" +
"20070909,84.3433558940887\n" +
"20070910,103.260976672173\n" +
"20070911,88.3913385868073\n" +
"20070912,102.712529301643\n" +
"20070913,101.77043363452\n" +
"20070914,111.676977872849\n" +
"20070915,116.648640632629\n" +
"20070916,93.7750494480133\n" +
"20070917,103.814198076725\n" +
"20070918,102.28799149394\n" +
"20070919,102.797355353832\n" +
"20070920,90.6087863445282\n" +
"20070921,95.8696460723877\n" +
"20070922,101.489384919405\n" +
"20070923,88.5241162776947\n" +
"20070924,103.184829056263\n" +
"20070925,108.286160826683\n" +
"20070926,99.1833540052176\n" +
"20070927,105.875065922737\n" +
"20070928,109.003535509109\n" +
"20070929,119.159464836121\n" +
"20070930,88.9144706726074\n" +
"20071001,107.298363447189\n" +
"20071002,108.407359719276\n" +
"20071003,89.8164367675781\n" +
"20071004,114.692898988724\n" +
"20071005,99.0317782759666\n" +
"20071006,95.2851551771164\n" +
"20071007,75.3657913208008\n" +
"20071008,93.4729248285294\n" +
"20071009,118.223353624344\n" +
"20071010,103.33395242691\n" +
"20071011,85.7886075973511\n" +
"20071012,92.8499019145966\n" +
"20071013,90.1979243755341\n" +
"20071014,113.305931091309\n" +
"20071015,98.8471588492393\n" +
"20071016,105.021520853043\n" +
"20071017,103.107974529266\n" +
"20071018,94.6753841638565\n" +
"20071019,92.0168948173523\n" +
"20071020,95.3590556979179\n" +
"20071021,103.06764870882\n" +
"20071022,107.505331039429\n" +
"20071023,114.560452699661\n" +
"20071024,90.034704208374\n" +
"20071025,93.8096088171005\n" +
"20071026,88.0993688106537\n" +
"20071027,110.720720291138\n" +
"20071028,102.795536518097\n" +
"20071029,97.5641116499901\n" +
"20071030,105.768427848816\n" +
"20071031,91.7177611589432\n" +
"20071101,111.892886161804\n" +
"20071102,100.893505290151\n" +
"20071103,106.685945391655\n" +
"20071104,91.3279163837433\n" +
"20071105,101.440892368555\n" +
"20071106,96.4535877108574\n" +
"20071107,82.3770368099213\n" +
"20071108,116.052260398865\n" +
"20071109,125.71759223938\n" +
"20071110,103.291112780571\n" +
"20071111,109.987460970879\n" +
"20071112,125.61119556427\n" +
"20071113,81.9022762775421\n" +
"20071114,101.001473367214\n" +
"20071115,97.4931824207306\n" +
"20071116,100.898016765714\n" +
"20071117,87.1413099765778\n" +
"20071118,99.8441741894931\n" +
"20071119,101.680787652731\n" +
"20071120,101.4102037251\n" +
"20071121,104.962818622589\n" +
"20071122,100.41438985616\n" +
"20071123,96.3839226961136\n" +
"20071124,88.1726503372192\n" +
"20071125,99.3147452920675\n" +
"20071126,92.6553928852081\n" +
"20071127,126.858286857605\n" +
"20071128,109.922057986259\n" +
"20071129,104.839740395546\n" +
"20071130,91.77410364151\n" +
"20071201,104.208002388477\n" +
"20071202,84.3402886390686\n" +
"20071203,112.135351896286\n" +
"20071204,88.3082449436188\n" +
"20071205,108.096032738686\n" +
"20071206,102.557981014252\n" +
"20071207,89.1109883785248\n" +
"20071208,107.703627347946\n" +
"20071209,103.8067689538\n" +
"20071210,98.8902306556702\n" +
"20071211,113.535689115524\n" +
"20071212,110.228134393692\n" +
"20071213,104.585482180119\n" +
"20071214,106.728765964508\n" +
"20071215,103.84180277586\n" +
"20071216,113.178231716156\n" +
"20071217,114.0374147892\n" +
"20071218,103.519011437893\n" +
"20071219,95.9166973829269\n" +
"20071220,98.520376086235\n" +
"20071221,112.214257717133\n" +
"20071222,94.7806811332703\n" +
"20071223,97.4172702431679\n" +
"20071224,111.523776054382\n" +
"20071225,98.2731455564499\n" +
"20071226,106.441938281059\n" +
"20071227,84.2323613166809\n"

  );
              
            
!
999px

Console