interactive widget based dashboard in javascript - javascript

I have seven widgets (div/iframe). In first widget, I can select a date and other six widgets have date based data drawn on google map. I want to create a dashboard where if I change the date in first widget, other widgets reflect/redraw data accordingly on map rendered in them. i.e. Other six widgets should reflect/display same date based data on map as the date which is chosen in first widget. Is there any way I can accomplish it?

Related

High Charts Data Table not filtering data by range selector

I am using highcharts for charts. I have enabled the export feature and it has one option view data table. When you click on it shows a data table below the chart. The problem I am facing is that if I select a particular value from the Range selector the view data table still shows a complete dataset. The range selector has no effect on it.
How can I only display data that is given upon selecting a particular range selector value?
For example, if I have selected data for the last minutes and the chart is showing data for the 10 mins the data table should also show data for the last 10 mins, It should not display the entire dataset.
I think that this feature is not implemented in the Highstock. The data table takes all data by default, but the option which you want to have will be a really nice functionality. Could you report this idea on the Highcharts Github issue channel as a feature request?
Link: https://github.com/highcharts/highcharts/issues

Google charts with datepicker

Im currently creating a dashboard, I'm getting my data via
google analytics api which I already have stored in tables.
I now want to visualize that data in a google charts LINE chart.
I uderstand how to display the data in the line chart.
My question is: I have a custom datepicker. How do I fill in the h-axis
according to the currently selected date range in the datepicker, and have it change the date values?
I want it to be like so: embed api line chart
Thanks in advance!
I already found the answer. Just put date as a dimension when querying
and put it in the first column of each row to get it on the x-axis.
Mind to parse the json format date, because dataTable will not
recognize it as a valid date type.

Best way of manipulating data in d3/Canvas JS?

I am working in visualization dashboard, I am facing few problems
I am quite confused with what to choose among d3js and canvasjs. Though d3js has rich functionality in terms of good visuals I prefer canvas because its easy to create charts, if you still have any ideas for me to proceed further in choose among these(d3js & canvasjs) please help it.
Purpose :
I want to create a interactive dashboard with lot of cross filters over the visuals any suggestion ?
The mode of data call from API; should I get the data completely from the server and work on the data in the java script or should I get data for each and every chart separately.
If I get the whole joined data from database the data size is too huge (more than 2 MB) for a dashboard and if i get a precise data for the specific chart its less. An example might help for better understanding.
Consider I have data for sales view which contains multiple columns joined from different table and my dashboard has 4 charts
chart 1: Bar chart for sales by item group
chart 2: Pie chart for sales by sales person
chart 3: Line Graph showing the sales by hours (week days): trend of the sales at the shop
chart 4: Total Sales, Total Orders KPI
Data Collection : I can get data for each and every charts separately by REST API which will only contain data for that chart (or) I can get the data as a whole from the JOIN of the tables which will be huge (MORE than 2 MB, it grows as the sales grows).
Interactivity : As i click on the chart 1 (bar chart's) any item group the rest of the charts should get filtered according to the selected item group: (writing a filter js code will help, am curious about the preferred way)
Which method i should prefer for data obtaining and cross filtering.
Answering the above question will invoke more doubts
Thanks
CanvasJs is more of creating charts using canvas element of HTML5 and D3 uses svg. Which gives advantage to canvasJs over D3 as CanvasJs have quick response time, thus rendering is fast in CanvasJs. If you want quick response time and not much calculation/filters on data then you can go with CanvasJs.
D3 is more of filtering charts based on filters, which can be used in your case. And though you'll be dealing with sales data. You will be needing filters, so that once you apply filter to one chart the changes related to that filter should reflect to other charts. D3 uses crossfilters and has ability to filter out all the related information and render the other charts accordingly.
Canvas and D3 both support Arrays, Json and CSV formats.

Ways to freeze/Pause Shield UI Chart showing forex data flow?

I am using Shield UI JavaScript Charts to visualize forex data. The charts are being constantly populated with data which is displayed over even intervals of time. However I need to be able to turn off/freeze some of them. The charts themselves have no such functionality, so am looking for some ideas/solutions I can use.
There are two possible scenarios I can think of.
The first one is just to pause the data visualization so that once resumed, the chart having been hidden will have the same points as the others.In order to do so, you may use a checkbox and recreate the chart only if the checkbox is checked/unchecked.
The second scenario involves skipping those data values that have been displayed on the other charts. In order to do so you only need to place the data binding inside the checkbox checked/unchecked clause.Once resumed, the chart having been paused will contain less points compared to the other non-paused charts on your page.

append data to a google maps business location

I was curious to know rather google gives the ability to append data to a particular location on their map as long as it resides in your app. for example...
If I wanted to create a rating app that rates stores or restaurants. and customers wanted to look up stores in their location. They will be able to see my data within my app showing the ratings for that particular businesss.
Thanks...
Most certainly. You would need an independent platform that keeps track of your data i.e. ratings, comments, etc. In addition, you would have to manage the entire map yourself i.e. plotting the markers based on user searches and populating the info boxes when they click on a marker (if you need to). Most likely you would have a database that tracks latitude/longitudes of the restaurants. You could even use google itself to retrieve the restaurant info and overlay your own ratings on top of the map when you plot the points.
For instance here is a custom info box that you may use to display ratings etc.
One interesting feature I would add to the app is using HTML5's geolocation to automatically detect the user's latitude/longitude.

Categories