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.
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'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
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.
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.
I have a table that makes extensive use of the features in Google Charts' Table Chart, notably, sorting by selected column and color gradients.
I'd like to add a sparkline column. Can anyone suggest methods for doing so? Google Sparkline doesn't appear to be at all integrable.
The only method I've come up with (I haven't tried it) is to create a set of images and set them as the CSS background, one cell at a time. Blecch.
I also have a need to show something like a pie chart or stacked bar per row in a column - something that shows gross proportions of the parts of a whole, with three to five parts. Here also, the Google chart tools don't integrate into Table, AFAICT.
Answers that suggest a different library that doesn't include Google table are fine - as long as the level of effort isn't too much higher, and a similar level of documentation is available.
I agree with Larry K regarding remembering the requirement to store/access the set of numbers that represent the points on your sparkline.
In terms of inserting it to the table, consider the image line charts api. You can easily generate sparkline images once you have the relevant set of numbers for them, and can embed the image url into a table cell, allowing it to render by specifying the allowHtml option in the table chart.
So, just making a cell with <img src='google.com?params=2&whatever=3' /> should do the trick.
You would write your own data formatter to display the sparkline rather than the contents of the cell.
The next issue is to access/store the array of numbers that you want to represent by a sparkline. -- Remember that a Sparkline represents a set of values, it does not represent a single column/value.
There are several ways to solve this problem--eg store the number set as a string; store a key that would be used to look up the number set; or the formatter could use other values in the same row to determine the number set.
Added On second thought, it is not clear if you have access to a generic formatter that can return arbitrary html as the format for the cell's data. I thought you did but perhaps not.