i want to make graphs/ charts from my data, that is stored on Thingspeak (its a weather station project using arduino). Now, i want to be able to plot these data into graphs. Thingspeak itself does that, but the graph is non customizable.
What i want do do is to have some buttons and comboboxes to select for example certain time interval (days,weeks,months), be able to point on line in graph and it tels the stats for the one spot etc.
Is there any templates or web services that do that? Or tutorials on how to do that? I want to have these charts embedde to my webpages. Thank you for replies.
I suggest you look at Chart JS or D3, both good charting libraries.
Related
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.
I am currently working on the last page of my web form, which is the Dashboard. I followed this guide: http://www.sharepointblue.com/2015/01/using-chartsjs-with-aspnet.html?m=1 to implement chart.js graphs into my dashboard but it only shows me how to manually add data in. I am looking to have my axis and data points be pulled from the database. I've search around and just cant find out how to get the data directly from the database. If anyone could guide me in the right direction, that'd be much appreciated!
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).
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.
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.