Beginner here, I am new to Javascript code and have tried to learn Google visualisations from the documentation that Google provide but I am struggling to get to grips with it.
I am trying to create a customisable google scatter graph with the data imported from this spreadsheet
https://docs.google.com/spreadsheets/d/1A2eZztlcZCCwIrlrYowU6aC3LpD10qDNWwZ9SbtPUxU/
and use the 3rd column as a tooltip (the names).
With this, I would then like to add a search bar to live search the results. For example, searching "Steve" will only show his co-ordinates on the graph.
Is this possible and will I need a dashboard to do it?
Also what is the basic html/javascript required to get the chart? The google documentation explain the customisation of the tooltip well but only when you are inputing data directly into the code rather than importing from a spreadsheet.
Any help would be greatly appreciated!
Related
I am making a component in Vue.js and I aim to make a reactive component as shown in the image. I don't know how D3.js works, if it is possible to achieve using D3.js then I will learn.
My requirement is:
When I click on any of the pie in the pie chart, the corresponding data related to that should be shown in different SVG. Is it possible to implement using D3.js
If this is possible with any other open-source library, please feel free to mention it.
thankyou
I'm trying to create a grouped barchart graph but looks like there is no built in solution for it on chartjs, has anybody such experience before with grouping dataset by label, please check screenshot
chart trying to achieve
Idea is to have 4 different datasets with at least 4 data each and show in graph grouped.
Trying to achieve this with latest chartjs but I'm open to change it if there's easy way to do it with different library.
Thanks in advance
Here is a link to the feature request you're looking for(I think).
Chartjs Feature Request for data grouping
Here is a link to Google Charts.
I did a little digging scrolling through their demos and it looks like they do what you're looking for.
I've been playing around with the Timeline chart from Google Charts. It's great because it's very easy to use. However, I stumbled upon quite some limitations:
It's not possible to adjust the height of the bars, or the amount of margin around them.
I cant format the labels of the hAxis. No fonts can be applied, or textcolor, or font-size. And for some reason, two of the labels are in bold. (see image below)
It's not possible to add a text column on the right containing an extra set of information (for example, the sum of all hours in this row)
I can't move the hAxis to be displayed above the graph instead of below
etc...
Here's a link to the image:
For this reason, I was hoping some of you could introduce me to an alternative tool or api that I can use. It needs to be easy to use, and free/opensource. I've Googled for numerous chart tools, but almost no tools provide this SIMPLE timeline type of chart (note that it's not a Gantt chart, but it looks like one).
There are a few Gantt chart Javascript libraries, but none seem to be close to the Google Timelines chart.
The only chart I could find that is similar is Visavail.js. It builds upon D3.js and is open source, so you can modify it to your liking. Check out the "Custom Category Data" example. It's a lot like a Google Timelines chart.
For your convenience, I've added a screenshot of the example below:
If you are familiar with d3.js, here is a d3js based example: http://bl.ocks.org/bunkat/1962173
We are developing a web application using Spring+Tiles. We have a requirement that we have to create a bar graph in a jsp page. We searched a lot on web regarding this issue. Means how we can create a bar graph using Open source Charts API. We found many suggested APIs like JFreeChart, charts4j and etc.
But we are not sure which one to use. Actually our requirement is we have to create a bar graph which can be drillable.
Please help us. If you could give any examples that will be highly appreciated.
Thank you very much in advance. Thanks a lot.
I would recommend you to use the rest services and send the json to highcharts OR D3.js OR DDChart, its the best thing to do in your case below link can do what you want :
http://www.highcharts.com/demo/column-drilldown
Highchart (licence) : http://jsfiddle.net/yPVX9/2/
D3 (free) : http://jsfiddle.net/mcuepavh/1/
DDChart (free) : http://kiersimmons.com/DDChart/index.html
You can try FusionCharts for a drill down chart.
Have a look to this and you can use this in your application : Fusion Charts Linked Charts. Regarding licensing issues,you may get in touch Sales Team.
Apart from that, you can use Raphael.js . Start from the basics say try creating a small rectangle, fill some color, opacity, binding some events,etc. With a day effort you can make a simple bar chart. Once you make a bar chart, attach an event to clear your container and redraw another bar chart with the drill down data. Thats the concept you need for your drill-down.
Having said that, I would still recommend you to use Fusion Charts because they takes care of some smart things - like space management of the bars, the intervals, the colour codes of the bars(if not hard-coded), axis part... Its a finished product which abstracts you from the technical obstructions and give your application a beautiful add-on.
I'm trying to create a map that shows county/district areas using Google Maps that will allow users to click on the area to retrieve relevant pop up information.
I have two datasets that I think would help, one being a list of UK Postcodes which would in turn allow me to determine different postal areas and the other is a dataset from Ordance Survey that contains province borders (county/district borders).
I've looked into KML Files and ImageMap but I'm not sure how to create these areas using the data I have?
I'm looking to achieve the sort of map that is used here:
http://content.met.police.uk/Page/YourBorough
Any help is greatly appreciated!
Thanks.
The way to work with Google maps is by using their api closely. You cannot go with simple image mapping.
Try those two links for starters:
https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
and
https://developers.google.com/maps/documentation/javascript/reference#Polygon.
In short - you may need to draw a polygon for every area, bind a click event to it, then show Info Window with the relevant information for the user.
In case you're new to google maps, you may need to take more time inspecting their Api and the examples they give.
Best regards.