Raphael line graph animate and update graph - javascript

im new to the raphael library so im still learning my way around it, i was able to setup my graph the way i want it, but now im trying to do the following 2 things but im having dificulty finding docs / examples for what i want.
here is what i have so far
http://jsfiddle.net/PA67H/
animate the inital data points when the graph loads with something similar to this
animate a change in data points, so when the button is pressed the data source is changed to var2 but in an animated way like here

You are looking for http://raphaeljs.com/reference.html#Raphael.animation
may be you can find out what you wanted.

Related

How to use multiple Curve's Stroke style at The Same Time - ApexChart

I got a problem while using ApexChart and struggling so much on how do I could remove the one that I give 'X'?
So basically, what I want to achieve is like the light blue line that I draw.
On ApexChart, there's a specific styling for this - Curve's Stroke.
I want to use Stepline and Straight at the same time but I don't know how. So what I did is using 2 different series (dummy random data) with line and area chart type, then the first one using stepline curve and the second one is using straight.
It turned out I almost achieving what I need to do but, the problem is the 'X' blue mark.
I didn't want it like that. I want it just start a straight line after that specific last value/category/you know what I mean.
Is there any workaround for me to look? Can anyone help me?
I've been struggling about this for days and I'm getting crazy about it.
Reference: Apex Chart Demo's Docs

Javascript: How would you approach created a blob that can be modified by sliding nodes along an axis

I am looking for tips on how to approach creating an editable graphic that looks like a pie chart and can be modified by sliding nodes along specific axes. The resulting graphic would look like the image below (created in illustrator).
The closest I have come to finding something similar is a windrose chart.
I have thought of using Bezier.js or something similar but wondering if anyone might know of an existing library that might get close to what I need.
Thank you.

Create column chart with sub elements for each bar

I need to create a data visualization in a web application, I wanted to use Highcharts since I have some previews experience, the problem is that the visualization I need to create is more custom, based on my investigation I'd need to use something like D3 which allows to do more things, but maybe someone has done something similar using a library with a smaller learning curve.
Is it possible to create a visualization like this (the image to the right) without using D3? Each of the small boxes inside the bars is an element that should be clickable to show it's details inside a card-like HTML element.
I saw this example with Highcharts, but it's not quite what I want and I'm not sure if what I need can also be done.
Thanks in advance for any help.

Creating a force directed graph in Babylon.js

I am attempting to create a force directed graph in my Babylon.js project and was wondering if anyone had suggestions as to how I should go about that. I am looking into the barycentric method and the Barnes-Hut method but am wondering if there are any simpler ways of doing so (such as how it is done in d3.js by typing d3.layout.force) or if I should continue on with one of those methods above. I need to add the nodes on top of a plane within a 3D area but the y values of the nodes will remain constant so it is more of a 2D problem.
I also looked into Springy (http://getspringy.com/) but I am not sure if it would be possible to implement that into Babylon.js due to the 3D nature of Babylon.
If anybody has a suggestion to solve this problem I would greatly appreciate it.
Thank you.
I would break this problem into multiple pieces.
Wrangle the data using an off-the-shelf algorithm into coordinates, then feed the coordinates into Babylon.
A really cheesy way to do it would be to let d3-force do its magic in a hidden SVG, then feed the graph data into Babylon.
Yes, it's a hack, but it would seem to be fast and easy!

Drawing lines on an interactive column chart

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 -.-

Categories

Resources