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

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.

Related

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.

Displaying different graphs in the same stock panel (amCharts)

I'm using amCharts to display graphs and I need to display 2 graphs from different data providers it the same Stock Chart panel.
In amCharts tutorials, they displayed the graphs from the same data provider (one dataset), so when I tried adding another dataset, it didn't work! It only displayed the first graph.
Could anyone give me a tip or something?
JavaScript Stock Chart will display a copy of a graph for each selected or compared data set.
So if you need to display a graph for several data sets, make sure the following two conditions are met:
compared is set to true for the second data set.
comparable to true for the graph.
compareField is set for the graph.
Here's a working example:
http://codepen.io/team/amcharts/pen/1706af51ff69cf22b2d448cfb604b55b

Display a Excel chart in Html page

I have a EXCEL file containing multiple Tables and Charts.
I want to create a web page to display a particular Table and a Chart. I used java script to display the table.
But cant find a way to display the CHART. By chart i mean it contains a pie graph or bar graph.
Is it possible to display using java script? Or do i have to use JSP/something else?
Take a look at Google Chart Tools. Here is an example with javascript source code. If you are building the table on the server side, you may instead want to pass the data down JSON encoded and then build both the table and chart at the same time without having to pass the data twice.
An easier way would be to use a free tool like oomfo, which is a PowerPoint plugin to create charts. It lets you pull data from excel, create charts and then export the entire slide as HTML - the charts are in Flash and JavaScript (fallback). Just add a line of code in the output web page to render JavaScript charts only.

Refresh Google Charts without redrawing the entire chart?

I'm creating a page where javascript creates random numbers and then draws a Google line chart from it. the idea is that data will continue coming and the chart has to be updated. What I'm doing right now is redraw the chart for every new data addition, which means redrawing the entire chart 20 times a second. This however slows down the process considerably.
What I'm wondering is, is there a way to add a row to Google Charts and take out a row (like shift and push) and have the chart update without redrawing?
If that doesn't work do you guys have suggestions for live data visualization tools?
Google charts are images served by Google's API. There's no way to change just part of an image, you have to load a new image. If you want a chart that changes, look at HighCharts. It's a Javascript charting package that has examples like you want. D3 also is very powerful, but requires more work.

Scrolling in jqPlot

I am using jqPlot to show candlestick chart and the data is from XML.
I retrieve data from XML and put it into an array and then jqPlot creates a candlestick chart from that.
But the XML file contains lots of data so in the chart values are overlapping (with fixed width).
Is it possible to make a graph of lets say 10% of data and place a scrollbar and on every tick of scrollbar we rebuild graph with next data or there already exists such functionality of scrolling of graph/chart in jqPlot.
Please help me to resolve this.
Perhaps you can try Jonathan Cook's jqplot.annotatedTimeline.js available from the following URL:
https://bitbucket.org/j5bot/jqplot/downloads
You can see its features in action from:
http://screencast.com/t/mHY5eUV99XaT
Although I haven't tried this plugin yet it looks very good!
Its better to load XML at once, but not give the data at once to that jqPlot chart. Just make sure you are passing part of the data to jqPlot. Once you assign data to chart then go for the scrolling of data using jQuery or something like scroller code.
Whenever you scroll on this try to refresh or regenrate the chart by only the selected data.

Categories