So I am trying to devise a way to create a nifty chart in which the user can zoom. I want to try to create an effect that as the user zooms, the data will become more granular. For example, say we are looking at a count on a date/time.
when you're at default zoom, which is say 3 months, you will see 1 data point every 24 hours. I am trying to get it as you zoom in, and see a smaller chunk for that data to get more granular. Like if you're looking at a day, each hour will get its own data point.
Do you all think it's possible to achieve an effect like this using Jquery Flot? I have all of the data broken down into hours at the beginning, it's just a matter of calculating how much of it should be shown.
I already have the zoom functionality working, but just need to figure out how to make the data change as well.
Thanks!
Flot won't do this automatically; you would have to register a callback on zoom that iterates over the original array to pick out, i.e. every nth sample, then redraws the plot using the results.
Related
I'm trying to combine a calendar with a chart on one webpage. They need to be on the same timeline (for example to mark the current day with a line). They do not show the same data (So the calendar events are independant from the chart values).
Illustration of how it should look (The final solution would have different views, per week, per month, per year)
My first instinct was to use a HTML table (or <div>s formatted like a table) in combination with a chart library, the only difficulty there is getting both variants onto the same timeline (They need to line up perfectly).
That's why the idea of using SVG came up (which seems to be the prominent idea in the team), but drawing every table cell with <rect>, taking into account position, border width and then also manually positioning texts (and also clipping them if they get too long) seems like a major drawback.
Is there any sane and straightforward way to implement this? I either have to use a third party chart library and try to perfectly line it up, or I draw everything into one SVG, but then everything down to the position of each text element needs to be calculated. I'm afraid if we go the SVG way every little change to the design could suddenly need hours of work (Besides supporting different chart types, combining line and bar charts, possible animations and so on).
I have some date each has plus or minus value (for example assets or
liabilities)
So at first I integrated nested piechart by amchart
However it has some weak points, you can't get the defference of assets and liabilities at a glance
So next idea is to use like this,discussed here
However I cant find the good sample for amchart4.
Is there any good sample or close sample???
you can do something like this with d3pie chart(see attached image). This is the site: http://d3pie.org/website/examples/donut.html
Just set the stroke to 1 and the fill to white for example. The rest of the stuff I guess is some Math, and you should manipulate the DOM to change those.
The pie chart you want to do, beside looking cool, doesn't apply to this scenario/calculation, especially the percentages are misleading (total being the sum of absolute values of all numbers).
Pie chart is suitable for visualization of all items from the same category. For example, your spending for the month:
which includes Utilities, Transportation, Groceries, etc.
Would a ColumnSeries make more sense in this case?
demo: http://jsfiddle.net/davidliang2008/tna84zer/
I have to program a machine with multiple values throughout the day, and besides, I need to graph a line with these values for intermediate values. To this should link the last point on the graph with the first.
At the moment I created an extra point at the start and end to repeat the last and the first value respectively but in the next day and the previous.
But the problem comes when I change these values and I want to render the graphic (it is an AngularJS application with draggable points plugin in future versions), for example when set the first point to 23:00. I should modify several points, including the extra, but it's very hard, because some of these points are calculated (circles), in fact, only have 3 points in this chart (squares)...
Is there any way to avoid these additional points (at the begining and the end) and use only those with real or calculated values? Have Highcharts some property to create a 24h "cyclic linear chart" or something similar?
Thanks a lot!
I try to create dynamic highcharts. I use series.addPoint. It works fine but my chart adds points and doesn't move like here - jsfiddle. It can be with 100 points on the screen.
How can I make only 10 points on the screen and hide old points?
http://api.highcharts.com/highcharts#Series
Series.addPoint()'s third argument is a boolean that enables shifting. If your series is not shifting, try setting the third parameter to true.
As for the second part, are you sure you want to "hide" old data? Generally old data should be shifted off the end in a real time graph (which I assume is what you're going for). If you have too many points, you can make your x-axis smaller via Axis.setExtremes(). http://api.highcharts.com/highcharts#Axis
I've been using the chart API to draw a cross sectional profile of a landmass, using a slightly modified version of the chart example shown here.
however, I now need to draw a line of sight between the two end points, as well as a Fresnel(1) zone between the two. can this be done through the interactive chart API? or is there a better way to get this done?
also, I would like to 'select' the first and last entries to display their elevation, however my code doesn't appear to do anything:
Chart.setSelection([{row:0,column:null},{row:Results.length - 1, column:null}]);
After finding some other problems with the visualization API, I just gave up and did the whole thing using Raphael instead, works way better :D
EDIT: didn't know you couldn't answer your own posts within two days :| kinda of annoying since I've spent like a week straight trying to fandangle the bleeding chart -.-