I am able to show animations for bar charts and line charts.
Using:
animate: true,
animateReplot: true
But the animations doesn't seem to work for donut charts.
Can anyone explain me why?
Any help would be appreciated.
Thanks in advance.
In my knowledge currently jqplot not support Pie and donut chart animation.It would be nice if jqplot support Pie and donut animation.
We can Change the theme of Donut chart using JqPlot by seriesStyles property
seriesStyles: {
seriesColors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo'],
highlightColors: ['lightpink', 'lightsalmon', 'lightyellow', 'lightgreen', 'lightblue', 'mediumslateblue']
}
EXAMPLE from Stack overflow
Related
I have a top 10 chart that works (using a fake group) how all other bar-charts work with cross-filter. If I select one of the things on the top 10 chart it filters all the other charts which is not what I want to have happen. I just want the chart display the chart.title text (the hover-text) while disabling its ability to be clickable.
So far I've looked into dc.js itself to see if there was a configuration for the bar-chart to get what I need and I couldn't find anything.
I've tried using this
ng-click="stopClick($event)"
$scope.stopClick = function (event) {
event.preventDefault();
event.stopPropagation();
};
That didnt do anything to the chart.
I've tried using inline css for the chart
style="pointer-events: none;"
But that disables the hover-text completely.
Any help would be greatly appreciated.
Huh, you would expect .brushOn(false) to do this, but I guess it has no effect for bar charts with ordinal x scale.
Instead, you can disable the event handler manually:
chart.on('pretransition', function(chart) {
chart.selectAll('rect.bar').on('click', null);
});
I wasn't having luck with the chosen answer but Gordon's answer to a different question did work https://stackoverflow.com/a/50702979
chart.onClick = function() {}
I have jqplot donut chart where I want to add chart labels in the center part. Also want to add scrolling for labels in the middle of graph. So only 1-2 labels in the center will be visible and rest will be visible when user scrolls.
Please have a look attached image. As per my knowledge, we can't add labels in the center of chart. Is there any way to do this? Appreciate your help.
My current code is as below:
<script type="text/javascript">
var _chart5_plot_properties;
_chart5_plot_properties = {
title: " ",
"seriesDefaults":{
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
sliceMargin: 0,
innerDiameter: 220,
startAngle: -90,
barPadding: 0,
padding: 3,
}
},
grid: {
shadow: false,
drawBorder: false,
shadowColor: "transparent"
},
highlighter: {
show: true,
tooltipLocation: "sw",
useAxesFormatters:false
}
}
plot2 = $.jqplot("chart2", chart_data, _chart5_plot_properties);
I couldn't find an option for this in jqPlot.
Though, jqPlot has 8 options to position the legend, but it does not have the center option. jqPlot Legend Locations
But after tweaking it a bit, I could accomplish it using jQuery. Since we need to require jQuery to render/draw jqPlot charts, so I thought of using jQuery rather than pure Javascript.
I have used two functions defineDimensionsForLegendTable(parentContainerID, dimensions) and fixLegendsToCenter(parentContainerID)
Other important things that you should not miss out while using these functions
Make sure you include the jquery.jqplot.js, jqplot.pieRenderer.js, jqplot.donutRenderer.js, jquery.jqplot.css files (or the minified versions - .min.js)
Set placement to outsideGrid in legendOptions
legend: { show:true, placement: 'outsideGrid' }
Give a higher z-index to the legend-table
#chart2 .jqplot-table-legend{
z-index: 99999;
}
Find the working fiddle here - jqPlot Donut Chart with legend in the center
Note: If the chart does not show up in Google Chrome, try opening it in Firefox or some other browser.
Remove the console.log lines from the code ;-)
You can use Foundation or Bootstrap to beautify the scrollbar. :-)
Hope it helps :-)
Following the Telerik Kendo Area Chart example found here: http://demos.telerik.com/kendo-ui/dataviz/area-charts/index.html
I've been trying to apply the 'smooth' effect to my chart, but with no luck.
seriesDefaults: {
type: "area",
stack:false,
area: {
line: {
style: "smooth"
}
}
},
Maybe I'm going blind, but I can't see what's wrong.. I've tried a myriad of different options and included all of the css styles for example in the jsFiddle:
http://jsfiddle.net/markive/u33m6/
Any idea what I am doing wrong?
I am sure this is a stupid question, but I'm just not seeing it.
I have a page with many Kendo charts. One of these appears where the bars go from left to right. The others appear where the bars go from bottom to top. What on earth is the property that controls this? I simply don't see it. I wan them all to be vertical in nature.
The single chart that is going from left to right is also the only chart that has its series predefined ([x,y,z] rather than using dataSource). It also is the only stacked chart I have. Maybe something there causes this?
The "bar" type sets the bars horizontal:
$("#chart").kendoChart({
seriesDefaults: {
type: "bar"
}
});
And the "column" type sets the bars vertical:
$("#chart").kendoChart({
seriesDefaults: {
type: "column"
}
});
I have a jqplot object that has x-axis tick marks/labels rendered on bottom. Basically, there is a stack of charts, all using the same x-axis. I would like to reclaim the bottom axis area from the middle charts for the plot lines.
How can I dynamically relocate the x-axis to top (i.e., northward)
How to make the x-axis label go away? For this I tried
plotobject.axes.xaxis.showLabel = false;
plotobject.replot();
but that seems to have no visible effect. plotobject is what's returned by the original $.jqplot() call and I am using $.jqplot.DateAxisRenderer for xaxis.renderer. I have access only to the plot object.
Thanks
This simple CSS solution is working for me to put the x-axis labels on top of the chart.
.jqplot-xaxis {
position: relative;
top: -30px;
}
well, the label for each axis (which is the axis title) has it's own renderer, and thus it's own options. I use the plugin one ( http://www.jqplot.com/docs/files/plugins/jqplot-canvasAxisLabelRenderer-js.html ) but also the default has a show: true/false setting. ( http://www.jqplot.com/docs/files/jqplot-axisLabelRenderer-js.html )
it should look something like this:
axes: {
xaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'Dates',
labelOptions: {
show: true,
fontSize: '10pt'
},
}
}
For putting the x-axis on top, I'm not sure what your problem realy is, but I try to select it with jquery and set it's z-index to something high to bring it on top. Take a look at http://www.jqplot.com/docs/files/jqPlotCssStyling-txt.html for some selection ideas.