I have to implement some graphs in a project I am building. I am currently studying what graph solutions I have, as I do not plan to code the graphs from scratch.
I ran into GraphJS and it seems to have everything I need. I should mention that the graphs are not complex in data they hadnel, but in the way they looks. Therefore we reach the question: can the tooltips of the axis be customised? I have to implement something like this
Better said, I need every second day in a 30 days span to not be displayed, but in its place to be shown a grey line. It is possible to achieve something like this with ChartJS?
I have read the documentation, I have not wrote any code as I am looking to find the proper library to use. On the same note, I do not seek an answer from someone providing me code, merely a "yes" or a "no".
Related
Summary
I wonder if anyone else has had this requirement and could steer me in the right direction. I am currently working on getting a chart library implemented for a crosstab BI that allows multiple groupings on the X axis.
Example
The functionality I'm trying to achieve works¹ in Spotfire as shown here (dev data, not live!):
With the colours representing the columns from the crosstab:
¹ - the rendering of the labels is a bit funky, but the grouping works
Requirement
I am looking to replicate this in (at minimum) JavaScript, preferably with a premade React library if possible. I'm currently looking at d3 and in particular Nivo, as this has a nice aesthetic that has appealed to the team, but this appears to be limited to grouping only on 2 levels (for the example above, I could group by Country, but I am then unable to group by gender as a sub-group).
What I've tried
My solution so far is to merge the remaining layers, so for example in the France group we'd have Male - Not Tested, Male - Mutant, Male - Wild Type, etc. The problem this presents is that I need to allow up to 6 levels of grouping - the example shows 3 levels. (6 levels is rare, but I need to allow it as a requirement)
Plan
My next steps if I can't find a library to do it, is to branch off Nivo and try to modify it to implement it myself, but of course as we all know, this conflicts with the time we have to implement this. I would really appreciate hearing from someone that has had to deal with this before, and what solutions you came up with.
I think you need to checkout AmCharts, it offers one of the best charts libraries with a very rich API that allows you to perform several combination
here's an example for nested Value Axis but you can also generate similar thing for XAxis
https://www.amcharts.com/demos/multiple-value-axes/
I have two plugins, one which displays a horizontal line across a chart (example image show below) and one which displays a label inside a donut chart. In both cases when the tooltip is triggered for the base chart, it displays beneath (i.e. lower z-position) the plugin's drawing.
I know I can create a fully customized tooltip which might solve this problem, but wanted to know if there was a configuration I'm not seeing or a simpler solution.
I can post code if necessary, but didn't think it'd be useful.
I believe that you should have posted the code for clarity. Since you are talking about plugins, you have overridden at least one plugin method. One of the methods you have overridden is probably afterDraw. Overriding afterDraw would present the problem you mention, I believe. Try changing afterDraw to afterDatasetsDraw. Look at the docs for the plugin methods that can be overridden. You want the lines to be drawn before the tooltip is drawn, so drawing the lines right after the datasets are drawn seems like a nice solution. Maybe using beforeDatasetsDraw instead would be a nice solution too, depending on whether you would want the bars to be above the lines or not.
I am searching for a way to build a multi-edge graph with Javascript.
The edges have to be different in color and thickness. Data for building it comes from a json file.
I already looked into d3.js, But the forced layout isn't what I am looking for, so please don't link my question to solutions with forced layout!
The treelayout offers no multiple edges or does it?
Any other way to get 5 edges between every node wich show a different grade of flow?
Sorry for my bad English.
I'm building a modeling tool that contains 2 sets of sliders -- one set that changes the amount per month payment (at top), and one set that shows user the date their debt is paid off (bottom), effectively so that changes to one can be seen in the other:
modeling tool http://doufeel.com/model.png
I was able to use jQuery UI slider to generate the payment data that creates the line graph at the bottom (using D3) but now I realize that I will probably need to create both sets of sliders in svg using either D3 or Raphael to make this work smoothly. I'm hoping to find someone who has addressed this, perhaps created something similar and might be able to advise on the best approach. Thanks in advance!
Need to support older browsers? Use Raphael. If not then D3.
As a keen windsurfer, I'm interested in how windy the next few weeks are going to be. To that end, I've been writing a little app to scrape a popular weather site (personal use only - not relaying the information or anything) and collate the data into a single graph so that I can easily see when's going to be worth heading out.
I have the back end working but need a way to display the data. My scraper currently gives me two series of data which tell me how strong the general wind is and how strong it's likely to gust to. What I'd like to do next is display those two data sets as a pair of lines in a graph and shade the region between them.
I was considering using something like the flot library to display the data. The only problem is that I can't see a way to shade an area between two lines?
If anyone has suggestions of how to do this in flot or other libraries or graphing techniques (I have DJango on my server so anything pythonic or javascripty should be fine), I'd be interested to hear them. Ideally this will be a javascript solution to avoid having to serve up images.
Take a look at the Google chart API's. They make this sort of thing pretty easy. Without some example code, I would have a hard time giving you an example, but Google has nice one on the docs.
You should check out Dojo. It looks like it'd be pretty easy for you to do, just plot the bottom line with the same fill color as the background. That should get you the effect you're going for.
http://dojocampus.org/explorer/#Dojox_Charting_2D
I'd use open flash chart, you just have to create a JSON with the data and then you've to all the flashy coolness in your page....
http://teethgrinder.co.uk/open-flash-chart-2/