How to embed a google-spreadsheet chart in a wordpress? - javascript

I would like to embed a chart in a wordpress post.
I am using the script generated by using the publish function in google sheets.
If I add the generated script to a generic html page, I can see the chart.
If I add the generated script to a wordpress post, I get the following error:
"All series on a given axis must be of the same data type×"
Do I need to modify the script or something else in the wordpress page to correctly visualize the chart?
Thanks
here is the code generated by Google-sheets:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AgtmZPWzQ7lldEt2S2VLajBRQVNFLV9pRFY2bTRQLVE&transpose=0&headers=1&range=A2%3AB1010&gid=0&pub=1","options":{"titleTextStyle":{"bold":true,"color":"#000","fontSize":16},"curveType":"","animation":{"duration":500},"width":1270,"lineWidth":2,"hAxis":{"useFormatFromData":true,"title":"Data","minValue":null,"viewWindowMode":null,"viewWindow":null,"maxValue":null},"vAxes":[{"useFormatFromData":true,"title":"\u00b5g/m\u00b3","minValue":null,"logScale":false,"viewWindow":{"max":null,"min":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"logScale":false,"viewWindow":{"max":null,"min":null},"maxValue":null}],"booleanRole":"certainty","title":"Via Ariosto, SO2","height":469,"interpolateNulls":false,"legend":"right","focusTarget":"series","useFirstColumnAsDomain":false,"tooltip":{"trigger":"none"}},"state":{},"view":{},"isDefaultVisualization":false,"chartType":"LineChart","chartName":"Chart 1"} </script>

Another option is to use a WordPress plugin explicitly designed for integrating with the Google Charts API. The Inline Google Spreadsheet Viewer plugin for WordPresss uses a Google Spreadsheet as a datasource and lets you easily display that data in any of a number of Google Charts and graph visualizations.

Related

Getting Wowhead tooltips to function in Excel spreadsheet through Javascript

I am trying to use the instructions at https://www.wowhead.com/tooltips to integrate tooltips through JS to my spreadsheet. The script provided by the website is attached below. I want to be able to use the item codes they use to visually show what the items are when compiling gear lists. An example item code would be [item=14145] pulling from their website to generate the proper tooltip.
How would I properly load that into Excel to utilize the item codes?
<script>var whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script>
<script src="https://wow.zamimg.com/widgets/power.js"></script>

Google map Joomla error

Im trying to use google map on this site in the footer where the BRANCHES CONTACT INFO are it should be on the right next to the address but there is a conflict or error not sure what the problem is
here is the site http://consultgp.com/en/
When i look at your website, i've notice you've got JS error
ReferenceError: google is not defined
basicly you don't have included google map api file, at head tag, you should have something like this:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
All because you use 'Modules Anywhere' inside Custom Module. To fix it, you need to edit your Custom Module, go to Option Tab, and change 'Prepare Content' to Yes.
With this option, all plugins, and libraries will load.
More about this option you can find at joomla docs.

Plotly hover events in a IPython Notebook

I'm trying to display a small picture when hovering over a specific bar of a bar-chart. This using plotly inside a IPython notebook.
Plot.ly have a nice example of this using javascript here.
I can easily embed this example inside the notebook using the approach shown here, but I really would like to use the plot from the notebook.
I think I am almost there:
iplot({'data':data, 'layout':layout})
is the python code to generate the plot; it embeds directly a svg in the cell.
In the javascript example, an iframe is generated:
<iframe id="plot" src="..." seamless></iframe>`
The javascript can then get the iframe by id:
Plot.iframe = document.getElementById("plot");
I've tried a few things without success; the iplot doesn't create any iframe. How can I link the javascript to the python code?
i.e. what 'id' can I use?
Thanks,
N

How to change the data in a force layout graph dynamically ? D3

I have a few JSON files I can use with my force directed graph and I wish to choose which one I run.
I can just change the name of what JSON is read in the HTML file
<script type="text/javascript" src="networkA.json"></script>
to
<script type="text/javascript" src="networkB.json"></script>
but I wish to do this dynamically.
So when I first load the SVG my choice of data pops up and I get to choose which one I want the force directed graph to run off.
Also, wish to change this when its running, but knowing how to do the start up will probably answer that question.
Here is a perfect demo that can change dynamically:
'http://projects.flowingdata.com/tut/interactive_network_demo/'
but I wish to do something similar on a force directed graph
Use d3.json to load the data dynamically based on UI selection, as documented here:
https://github.com/mbostock/d3/wiki/Requests

Google Charts - Trying to add links or any form of custom html in popup

Is there any way to have links in any part or a google chart?
Or embeded html?
I would idealy like to format the pop-up with my own html.
some(3) and other(4) should be links.
This is the closest I could get to what I would need Dynamic icons.
By reading on the net I am starting to think that my best option would be to not display google's popup and display a custom div instead.
Edit 1:
Google themselfes have a clickable link "Create new annotation" on their google analytics reports, so anything like that would be great.
What you want is the Annotated Time Line from Google Visualizations. Take a look at the first configuration option. :)
http://code.google.com/apis/chart/interactive/docs/gallery/annotatedtimeline.html#Configuration_Options

Categories