I'm new to D3, NVD3 and Angular-NVD3. I need to create a chart that looks similar to this, using Angular-NVD3:
SO question: NVD3 Stacked Bar Chart Plus Line Overlapped
(there's a JS Fiddle on the SO question).
Angular-NVD3 has two charts which each accomplish most of what I need, but not all of it:
Those would be the MultiBar and the MultiChart. (http://krispo.github.io/angular-nvd3/#/quickstart)
Examples:
That is, I need a stacked bar chart with a line (or lines) overlaid on top of the bar chart. I believe that to do this, one must use a "multiChart" instead of "multiBar" chart. (Please correct me if I'm wrong).
The SO example above modifies the NVD3 library, which I would like to avoid. After researching, I can see why they chose this approach.
nv.d3.js (version 1.8.2), for the multiChart object, Lines 9068-9069 :
bars1 = nv.models.multiBar().stacked(false).yScale(yScale1),
bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),
If you change these lines to .stacked(true), it does stack the bars.
How can I use Angular-NVD3 and accomplish what I need without changing the library?
Ideally the solution would be pure configuration. The next most ideal situation would be to set the "stacked" value at runtime from inside my enclosing component, but I can't seem to get access to the object.
I would like to avoid a highly intricate solution if possible because the whole point of these abstractions is to avoid such complexities. However, all solutions are welcome.
I found the answer:
you can change the stacked value in the callback() event handler, specified in your config:
chart: {
type: 'multiChart',
...
callback: function (chart) {
chart.bars1.stacked(true);
chart.bars2.stacked(true);
chart.update();
},
...
}
};
Use multiChart. To get the bars side by side set yAxis: 1 on both bar data sets.
https://github.com/novus/nvd3/blob/master/examples/multiChart.html
(the repo examples cover more then the website)
Related
I've been trying to make a small horizontal scroll with react three fiber so I can later add some WebGL Distorsion on the elements and even though i succeeded in the most basic way, there are still some things that need improvement :
(here is the codesandbox corresponding :https://codesandbox.io/s/horizontal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js)
first and foremost I want a smooth scroll and can't seem to be able to make it, I used the lerp function to make it but the result doesn't work very well :
let scroll = 0;
scroll = (scroll - scrollTargetMapped) * 0.03;
// any other frame, groupRef.current is undefined, don't really know why
// but because of it, i must put my logic inside an if loop
if (groupRef.current) {
groupRef.current.position.x = THREE.MathUtils.lerp(
scroll,
-scrollTarget,
0.01
);
}
secondly, the elements on my scene are placed kind of in a random way and the scene is not at all responsive. I would love to mimic the html logic and put my first element like 50px away from the left side of the screen but not sure if it's really possible with react threejs :)
If someone has any answer to one of those question, I take it 🙂
Thanks in advance !
For those interested, I managed to find a solution, using one of drei components : ScrollControl, it works perfectly !
https://codesandbox.io/s/horizontal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js
For more info on the said component, check out the doc : https://docs.pmnd.rs/drei/controls/scroll-controls
I am building a UI using Openlayers 4. The request I have received is to not allow the user to double click to complete the current .Draw interaction. I have manages this on the LineString by using the maxPoints option and only allowing the user to draw straight lines (as per my requirements).
I need to do the same thing with the Polygon but cannot get it to work. I have tried using the finishCondition but this does not help.
Is this something that can be done in Openlayers?
JS Fiddle is throwing massive errors on my machine at the minute, I'll add an example as soon as I can.
EDIT
Here is a basic jsfiddle. You can toggle the return boolean from finishCondition, when set to true the single and double click end the polygon drawing. When set to false the drawing cannot end.
I need to find the codtion that will allow me to return false if the user double clicks and true otherwise.
Ok, after a bit of further investigation I have found a solution, shown in this jsfiddle.
I have used the on drawstart event to calculate and set the coordinate of the first point in the polygon, in the finishCondition I find the current pixel it is at, then using that to see if it is within 10px of the clicked point, if it is end the polygon if not then keep drawing.
I am happy if anyone out there can show me a more elegant way to do this, but for now this seems to do the trick.
Had a look go with this aswell, and you can return whether or not the the finish coordinate of the interaction
finishCondition: event => {
return this.interaction.finishCoordinate_ === this.interaction.sketchCoords_[0][0];
};
I'm trying to format my labels as percentages. I've tried looking at the documentation for Chartist.js and converting it to CoffeeScript, the problem is things aren't quite as clear to me since we're using Angular and therefore the angular-chartist module. It's a fairly trivial piece that I can't ask my co-founder to spend time on because there are many larger pieces at play in our project, but I would like to understand where I'm coming up short.
The chart is displayed using a chartist directive (which I'm guessing is a part of angular-chartist):
<chartist class="ct-chart" chartist-data="typeCounts" chartist-chart-type="Bar" chartist-responsive-options="typeCounts.barResponsiveOptions"></chartist>
This is my coffeescript for trying to get the options in (note that the labels and series properties are working fine; but the chartist element is not picking up the barResponsiveOptions property (therefore the console.log debug line is not firing):
# Organize return data into labels and series for Chartist
typeCounts = ResultService.getTypeCounts()
$scope.typeCounts.labels = Object.keys(typeCounts)
$scope.typeCounts.series = [typeCounts[type] for type in Object.keys(typeCounts)]
$scope.typeCounts.barResponsiveOptions = [
axisY:
labelInterpolationFnc: (value) ->
console.log("Firing barResponsiveOptions")
Math.round(value * 100) + '%'
]
Right now the chart displays with the data points on the y-axis as fractions of 1 (e.g. 0.0 -> 1.0).
You should use the chartist-chart-options attribute for your regular options and chartist-responsive-options if you're not using responsive options as explained here https://gionkunz.github.io/chartist-js/getting-started.html#responsive-sugar-topping.
Cheers
I've got a stacked bar graph that shows two categories of information. Now I have a requirement to show the total of the bars at the end of the bar. I've attached a mock-up showing what I'm trying to do -- the numbers in red are what I'm trying to add.
(source: michaelandlisa.us)
I couldn't find anything in the documentation on how to add totals, or on how to add annotations (which would also work).
Basically, ShieldUI jQuery chart plugin renders the series without text, as shown here.
To alter this behavior, you need to first enable the text.
Then, you can use a format function to either show some cumulative text, or return an empty string. More information on this approach is available here.
This can be coupled with a global counter to determine each Xth iteration.
I managed to get this to work by adding a Scatter chart of total values on top of the existing bar chart.
http://michaelandlisa.us/Images/Forums/stacked_with_totals_scatter.png
I also set the color on the series to "transparent" so the point wouldn't show up, and then I bumped the X and Y by 15 and 12 respectively. I also set the style to Bold, and set the format to "{point.y:n0}". Here's the relevant MVC code (where totals is a List of object):
.DataSeries(series => series.Scatter()
.Data(totals)
.CollectionAlias("Total")
.Color("transparent")
.AddToLegend(false).DataPointText(dtp =>
{
dtp.Enabled(true);
dtp.Format("{point.y:n0}");
dtp.Style(s => s.FontWeight(FontWeight.Bold));
dtp.Color("red");
dtp.X(15);
dtp.Y(12);
}))
Im using Angular Kendo - Im not sure if thats really relevant only to say its not as 'simple' as calling refresh. - I have two scope variables one is the Kendo DataSource the other is the Kendo Chart Options which are assigned like this
$scope.ChartOptions = {
// All The other Chart Stuffs
dataSource : $scope.ChartDataSource
}
<div kendo-chart k-options="ChartOptions" />
This works fine - the issue is that the chart data can vary quite a bit and the area I'm using is small so what happens is the value axis ends up looking okay with values of just 2 or 3 but when you get to 20 or more the labels bunch up is there some way to reset the options after the data is retrieved. Maybe by changing the valueaxis skips etc.
What you are looking for is actually the CategoryAxis Step value. Based upon your data, you need to figure out what the max value is, and then calculate a reasonable step value that will appropriately render out your chart control based upon the space that you have. I can't really give you an example, as this will be entirely dependent upon your data and will likely require a bit of trial and error til you land on a calculation that yields acceptable results.
Documentation for the CategoryAxis step: http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-categoryAxis.labels.step
Here is an example for finding the maximum data point:
var data = [1, 3, 4, 9, 10];
var max = Math.max.apply(Math, data);
//code here to do some kind of calculation of step value
Once you know what your appropriate step value should be based upon your data, you can then create your chart and set the CategoryAxis.Labels.Step value to it during grid creation.