I'm using nv.d3.js and d3.v3.js and working off this model example.
I want to remove the Y2 axis and have the bar and line chart work off the same data. So, they should be working off the same scale.
Note: I have seen this very related post and tried the solution given there. The below code was provided in that link. I implemented into my code and it didn't work, apparently because I am working with d3.v3 and not d3.v2.
chart.y2Axis.scale().domain(chart.y1Axis.scale().domain());
This line of code made some difference though. If I hover my mouse over the displayed points, they no longer enlarge. If I hover my mouse over the bottom of the x-axis the points enlarge. This seems to hint that the line chart points are being re-scaled but not redrawn.
Any help is appreciated! Thank you!
EDIT / UPDATE: If anyone is trying to do the same thing, I simply used d3.json() twice! See below:
d3.json("data.json",function(error,data) {
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
....
....
return chart;
});
});
d3.json("data2.json",function(error,data) {
nv.addGraph(function() {
var chart = nv.models.linePlusBarChart()
....
....
return chart;
});
});
Related
I'm trying to show heatmap in Django templates using AnyChart and I'm stuck with problem when not all Y values are shown in heatmap.
As you can see on the screenshot, 3 out of 6 values are missing.
Here is code from the template:
...
<span>Mapped Dimensions</span>
<div id="mapped_dimensions_chart"></div>
<script>
anychart.onDocumentReady(function () {
chart = anychart.heatMap({{ map_dimensions_data_anychart | safe }});
var customColorScale = anychart.scales.linearColor();
customColorScale.colors(["#CF7A78", "#E69645", "#69A231", "#4D7623"]);
chart.colorScale(customColorScale);
chart.container("mapped_dimensions_chart");
chart.draw();
});
</script>
...
Does anyone knows why this is happening?
The chart tends to avoid overlapping labels of the yAxis so it hides some of them. You can disable this behavior and force the chart to show all labels. To achieve that, add the following line to your code:
chart.yAxis().overlapMode('allow-overlap');
Example: https://codepen.io/anon/pen/YedQog
If I comment out the line donut2.create(petData()); to only create one chart, it works fine. However, when that line is left in and I use the logic to create two distinct pie charts, the labels disappear for the first chart. I'm at a bit of a loss as to why.
Any help appreciated.
$(function() {
var donut1 = new DonutCharts('#money');
donut1.create(moneyData());
var donut2 = new DonutCharts('#pets');
// donut2.create(petData());
});
Instead of
var donuts = d3.selectAll('.donut');
do
var donuts = charts.selectAll('.donut');
Reason:
d3.selectAll('.donut');
will select the previous created chart and so the problem, that is the reason why the last graph text comes.
working code here
I'm using highcharts and I know that the yAxis labels are automatically generated.
The thing is I've got this 3D graph in which apart from the data, there's a fixed 'goal' line on which we compare which data set is over or under it.
Since 3D graphs don't render lines very well, I used a plotLine and it works marvelous. The problem comes when I try to show how much this 'goal' is, because even though it's at the right position, it would be nice to display this goal amount.
What I want to do is display at the left of the graph the value of this line, so that whoever sees it is able to know how much the goal is for that particular data set.
Here's a screenshot of the graph, and circled the place I want to add the custom label:
Graph screenshot
Inside the red circle is where I want to add this custom string (which should be a percentage number).
I appreciate any help you guys can provide. Thanks!
You should be able to use renderer.text for adding custom text in your chart.
http://api.highcharts.com/highcharts/Renderer.text
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
plotLine = yAxis.plotLinesAndBands[0],
pLPath = plotLine.svgElem.d;
chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr({
fill: 'red'
}).add();
},
In the code above I am using plotLine's path.
Live example how your chart may work:
http://jsfiddle.net/0hyaevax/2/
When creating a sunburst chart with NVD3 (version 1.8.1) and D3 (version 3.5.8), I find that when I click on some lowest-level slices, it zooms into the incorrect section of the graph:
nv.addGraph(function () {
chart = nv.models.sunburstChart();
chart.color(d3.scale.category10());
d3.select("#test1")
.datum(getData())
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
For instance, in this JSFiddle, when clicking on "Pug" it zooms to "Sparrow", but all other transitions seem to be working.
I have been unable to find the cause of this, as the x scale does seem to change domain to the correct values.
Additionally, the JSON data seems alright.
How would I correct for this?
I'm trying to configure a c3gauge chart but I would like to show the threshold values in the chart (outside labels with the color would be nice) just to realize how far the value is from the next level.
Any one can help me?
This is the gauge now:
This is what I expect:
There is no specific option in c3.js Gauge chart to draw thresholds lines and legends, so I thought to use d3.js to add them to chart on rendered event:
onrendered: function() {
drawThresholds(this, thresholdOpts, opts);
}
Check this jsfiddle for complete example: https://jsfiddle.net/beaver71/032tcczg/
Output obtained looks like below:
and: