Linking dygraphs.js to d3 charts - javascript

I'm currently working on building a charting web application, and I've chosen dygraphs for my time series data (Two weeks of data at an hourly level, if anyone finds this information relevant). On the same page, I also have a couple of customized d3.js charts that pull metrics from the same database as the trendline.
I want to know if I will be able to link the selection on my dygraph line (Supposing I zoom in on 3 hours worth of data, i.e., 3 rows) - to my d3 charts, so that the data in the d3 charts also get filtered down to the date range chosen by zooming in?
I'm quite the amateur here, and apologize if my question seems vague, but any sense of direction would be helpful.
I'm guessing I should be able to do this by modifying some class in the dygraphs source code, or reference the same from my d3 chart.
Thanks.

You shouldn't have any trouble doing this. There's no need to modify the dygraphs source. You can implement handlers on the dygraph object (zoomHandler or drawCallback, most likely) which update the D3 chart.
See this demo for an example of synchronization between multiple dygraphs.

Related

AnyChart stock chart - date extend overflow on X axis

I am building stock charts with AnyChart and I am stuck in a problem.
I get my data mapping directly from a third party data provider and it works perfectly. I have built a chart where users can draw, insert figures etc. The users are requesting a solution where they can draw into the future and scroll into dates later than the newest date in the data. The problem for me is that the chart date range selector is following the dates in the data mapping - so my question is if it's possible to set the date rangeSelector manually?
An example can be seen here: https://www.tradingview.com/symbols/OMXCOP-BO/
On the example you can just scroll to the right and into future dates even though the data is not following.
Does anyone have any idea how to make this work with anychart?
Thanks :-)
To achieve that you can use minimumGap() and maximumGap() functions. The article with live samples describes how it works.

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.

Javascript simple barchart with tooltip

I have some metrics to display, I need a simple barchart to show values for every day in month, and it doesn't need to have any labels or legend, when you hover the day, the data is displayed. I found this http://codepen.io/deegill/pen/macik which is something that I need but it cost 90$ smallest package. Does anyone have chart like this which I can use in my project?
A set of reusable charts using D3
http://nvd3.org/examples/line.html
If you want to make any chart I'd look at using D3. It's a pretty smart js framework that allows you to display data in a lot of different ways. Here is an example of it displaying a bar chart. And here is another example that uses time as the x value.
Google Charts API
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart
g.Raphael.js
http://g.raphaeljs.com/
Highcharts.js (Free for non-commercial use)
http://www.highcharts.com/
I've been using Flot for a few years now, and I have no complaints. Might take a little effort to get started, but we use it commercially, and it's great (and free).

Editable javascript chart - interactively resize bars or pie sections

I need a library or a framework plugin that can draw charts that can be modified real-time by resizing part of the chart itself. Is there such thing?
I plan to use it for adjusting the chart values. Mostly for controlling amount allocation.
For example. You have 4 hours and you have 5 distinct types of tasks. I want the user to be able to allocate time for each task and see visually what's the impact on the available time.
I think Visually Editable Charts of Fusion Charts is what you are looking for.
We use various charts from http://code.google.com/apis/chart/ for our web app, and it works great.
The chart are loaded once, and refreshed, each time the user change a value, with new data through their Javascript API in real-time.
gRaphael should be the most popular:
http://g.raphaeljs.com/
I can recommend HighCharts:
http://www.highcharts.com/
Found a few options: http://jamesalvarez.co.uk/uncategorized/draggable-piechart-js-class and http://www.shodor.org/interactivate/activities/PieChart/.
The first one looks the most promising.

Free JavaScript/JQuery with Scatter Plot category naming functionality

I am looking for some sort of a free JavaScript/JQuery graphing library that has a lot of scatter plot functionality. Ultimately, I want to link the plot up with a SharePoint list and drop it in a collaboration site; in such a way it will dynamically update.
My difficulty is that I want a scatter plot where I can change the x-axis and y-axis values to strings (i.e.; x-axis employee names, and y-axis proposal names).
I looked at a whole bunch of libraries (i.e.; flot, Dojox, most of the other options in this thread JavaScript Chart Library), but cannot find this funcitonality in free software (pretty sure Fusion Charts has it if you pay).
I also realize what I am creating (a scatterplot with fixed grid employee & proposal name values) is basically just a chart... however there's nothing--to my knowledge--that will allow me to make a dyanmically updating chart.
Can anyone offer any library tips, or advice? I am not experienced enough to know of any "work arounds" for this problem.
jqPlot can do it: jqPlot Home
Scatterplot Examples

Categories