I'm using jqPlot for some charting. I would like to highlight regions of the background of the chart. I would like to specify rectangles bounded by the values on an axis that are the entire length of the opposite axis.
Is this do-able out of the box, or must I alter the code? Would this be a good usage for a plugin? Is there documentation on how to write one?
Update: Looks like the fill option on the series might be helpful.
Update 2: Or maybe the GridCanvasRenderer or the ShapeRenderer.
I implemented it myself with about 20 lines of code in CanvasGridRenderer. Works pretty well.
Related
I have a simple linechart with 2 lines. On hover, I would like to display both y-values in the tooltip that appears. I know I can accomplish this by writing a Javascript function that creates a custom tooltip for every x-value on the graph, but this seems so redundant to do, especially when the graph gets large. Since Google Chart is able to auto-generate the standard tooltip which contain both the x and y-value I feel like there should be an option to do this with built-in tools, is there?
Probably setting focusTarget to 'category' will do the trick.
See here for an example that uses it.
I'm trying to find a way to dynamically scale a chart's y-axis so the values are shown in single digits, with a exponential denotation at the top, effectively changing this:
To this:
Note, this works automatically in e.g. Matlab/Matplotlib/etc., but I'm struggling to find a solution with the web plotting frameworks (maybe my search language is wrong)... I know D3.js is not a charting library, but I'd be open to a solution that works with the frontend DC.js or the backend D3.js
Edit based on #Gordon's answer below, I get the following graph using this
chart.yAxis().tickFormat(d3.format('.1e'));
Is it somehow possible to move all of the e+6 to the top? Or do I need to write a custom scaling function and insert a separate text box myself?
In dc.js, the axes are straight from d3-axis.
Access them using chart.xAxis() and chart.yAxis(), and to reduce confusion, do this in a separate statement from the rest of your chart initialization.
You can use axis.tickFormat to control how the tick text is formatted.
You can use d3.format to do automatic formatting. It seems like exponent or SI notation might suit what you're doing, although it's not exactly the same as having the exponent in a separate text element like in your screenshot.
Putting it together, this is pretty close
chart.yAxis().tickFormat(d3.format('.1e'))
The tick formatting question comes up a lot. I wonder where we could put this information so that people don't have to ask.
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'm trying to recreate something like this:
In other words I need to make a heatmap with independent X axis, each one with it's own heatmap colour schema (i.e some the higher the number the greener the background) others the opposite.
I know this is not possible with High-Charts. I was wondering if it would be possible with plot.ly. Is it? is there an example I can have a look at?
I've tried adding multiple colorscaleValue as arrays etc but nothing seems to work.
How can I accomplish this? Even with an other library if needed.
P.s.
This is my jsfiddle as example.
I'm planning to use Highstocks.js after having used Highcharts in some other projects and I've noticed that the labels when moving the mouse over a series are not the same as in Highcharts.js making it more difficult to be read.
Instead of showing only the information of the selected series, it shows the information of all of them in the same label.
This might be a bit confusing when there's multiple series as you have to pay attention to the color to identify the series name.
It doesn't even highlight the series you are currently over or anything to simplify the viewing to the final user.
You can see what I'm talking about with this two examples:
Highcharts.js (How I would like it)
Highstocks.js (How it actually is)
I'm wondering if there's anything which can be done to emulate that behavior. I've been taking a look at the series options but I didn't find anything similar.
Thanks.
Sure you can, it is very easy, just add:
shared: false
for tooltip options object on chart initialization.
fiddle: http://jsfiddle.net/5RGaC/