We Keep Coding

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.

html page getting hanged with to many d3.js radar chart

I am trying to create a radar chart dynamically based on the number of records coming from the server as json data.
For example: my json has 1000 records and I try to create radar chart to show the data but my html page getting hanged.
I tried it and it is working up to 50 charts.

This can't be fixed.
Every single chart you render requires a significant portion of processing time to be built. The more charts you want to render, the more processing time it will take. There's nothing you can do about that.
Either try to condense your data into (significantly) fewer charts, or render an individual chart when a row is selected.
Or, (tell your clients to) get a beast of a machine.

Merge two or more graphs using library

I am trying to make a dynamic graph something like as below:
Y-axis gives no. of users and x axis date range(For continuous graph )
x axis gives release of an algo on that date.(For discontinued graph)
I tried combined charts of highchart this and looked in google charts library.
Is there any way by how i can either directly generate a similar chart or merge two chart types in to one? Preferably using high charts or google graphs.
I guess we can merge two highcharts in to one but I am not very sure about it, also if we can Iam not sure how to do that.
Any help is appreciated.
Thanks

I am aware that you said "Preferably using high charts or google graphs", but I want to point out that this can be done very easily in C3.js using the "types" parameter to specify the graph type for each data item.
Demo: http://c3js.org/samples/chart_combination.html

I would suggest using plot bands to indicate release dates and types. You can dynamically add them using the addPlotBand() method (see http://api.highcharts.com/highcharts#Axis.addPlotBand). They would then overlay your "run of the mill" line chart showing number of users over time.
Assuming you have data that can distinguish between the release types, you could write code that adds a plot band of the desired color at the specific points on the x-axis.
I'd suggest making the plot bands have a from and to value thin enough (say, one interval or one date's worth) so it shows up as the thin stripes in your example.
You'd need to add a manual legend to show users what those colors mean, since plot bands wouldn't automatically show up in a Highcharts legend.
I hope this helps!

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.

Draw multiple DataTables in Google Charts LineChart

I am using LineChart from the Google Charts API and I want to plot two sets of data - one is observations and one is model outputs. The problem is that the model outputs are regular in time (hourly), but the observations can be sporadic and are not usually aligned with the model times.
I can't store them both as columns in one DataTable, as they are not temporally collocated, so I need 2 data tables, but I can't get LineChart to accept more than one data table!
Is there a way around this?
TIA.

The best way to do this would be to combine the DataFrames and leaves NULLs where the values are not defined. In your case, each row would end up having one defined value one null value.
Then when you plot, set interpolateNulls to True and it will connect the points through the NULLs which should give you the functionality you want.

First, you do have to get your data into one DataTable. There is no way to create a chart from more than one DataTable or DataView, or create a DataView from more than one DataTable (though there has been a request for this). How you get the data into one DataTable is up to you. It doesn't look like any of the data manipulation methods will help.
The good news is, once you have all the data in one DataTable, you can plot it even if the data sets are not aligned at the same time values. Just specify multiple domain columns using data roles. Search for "multi-domain" on that page to find an example.