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.
Related
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 would like to plot price data and include a size attribute to each point so each data point would be (time, price, size=100) for instance. The canvas should plot the price data as a line but when hovering the mouse over the plot, I would like to be able to see the size at that point. I've accomplished this using jfreecharts in Java but I'm looking for something in the javascript space like d3.js or similar that might be able to achieve this. Any recommendations on charting libraries to try?
d3 is great, and probably the most flexible out there, but can be complicated, depending on your level of javascript. I think the most popular and easy to use libraries are:
Chartjs,
Google charts and
ECharts
If you're a beginner, checkout something like Anychart playground
I have phasor information (polar vector data pairs, each with magnitude and angle, representing voltage and current measurements) that I would like to display using Javascript. They should look something like the image linked below (my rep isn't high enough to directly post it) which I stole from Jesse's question about MatPlotLib. I would also like to easily change which phasors are displayed by a simple mechanic like clicking on the legend entry.
See a phasor diagram example here.
While I have inspected several code sets, I have yet to find a chart package that is built to handle polar vectors like this. Is my Google-fu lacking or do I need to create everything from scratch?
I feel like this is a cheap workaround, but here's what I ended up doing:
I used the polar chart from jqWidgets and with the series type set to "column" and the flip property switched to "true." I put the data in an array with 0 entries for each possible angle except for where I wanted the phasor displayed. Each phasor gets a dedicated series so the legend lists them all. It's not perfect and the array is much larger than it really should need to be, but it's passable.
While it's not surprising that no power system display package is publicly available for Javascript, I'm sure one has to be out there for educational sites if nothing else.
I'm looking for an library, to generate charts on client side.
I found a lot, by searching on web and stackoverflow, like here
https://stackoverflow.com/questions/2227421/good-javascript-library-for-drawing-charts-using-json
or this very good collection:
http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/
There are so much alternatives, I'm a bit overwhelmed. Which one can use JSON data, which one is up to date, which one is easy to use (because I'm absolutely new on this topic), which one is robust, works on mobile phone (or not), which project is still alive, etc.
I need different chards, an line chart is mandatory. Also zoom in and zoom out is mandatory.
So I took a closer look on jqplot an flot.
Both providing zoom, but it looks like zooming is more an scaling. Which means: the granularity will not change by zoom in.
Because the graph will have a lot of data/points, i need to consolidate informations before sending them to the client. By zooming in, I need to rise the granularity, so the chart should be able to process new data for the zoomed area. (I hope I've made myself clear.)
Thanks for any kind of attention.
Raphael.js http://raphaeljs.com/
HTML5 Graph http://chrisvalleskey.com/html5-graph/
Google Visualization API: http://code.google.com/apis/chart/interactive/docs/gallery.html
Flot: http://code.google.com/p/flot/
Unfortunately there is no helpful answer, so I like to write down, what i learned the last days for this question.
jqPlot and frot are supporting zooming at an basic level. That means, it's more an scaling.
By looking at the google groups for qjPlot and flot, the support for jqPlot is better (lot's of unanswered questions at the flot group).
jqPlot has an better axis-label-handling by zooming.
jqPlot also provides hooks. By using those hooks, it's seems to be possible to combine zooming and loading new JSON data in order to get an better granularity of the zoomed view.
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.