I'm pushing parsed xml data to the values and labels for the nvd3 chart. For some reason, one of my discrete bar charts, the one under "Top 5 SIC by Comments" in the drop down menu, isn't doing what it should. The y-axis range is set to the minimum y value from all the points, so it makes all of the bars the same size. I've copied the settings from the other graphs I made, so I'm not sure what went wrong (I don't think it could be a typo, and my other discrete bar charts are working). I've tried changing the values in the xml file sample4.xml, but the sizes still stay the same. The only way that the bars, or rather the y-axis, reverts to its correct format, is when I manually change the number value to "900" in the controller itself, but I can't have this because I need the values to be pushed from the xml file. Is there a problem with the configuration that I'm missing? Or maybe there is a way to force the y-axis to set the max range value to the max value in the data set?
Here is my plnkr
I've tried researching online but I haven't found any instances of this bug in a forum. Any help would be appreciated.
Please try using api object provided by angular-nvd3 library to call it's updateWithData(data) method, each time you update the data. (if you update options too, you would call updateWithOptions (updatedOptions).
In your .html get an api object assigned. (make sure, you don't crate the object name-barApi inside your controller's scope beforehand, that's the mistake I did.) :-
<nvd3 options="optionsBar" data="barData" api="barApi"></nvd3>
In your drop-down change event, you would put call like :-
$scope.barApi.updateWithData(data)
where data is your dataobject.
Also refer the comment of [krispo commented on Sep 16, 2014] on following thread.
https://github.com/krispo/angular-nvd3/issues/37
Related
I've got multiple graphs on one page and all are using the same values for the x-axis. When the user selects a range using the scroll bar, I want all graphs to sync to that range. The graph they make the range selection on naturally scrolls, but the other graphs remain staionary.
Is there a way to set the range of a scroll bar from code? I looked at the XYScrollbar reference but didn't find anything in the methods section like setRange(...).
You should be setting start and end properties of the scrollbar:
https://www.amcharts.com/docs/v4/reference/scrollbar/#start_property
https://www.amcharts.com/docs/v4/reference/scrollbar/#end_property
Updated:
this actually works only once. In order for this to work consistently, I had to use undocumented fixRange(range: IRange) method. I'm not sure I understand why it's not documented.
Recently I got a requirement where
I have a certain amount of time series data, I need to show the data on a chart on a web page.
(I know this can be done easily since there is Highcharts, Google charts, etc)
However, a more complicated feature request came up. I need to be able to annotate one or more data points on the chart, and annotate them as - say Test Run 1, and maybe another series of data points at Test Run 2. (You can think of it as maybe someone is playing around with a hardware, the first time he collected a set of data, and the second time he collected another a set of data. I want to be able to annotate and diffenrentiate those data sets on the chart)
I will need to preserve those segmentations/groupings and save them in a persistent store, so that next time I load the chart, I can show those grouping again on the chart.
Does anyone know what is the best way to do this? Or are there existing features of any Javascript UI framework that's already capable of doing it?
Thanks so much.
I am creating a Step Line Chart with AmCharts v3.
Take a look at this chart for example.
(Apparently the community loves JSFiddle more than CodePen, but the later
handle ajax calls easier)
This chart represents the price of a product and how it changes among the time. It is possible that the product may be unavailable at a moment so its value is considered as zero.
I want to omit the balloon which displays the value on hover, only if the price is equal to zero.
I want to see if is possible to do it, but I couldn't find anything about it on the documentation.
EDIT:
I remembered something about gaps, I don't know how they work actually. But if I could set all moments when price = 0 as gaps, maybe that could be a workaround.
So there seems to be an error when dynamically adding data to a hidden series in Highcharts.
Say I have two series on a chart that both update on the same interval of time. Say also that I'd like to ensure that neither of the two series have more than a certain number of points, therefore leading me to use the optional shift boolean during a series.addPoint() operation.
The problem I run into is that, if one of the series is toggled and made invisible for some time, when re-toggling that series, much of the data that should've been shifted is still present.
I've made an example fiddle of this (just toggle data1 in the chart legend for a few seconds and then re-toggle)
http://jsfiddle.net/mmuelle4/c00cLfs5/ (change funcToTest to see how various fixes don't quite give the "shift" look)
I'm using the latest version at the time of this post (Highcharts JS v4.0.4).
I think what I've uncovered is still an error that will need to be addressed by Highcharts, but I figured I'd ask the question - is there a better way to perform series length checking and data adding/shifting for multiple series than in the linked fiddle that would get around this issue? I can think of some clunky ones off the top of my head, but I thought I'd come to SO for some elegance :)
Link to bug on Github (for tracking): https://github.com/highslide-software/highcharts.com/issues/3420
You can workaround this issue by managing shift on your own. Simply store in some array all points and shift them there. Then call series.setData(array_of_points,redraw,animation) instead of series.addPoint(points,redraw,animation, shift).
In short:
when series is hidden use series.setData()
when series is visible use series.addPoint() with shift-param set to true|false
I am facing a very serious bug using graphael. Therefore, I want to change the procedure it uses to calculate the maximum value for the y axis. However, It's way to confusing for me, and I cannot find it. Can anyone help me to change that procedure?
Sorry, I don't have any experience with gRaphael, but since no one else has answered, I might be able to help you somewhat...
The code for gRaphael's LineChart is located here.
Normally, I would suggest overriding the function that calculates the y axis max value, but since that object is enclosed in a private scope, you will only be able to change the code, directly, through a local copy of that file.
I only skimmed the code, but was not able to find where in it the actual calculation was being done.
It calculates them through the .snapEnds() method in gRaphael core. If you want, you can expose the values to the linechart options using this method.