Drawing lines on an interactive column chart - javascript

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

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

Combining calendar and chart on the same timeline, single SVG vs HTML+JavaScript Chart Library

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

Javascript bar chart, where bar is split into triangles

I am having kinda a hard time to find a solution for a special type of bar chart.
The graph:
https://i.stack.imgur.com/wIHWz.png
After a long time of searching the web, I wasn't able to find a good solution for this. I was using chart.js and the first thing I tried was to fill a bar with .svg, but sadly it is possible to fill it only with pattern. Another thing I thought may work was to design my own bar via two separate stacked line graphs, but there I wasn't successful becouse of the dependency on xAxis (to create a triangle I would need three labels, and the result was still total ****).
I would really appreciate if anybody would be helpful and suggest an idea how to go around this as I am absoulutely out of ideas.

Highcharts: Best way to show related events to data

I work with a lot of time series data that comes from various devices. In this post, I will just use an example of battery data because it's nice and simple. I can easily take the battery data and chart it over time in highcharts using the DateTime axis. I always have other event data that is important to know about because it gives you context to what you are looking at but doesn't need to be charted. As an example, Someone turned on or off a light. Knowing that gives you context why the battery usage has changed. Today I put those in as a plotline. The problem with a plot like is that you are very limited on interacting with it. You can have a label but when you have a lot of plot lines close together the labels are a complete mess. I also can't really do a nice tool tip that would give the user more information about what they need to know. An example is they see the plot band and they see it was a "light turned on" event and they do something and they can see that a light with x watts turned on pulling Y amount from that battery. What works well for a plot band is that when I zoom in they are respond to the change.
I am looking for a solution, a pattern, an approach to allowing the user to display their time series based data with some related events that are overlayed over it. This approach would allow the user to dig into it a little bit to get context and a better understanding of their time series data
I don't know if this is something that is solved with Highcharts or if it's just a general UX problem. I am definitely looking for some help. Hightcharts is here to stay in this project but I can't seem to solve this problem
This is a sample battery chart that I made for this post. these are grey plot lines for events that are happening a lot and are really close together. As you can see the user has no context oh what they mean. They do know something has happened and can go crawl the data to see what those plots might be. In the real world, they know that grey is a debug event and they can dig into it from there but this really isn't a solving the problem
You could:
1. use a separate scatter series to mark events with a specific point marker, which allows you to leverage the legend, data label, and
tooltip functionality automatically
2. use the plotLines / plotBands, and create custom mousein/out events to
mimic a tooltip
3. use the flags series type from Highstock
http://www.highcharts.com/stock/demo/flags-general
4. Use the Annotate plugin found in the Highcharts plugin repository
http://www.highcharts.com/plugin-registry

Making a colored box plot without whiskers using D3

I am new to D3 and am hoping to show a range of prices (lowest price, median price, highest price) for different services using a graph similar to what Glassdoor uses (see this example: http://bit.ly/1koKeLL).
It's a horizontal bar chart that has a variable margin on the right and left so that it graphically shows the low, median, and high data points. Does anyone know the best way to implement this, especially for someone just learning D3?
I think this guy implemented very well a chart that is more complex than your chart:
Bullet Chart in D3
However, if you want to get to know D3, and to use it in an intelligent and productive way, my strong advice is:
Don't take shortcuts.
This means that before you start implementing anything, you go through at least one good tutorial, and take at least brief look at D3 documentation.
A good tutorial is here. Go through ALL 20 lessons. Implement ALL examples on your local machine. You can do it in several days. And only then you come back to your example.
Don't be seduced by stories that you can find on the net like "I started with D3 yesterday, and now I create craziest visualizations". They are either lies or profound ignorance.

Categories

Resources