D3.js not showing labels on first SVG after second SVG created - javascript

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

Related

amCharts LabelBullet not visible in Dumbbell plot charts

I'm trying to add a Label to a Dumbbell plot (openValueY / valueY) points.
I can change the CircleBullet to a Triangle but struggle when adding LabelBullet.
I'm using the Demo code from https://www.amcharts.com/demos/dumbbell-plot/.
Shows the Chart where I want to add a text label at each circle
I added the following to the very end of the JavaScript section to keep the test simple:
let labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = "Test";
Bu not luck so far.
I also played with:
labelBullet.label.fill = am4core.color('#000');
chart.maskBullets = false;
But couldn't get it to work!
I also moved the code to jsfiddle https://jsfiddle.net/Cloud4every1/k9mh1eby/
Maybe someone else has solved a similar problem or know a workaround/different solution.
Many thanks!
This happens because dumbbell plot is made from column chart by setting width of columns to 1px. And labels automatically are hidden if they do not fit into a column. To disable this, you must set:
labelBullet.label.hideOversized = false;
labelBullet.label.truncate = false;

Highcharts: Add ONE custom label to yAxis

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/

D3 line chart doesn't do transition while appending data to chart

I am working on adding transition to the line chart, copied a example from herehttp://bl.ocks.org/d3noob/7030f35b72de721622b8, i want the line chart to do transition when the interval happens, like in the example when you click the button the chart will move to left but in my plunkerhttps://plnkr.co/edit/sCJYfXDSjXN1IiFokK1V?p=preview doesn't work, I put the d3 code in angular's custom directive because i have a requirement where graph will be repeated more than 5 times any help is much appreciated
In your update data function, selection of the chart was var svg = d3.select("lineChart").transition();. It should be var svg = d3.select(".lineChart").transition();

NVD3 & D3.js - Remove Y2 Axis and Scale Second Graph

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;
});
});

jqPlot plot object to different div

I am generating a graph for one div, and I want to display that exact same graph on another div?
I have:
var plot = $.jqplot (firstDiv , data,options)
And I want to plot this to another to another div, is that possible assuming i don't have data or options available to me? Would I be able to use the plot variable to draw to the secondDiv?
you can use the plot variable like this
$(document).ready(function(){
var plot = $.jqplot ('firstDiv', data,options);
$.jqplot ('anotherDiv', plot.data,plot.options);
});

Categories

Resources