Plotly charts are sometimes broken - javascript

For some stock symbols with data scrapped from Yahoo finance package, the plotly chart does not display linear lines but this kind of weird stuff (See picture).
Python code:
fig = px.line(df9, facet_col_wrap=3)
dynamic = fig.to_html(config={'displaylogo': False}, include_plotlyjs=False, default_width='100%', default_height='100%')
Additional info: when plotting variables independently it works perfectly. Also, I'm computing everything in a backend server, and sending back the HTML fig to a website ( see code). Finally, I noticed the issue affected Dow Jones (^DJI), Apple (AAPL).

Related

How to edit chart data using office.js within Microsoft Word

I'm creating a word add-in using the word javascript api that pulls data from database, allowing users to create tables/text with the data. I would now like to add the functionality to change charts based on the data
I can see information about editing charts in the documentation for excel, however I can't see anything for word.
Is it possible to edit chart data within word?
If so, would someone be able to provide me an example or link to the appropriate location to look?
I've tried doing it in excel and have made progress but can't see anything on the word side
I'm afraid that there are no chart editing APIs in the Word JavaScript yet. It's a good idea, and you can suggest it at Office Developer Suggestion Box.
In the meantime, a chart in Word is a element in the file's OOXML. You could try the following workaround: Your add-in could get the XML using the Office.Document.getFileAsync, edit the OOXML, then use the Word createDocument API to create a new document that is just like the original, but with your chart edits.

Use Google Spreadsheet as data source for Chart.js

Is it possible to use a Google spreadsheet as a datasource when using Chart.js?
I'd like to use Chart.js to create a line chart with multiple lines, and I'd like the user to be able to view all lines at once or select certain ones to display. Seems fairly simple to do with Chart.js, however, I'm wondering how to make the chart updatable for the client.
The client already has a dataset in Google spreadsheet that they update regularly, so I'd like to have the chart on the website update along with the spreadsheet.
Would I just need to export the Google spreadsheet as a JSON file?
yes you can.
https://developers.google.com/sheets/api/v3/data you can retrieve google spreadsheet data using API and present the returned data in Chart.js.

Is it possible to extract data from these websites that don't output data in the HTML source code?

Many years ago I used to use Perl and Python to crawl through some websites by looking at data in the HTML source code.
Now I would like to do another personal project that involves extracting numerical data from:
Table elements on this PredictIt Website
Individual graph elements (x and y for each) on this PredictWise Website
Individual graph elements (x and y for each) on this Five Thirty Eight Website
None of these web pages' HTML source code contain the numerical data. Is there a way to extract these data? If so, where?
I feel like there must be a way, because these are all front-end information that the browser needs to render the charts and graphs.
(I can't find raw-data provided to developers on these webpages. So I guess I have to extract data myself.)
The table elements on the first link are indeed readable from the rendered HTML. If using Chrome, right click on the text and choose "Inspect." The Chrome debugger will show you the exact HTML element that contains the data.
The other links are more difficult. I don't see a way to view the data in raw HTML, but on the second link I am able to see the JSON data supplying the graphs with their data from the server. You may be able to parse that for your project.
The data look like this:
{"id":"1687","name":"Hawaii Caucus - DEM","notes":"","suppress_timestamp":"0","header":["Outcome","PredictWise","Derived Betfair Price","Betfair Back","Betfair Lay","Pollster","Derived PredictIt"],"default_sort":"2","default_sort_dir":"desc","shade_cols":["1"],"history":[{"timestamp":"03-17-2016 1:03PM","table":[["Hillary Clinton","43 %",null,null,null,null,"$ 0.425"],["Bernie Sanders","57 %",null,null,null,null,"$ 0.570"]]},...
Open the Chrome debugger on that website and goto the Network tab. From there, look for requests for "table_xxxx.json" . You can see the URL for requesting the data, and the raw data returned from the server.
Hope this helps!

dataformat for multiple lines in bokehjs

I am using just the BokehJS part of Bokeh since i am building a more production oriented system.
Unfortunately it seems that the actual BokehJS part of Bokeh is not documented that much, which makes it difficult to find the needed information, such as how to format data for the bokehJS object.
What I am trying to do is to make a simple line graph, however instead of having just one line i would like to have multiple lines, and the possibility of making a legend describing each line. Its a very basica plot, however i did not find any way to do this in bokehJS.
In order to make a plot with a single line i execute the following javascript:
Bokeh.Plotting.show(
Bokeh.Plotting.make_plot({type:'line'}, {x:[1,2],y:[4,5]}, {})
,'.mydivcontainer');
How do i alter this so that i can have 5 lines in the same plot as well as a legend, basically similar to this which is written in standard bokeh:
from collections import OrderedDict
import pandas as pd
AAPL = pd.read_csv("aapl.csv", parse_dates=["Date"])
MSFT = pd.read_csv( "msft.csv", parse_dates=["Date"])
IBM = pd.read_csv( "ibm.csv", parse_dates=["Date"])
xyvalues = OrderedDict(
AAPL = AAPL[("Date", "Adj Close")],
MSFT = MSFT[("Date", "Adj Close")],
IBM = IBM[("Date", "Adj Close")],
)
df = pd.concat(xyvalues, axis=1, names=["l0", "l1"])
from bokeh.charts import TimeSeries
ts = TimeSeries(
df, title="timeseries, pd_input",
filename="stocks_timeseries.html")
ts.legend("top_left").show()
(Taken from the release note: http://continuum.io/blog/bokeh-0.6 )
Thank you very much in advance for your help
it's definitely true that the developing and documenting the JS interface has lagged behind the other interfaces (python mostly, but also scala and Julia and soon R). We plan to improve this, but as you can imagine there are lots of competing priorities.
But I will mention another option, in case it is useful to you. It is possible to create the plot JS from python, and then use the JS directly. That is you only use python to set things up, then you can throw the python away. You can use functions in bokeh.embed to turn your python plot object graph into JS that you can embed however you like.
With more recent version of Bokeh, you can also easily grab ahold of the plot objects (for instance data sources) to update the plot directly from JS. See, for instance:
https://github.com/bokeh/bokeh/blob/master/examples/embed/spectrogram/spectrogram.coffee#L187
ahhh now i have seemed to figure this one out.
To enable multiple lines, it seems i can do like this:
Bokeh.Plotting.show(
Bokeh.Plotting.make_plot([{type:'line'},{type:'line'}], [{x:[1,2],y:[4,5]},{x:[1,4],y:[2,5]}], {})
,'.mydivcontainer');
Great :)

Client side topojson rendering seemingly incorrect paths

I've been attempting to create a TopoJson file with consolidated layer data containing, among other layers, U.S. States, Counties, and Congressional Districts.
Original .shp shapefiles come from the Census Bureau's Cartographic Boundary Files.
These were converted to GeoJson via ogr2ogr.
Then combined into TopoJson format via the node server side library, with quantization of 1e7 and retain-proportion of 0.15. Up to this point there is no indication of any problem.
I view the final topojson file using mapshaper and things seem to look OK:
But, when attempting to render with the topojson client library and D3.geo.path(), I encounter some strange paths in the congressionalDist layer: (notice the large rectangular paths around the continental US, AK, and HI)
A working version of the page can be found here: http://jsl6906.net/D3/topojson_problem/map/
A couple of relevant notes:
If I change my topojson generation script to remove simplification, the paths then seem to show correctly via the same d3.js page
If I only keep the congressionalDist layer when creating the topojson, the paths then seem to show correctly via the same d3.js page:
After attempting as much troubleshooting as I've been able to handle, I figured I would ask someone here to see if someone has experienced any similar issues. Thanks for any help.
As I mentioned in the comments, I had noticed that the three offending rectangles all were bound to data with an id property ending in ZZ, while all other paths had IDs ending with numbers.
After some Google searching, I came up with what I think is the answer.
According to this document on the census.gov website,
In Connecticut, Illinois, and Michigan the state participant did not assign the current (113th)
congressional districts to cover all of the state or equivalent area. The code “ZZ” has been assigned
to areas with no congressional district defined (usually large water bodies). These unassigned areas
are treated within state as a single congressional district for purposes of data presentation.
It seems that these three undefined districts would account for the three rectangles. It is unclear at what point in the process they cause the issue, but I believe there is a simple solution to your immediate problem. While searching for information about the ZZ code, I stumbled across this makefile in a project by mbostock called us-atlas.
It seems he had encountered a similar issue and had managed to filter out the undefined congressional districts when running ogr2ogr. Here is the relevant code from that file:
# remove undefined congressional districts
shp/us/congress-ungrouped.shp: shp/us/congress-unfiltered.shp
rm -f $#
ogr2ogr -f 'ESRI Shapefile' -where "GEOID NOT LIKE '%ZZ'" $# $<
I'm betting that if you run your ogr2ogr on your shapefile using the flags shown here it will solve the problem.

Categories