Search code examples
javascriptd3.jschartscanvasjs

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

Solution
    1. 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.
    2. 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.
    3. Canvas and D3 both support Arrays, Json and CSV formats.