diff --git a/_posts/plotly_js/layout/axes/2015-04-09-axes-labels.html b/_posts/plotly_js/layout/axes/2015-04-09-axes-labels.html index 59181501cda7..537ed4e6585b 100755 --- a/_posts/plotly_js/layout/axes/2015-04-09-axes-labels.html +++ b/_posts/plotly_js/layout/axes/2015-04-09-axes-labels.html @@ -1,26 +1,37 @@ --- name: Set and Style Axes Title Labels and Ticks -plot_url: https://codepen.io/plotly/embed/4fc1a99f9b12b436dec0a0663a9cd323/?height=486&theme-id=15263&default-tab=result +plot_url: https://codepen.io/plotly/embed/ZjOxXw/?height=500&theme-id=15263&default-tab=result language: plotly_js suite: axes order: 0 sitemap: false arrangement: horizontal --- -var x = [0, 1, 2, 3, 4, 5, 6, 7, 8]; -var maxX = Math.max(...x); -var trace1 = { - x: x, - y: x.map(x => maxX-x).map(x => x*1E10), - type: 'scatter' -}; -var trace2 = { - x: x, - y: x.map(x => x*1E10), - type: 'scatter' -}; -var data = [trace1, trace2]; + + + + +Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv", function(err, rows){ + function unpack(rows, key) { + return rows.map(function(row) { return row[key]; }); +} + + var x = unpack(rows, 'Date') + var y = unpack(rows, 'AAPL.Volume') + + var trace = { + type: "scatter", + mode: "lines", + name: 'AAPL Volume', + x: x, + y: y, + line: {color: 'grey'} + } + + var data = [trace]; + var layout = { + title: 'Volume of Apple Shares Traded', xaxis: { title: 'AXIS TITLE', titlefont: { @@ -29,7 +40,7 @@ color: 'lightgrey' }, showticklabels: true, - tickangle: 45, + tickangle: 'auto', tickfont: { family: 'Old Standard TT, serif', size: 14, @@ -56,4 +67,6 @@ showexponent: 'all' } }; + Plotly.newPlot('myDiv', data, layout); +})