I'm using n3-chart/line-chart (https://github.com/n3-charts/line-chart) in my angular project.
I'm wondering if there is any way of displaying thresholds in the chart? Ideally this could be done by enabling the grid option, and set a color for the grid on certain y-axis values. However, I haven't found any information if that is possible or not.
The only work around I could think of is to create a "threshold series" that only has two measurements, one for the min x value and one for the max x value. The chart in this codepen example demonstrates this: http://codepen.io/ulrikl/pen/rOXNdd
So, my question is: Is this the only way of achieving thresholds?
n3-charts creator here, symbols are now supported so take a look at http://n3-charts.github.io/line-chart/#/docs, jump to the Symbols section and you'll be all set, hopefully !
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 was developing a solution for another question here on Stack Overflow (see Highcharts : selection) that has some simple slider elements (using input type="range") to change the categories shown in a column chart. Whenever the user changes the range in either slider element, the chart is redrawn using setExtremes().
I noticed that, in some instances, some of the x-axis labels disappeared, even when I moved the sliders back to their original positions. I've tinkered with a number of x-axis settings, including minPadding, startOnTick, and tickInterval, and none of them seem to solve "The Case of the Missing Labels."
The first screenshot below shows the chart when it's first loaded. All of the x-axis labels are present.
The second screenshot below shows the chart when I change one of the sliders. Some of the x-axis labels are now missing. It looks like they're being staggered.
Here's where the plot thickens: if I adjust the sliders to some other values, all of the labels come back:
Here's the fiddle I developed so you can see a live example of this behavior: https://jsfiddle.net/brightmatrix/uvat8u05/
I'm curious to know why this is happening, and what settings I could use to ensure that all x-axis labels are shown, regardless of what values the user chooses in the sliders.
Thank you very much!
Update: The responses from both Max Uppenkamp and Grzegorz Blachliński are valid and helpful solutions. What I also discovered by chance was that explicitly setting the slider values to integers using parseInt() solved this issue as well. It also helps in comparing both values to make sure a user doesn't choose an end date that is earlier than the start date.
This seems to be intended behavior of Highcharts, however inconsistent it may be.
According to this this should be fixed in current versions of Highcharts, but you might as well try this tick formatter solution.
Edit: If the above doesn't work for you, you might be able to solve the issue by rotating your labels:
http://www.highcharts.com/demo/column-rotated-labels/grid
In Plotly.js I am trying to allow users to see two (related) values for positions on the x axis. (Think if I'm doing dates I want it to say "Tuesday" on the lower axis and June 28th 2016 on a linked axis) Linking the axes would preferably preserve the relation between values when scrolling or zooming.
I had a temporary solution in place, where I would change the values from floats (as that was what we were using) to strings with a break character intended to separate the values (which allowed viewing both values at once albeit on one axis), however when tested with floats that were not equally spaced the slope would change visually, which is not desired. Another solution I have tried was to have the ticks be their float values, and then change their values after they were plotted using the "tickvals" and "ticktext" attributes, but I was unable to then hide some tick text while keeping others view-able on the x axis (and with 80 values it became quite busy and unreadable) There is the solution of hiding all of these tick values, but I was hoping there would be a solution where I could see some of them.
I created an example of the problems I am having in jsbin, so I hope it is kosher to link to that. https://jsbin.com/buwuyid/1/edit?html,output (and also hope the link works.)
There was a similar question asked previously, In plotly, how do I create a linked X axis? however that was a year ago and using python, and I was hoping that an implementation that I cannot find has been found, or a solution to one of the other problems I have found could be provided.
Thank you for any help you can provide, and if I can include any more information to help find a solution, please ask.
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 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.