How can we change the position of chart in dojo?
I cannot change the position of piechart.
chart.addPlot("pttt", {
type: Pie,
radius:50,
htmlLabels: false //See the code on jsfiddle
});
Jsfiddle link
Related
I am modifying the bar size and position using attr.
However the chart attributes are only available after the chart gets rendered.
So I am doing the modification on the fuction
chart.on("renderlet.somename", function (chart) {// modification });
My problem is this looks odd, as the chart gets rendered first then the modifications are applied and it all appears on the page.
I want that the chart should only be visible after the modifications has been applied.
I started to write that you could use the pretransition event, since this fires after everything has been rendered/redrawn, before transitions start.
But you are correct that the bar width is not publicly accessible (it should be!) and you can't read it from the bars until they have transitioned.
So, as you suggested, you could instead hide the whole chart using CSS:
<div id="test" style="visibility: hidden"></div>
And then show it at the start of your renderlet:
chart.on('renderlet', function(chart) {
d3.select('div#test').style('visibility', 'visible');
To eliminate the pause, you could also disable transitions for this chart when you initialize it;
chart
.transitionDuration(0)
And re-enable them in your renderlet:
chart
.on('renderlet', function(chart) {
d3.select('div#test').style('visibility', 'visible');
chart.transitionDuration(750); // default value
Here's a demo, using a fiddle demonstrating error bars (which also need the bar width): http://jsfiddle.net/gordonwoodhull/cw86goxy/32/
I have this code for add an event when you click in an element of the chart
chart.multibar.dispatch.on('elementClick', function(e) {
console.log(e);
});
I need to change the fill color of the clicked element
I have craete KendoChart pie with legend.
For some reason legend by default is interactive and by clicking on legend items chart enables/disables pieces of the pie.
I didn't find any way to disable this behavior: http://docs.telerik.com/kendo-ui/api/dataviz/chart
Could it be disabled?
I needed to do the same thing and after some research found out in the Kendo UI documentation the following solution:
- hook to the legendItemClick and legendItemHover events of the chart
- in the handler call e.preventDefault();
Here is the code I used (MVVM-style):
In HTML:
data-bind="events: { legendItemClick: disableEvent, legendItemHover: disableEvent } "
In the ViewModel:
disableEvent: function(e) {
e.preventDefault();
}
Here is the article - http://docs.telerik.com/kendo-ui/api/dataviz/chart
Use the code Below
legend: {
position: "bottom",
visible: false
},
I've created an NVD3 multiBarChart and placed it in a jQuery resizable container. When resizing the chart, each render incurs the same delay as when the chart is first drawn: staggered left-to-right delayed drawing of the bars. This looks cool when the chart is first drawn, but it's a nuisance when resizing the chart. I've experimented with nv.d3.css, reducing every delay to 0ms to no avail. Haven't yet inspected the NVD3 JS and am hoping not to need to.
Fiddle:
http://jsfiddle.net/a5Fnj/10/
var container = $("#mycontainer");
$(container[0]).resizable();
var svg = d3.select(container[0]).append("svg");
nv.addGraph(function () {
var chart = nv.models.multiBarChart();
chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.1f'));
d3.select(container[0]).select("svg")
.datum(exampleData())
.transition().duration(0).call(chart);
nv.utils.windowResize(chart.update);
this.stackedbar = chart;
});
function exampleData() {
return stream_layers(3, 10 + Math.random() * 100, .1).map(function (data, i) {
return {
key: 'Stream' + i,
values: data
};
});
}
As of NVD3 1.7.1 you can use the duration option:
chart.duration(0);
I used transitionDuration: -1 that worked for a stackedAreaChart.
Edit
This helped remove the transition when appending chart data, not the re-size issue, please check the comments below.
In the latest version (from github), you can set .transitionDuration():
chart.transitionDuration(0);
Edit: Even with this, some of the transitions/durations are hardcoded in the NVD3 source. The only way to get rid of those is to modify the source.
I am trying to implement the horizontal bar chart using jqplot.I want to enable click event for the y axis labels.
But i tried it with the jquery using class name to get access of "y axis ticks" .
$('.jqplot-yaxis-tick').click(function ()
{
alert("you have clicked the label");
});
Is there any event to do this like "jqplotDataClick" event in jqplot?
This issue was solved
From Here
just update the z-index of the .jqplot-yaxis-tick so it would be the first div to be clicked and added .live (or .on)
$('.jqplot-yaxis-tick').css({
cursor: "pointer",
zIndex: "200"
}).live('click', function (e) {
alert("you have clicked the label");
});