Is there any way to store IDs in Bar Charts and then getting the ID of a clicked Bar in JQplot Bar chart?
This ID won't be shown on any axis.
This is the code which I am using, but it just shows Point Index, or its x-axis value, how to get the ID?
$('#'+chartName).bind('jqplotDataClick',
function(ev, seriesIndex, pointIndex, data) {
alert('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
}
);
The pointIndex is not the x-axis value, so it should be fine to use as an Id for a clicked bar. It is the data object that contains the actual x/y values.
If you have multiple series, then the Id could be determined by also taking into account the seriesIndex.
Related
I have a pie chart in angular-nvd3. https://krispo.github.io/angular-nvd3/#/pieChart The issue I have is with a pie chart, I have 5 slices, when all the pie slices are labeled, it looks very scrunched together. I want to instead modify the legend so that instead of just displaying the keys, I want to show:
<key> + <number of records in that key>
Using "labelType" I can change what is shown on the labels of the slices pie chart, but how can I change what is shown in the legend?
Could not find anything in the API to do this.
But here is a bit of hack to do it via d3:
After render
1) get all the text DOM
2) run a for loop on all the text.
3) get the text's data and change the inner HTML.
dispatch: {
renderEnd: function(e) {
//for each text
d3.selectAll(".nv-legend text")[0].forEach(function(d){
//get the data
var t= d3.select(d).data()[0];
//set the new data in the innerhtml
d3.select(d).html(t.key + " - " + t.y);
});
}
}
working code here
I have a nvd3 bar chart.
I have click event defined as below:
chart.multibar.dispatch.on("elementClick", function(e) {});
When I click a bar element, I can get the element information via "e" parameter in the callback and it gives me
Object {data: Object, index: 1, color: "rgb(31, 119, 180)"}
How can I change a specific bar's color using this index value?
You've got a series index and a point index in series, you need just to find corresponding bar and change its style, like that
chart.multibar.dispatch.on("elementClick", function(e)
{
d3.select('.nv-series-'+ e.seriesIndex +
' .nv-bar:nth-child('+ (e.pointIndex + 1) +')').style('fill','red');
});
I'm looking for a chart for displaying my values over a long time period. The problem is due to the timeline most charts are useless because there are to many points in it and I can't zoom in or out.
So I'm looking for a chart where I load my complete data and the user can choose which data he wants (e.g. Values1, values2) and click into the chart to see only that timespan he wants.
A perfect example is http://dataaddict.fr/prenoms but I don't know where to find a similar chart that I could use. I searched for hours but didn't find anything similar. On the left side the user could choose the data he wants and under the charts the user can choose the timespan.
I hope someone has a good tip for me :) Thanks!
Disclaimer: I am new at javascript and d3.js, so please be skeptical of everything I say, but I will try to help you.
I was able to solve a similar problem by creating a set of regular HTML buttons below the chart (with svg rects inside of each button to create a color square in each button).
//Create the legend div
var legendHtml = "<div style='width:" + (w+marginLeft+marginRight) + "px;'>";
//Size of Squares in legend buttons
var legendRectSize = 9;
//Create a button for each item
varNames.forEach(function(element, index){
legendHtml = legendHtml + "<button class='legend clickable active' id='" + varNames[index] + "'><svg width='9' height='9'><g><rect width='"+legendRectSize+"' height='"+legendRectSize+"' style='fill:" + color(varNames[index]) + ";'></rect></g></svg> " + varNames[index] + "</button>";
});
//Close out the legend div
legendHtml = legendHtml + "</div>";
I then added the a new legend div below my chart, which happened to be in a div with the id "employment."
//Add the legend div to the bottom of the chart
var legendDiv = document.createElement("div");
var legendIdAtt = document.createAttribute("id");
legendIdAtt.value = "legend";
legendDiv.setAttributeNode(legendIdAtt);
document.getElementById('employment').appendChild(legendDiv);
document.getElementById('legend').innerHTML = legendHtml;
Finally, I added an event listener to the legend (specifically the class 'clickable') that updates the chart by updating, adding, or removing the new data. I used jquery to do this because I was finding the the built in d3.on() method was not working on nodes that are dynamically created after the document loads.
//Event listener for updating the chart
$('body').on('click', '.clickable', function () {
var id = $(this).attr('id');
//Toggle the buttons active or not active
if ($(this).hasClass("active")) {
$(this).removeClass("active");
} else {
$(this).addClass("active");
}
change(id);
});
Your change function will be different depending on what you want to do, but in my case, I made sure that the id for the buttons was the same as the variable names in the data (I originally set the id by calling the variable names), and then went through the general update pattern to updates my line graph. This article helped me understand d3's general update pattern: http://bl.ocks.org/mbostock/3808218
Hope that helps! Cheers!
Edit:
You should be able to make one set of buttons that adds, updates, and subtracts data based on the data the user wants to add to the cart using this approach. You could use a similar method to create a set of html buttons that, when clicked, update the domain of the x scale.
I am new to dc.js and d3.js. I have created a bar chart along with pie charts and a line chart with dc.js.
Now, in the bar chart I want to sort the bars based on the value that each bar represents. (For example, by clicking a button.) Is this possible with dc.js?
Note that I have designed my bar chart such that the X-axis represents geographic locations and the Y-axis is scaling on some value.
Could you show us some code ?
In the past I have done that this way for a row chart :
var topRowChart = dc.rowChart("#chart-top-dest");
topRowChart
.height(400)
.width(400)
.dimension(destination, "destination")
.group(calls,"calls")
.ordering(function(t){return t.calls;})
.label(function(d){ return d.key + " : " + d.value + " calls" ;})
.cap(10);
The important bits are :
.ordering(function(t){return t.calls;})
.cap(10);
You have to pass a function to ordering() that returns the dimension/group that will be used for sorting.
Surprisingly removing cap() cancels the sorting.
I am working on dc.js, i have draw pieChart
pieChart.width(300)
.height(200)
.transitionDuration(1500)
.dimension(startValue)
.group(startValueGroup, "StartValue")
.radius(100)
.minAngleForLabel(0.5)
.legend(dc.legend().x(230).y(0))
.title(function(d) {
return d.key + ": " + d.value;
})
.renderTitle(true)
.on("filtered", function (chart) {
dc.events.trigger(function () {
//console.log(total_payment);
});
});
Now, I want to set specific x axis value. Currently, pieChart taking center position of define width and height. That mean it's taking position of (150,100). I want to change this position to (100, 100).
How can i change position of x axis as per above code?
You can't set this directly in the dc options, but you can modify these values after the chart has been rendered. Assuming that "pie" is the ID of the DOM element that you rendered the pie chart into, you can do
d3.select("#pie > svg > g").attr("transform", "translate(100,100)");
I know it is an old post and that the answer works perfectly but when the chart is part of a bigger system (several charts) I found easier to add the above command directly to the chart by doing this:
pieChart.on('renderlet', function (chart) {
chart.select("svg > g").attr("transform", "translate("100,100)");
});
Edit:
Actually I just found out you can do:
.cx(100)
.cy(100)
which will set the centre of the pie chart to 100, 100 before render.