Dojo Charting not able to add axis - dojox.charting

http://jsfiddle.net/Jn4tT/
var data= [ {"a":2, "b":5,"c":3 },
{"a":5, "b":15,"c":7 },
{"a":1, "b":5,"c":7 } ];
chart1.addAxis("a");
chart1.addAxis("b");
chart1.addAxis("c");
chart1.addSeries("min", {data: data[0]}, { fill: "blue" });
chart1.addSeries("max", {data: data[1] }, { fill: "blue" });
chart1.addSeries("Answered", {data: data[2]}, { fill: "blue" });
var tip = new Tooltip(chart1, "default", {
text: function(o){
console.log(o); //no axis to the current data point
}
});
chart1.render();
I can get the chart to render if I remove the addAxis above, but no matter how I add axis, on a spider type chart, it throws a "can't find axis" error.
Without the axis, it doesn't look like I can set custom tooltips (only want to show the data point, not the series and axis title). And it doesn't look like I have control of the axis labels, fonts, maxlabelsize, etc.

This may be added as a feature in future versions of dojo, but currently after a lot of fighting with it. I cracked open the library and added custom code to handle this and a lot of other things. Basically, just opening the spider.js and common.js files used in generating the spider diagrams. Was able to wrap the labels in my own class's. And also inserted a title attribute for each with the desired label. Using an external tooltip library, I now have a lot of control over the tooltips in spider diagrams.

Related

Kendo UI Chart - Want tooltip to always show

I need some help with how Kendo Chart tool.
I am trying to plot a line graph with bookings on particular date. I have a booking on a particular day and can see the circular plot. If i hover on it i can see the tool tip which contains the summary of the booking. I want this tooltip to always be visible/open. At the moment it only happens on mouse over.
function createChart() {
$("#chart").kendoChart(data);
var tooltip = $("#chart").kendoTooltip({
width: 120,
position: "top",
visibe: true
}).data("kendoTooltip");
}
I am using Kendo for the first time and am very confused now. Any help will be much appreciated.
You can always show the tooltips or labels without having to hover over them by mouse, by using setting the visible of the series labels to true as follows:
seriesDefaults: {
type: "line",
labels: {
visible: true
}
}
You can check and see a demo example here: http://demos.telerik.com/kendo-ui/line-charts/local-data-binding

jqPlot donut chart with legends issue

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 :-)

Kendo-UI bar chart display direction (axis)

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

In jqplot, how to show x-axis on top, and how to hide axis label

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.

g.raphael bar chart and updating/animating the values

I'm working on some bar charts and need to update the chart values. The only way I've found to do this is to redraw the whole thing. Isn't there a way to simple update the bars? And if so what I'm really hoping to do is animate that change. Any suggestions?
http://jsfiddle.net/circlecube/MVwwq/
Here's what you want (updated Fiddle).
You were on the right track for creating a new bar chart. The only issue is, you don't want to "display" that bar chart, but you want to use its bars for animation. While this does generate a new graph which we later throw away (using remove()), it seems to be Raphael best practice.
function b_animate(){
//First, create a new bar chart
var c2 = bars.g.barchart(200, 0, 300, 400, [bdata], {stacked: false, colors:["#999","#333","#666"]});
//Then for each bar in our chart (c), animate to our new chart's path (c2)
$.each(c.bars[0], function(k, v) {
v.animate({ path: c2.bars[0][k].attr("path") }, 200);
v.value[0] = bdata[k][0];
});
//Now remove the new chart
c2.remove();
}
This is not complete, as we haven't animated the legends to match the new chart, but this technique applied to the labels should get you there. Basically, we need to re-map the hovers to show new labels (and remove the old labels).
Hopefully, this should work exactly like you hoped. Let me know if you have any issues. Enjoy!
I had to adapt the above code to get this to work with Raphaƫl 2.1.0 and g.Raphael 0.51 and JQuery 1.9.1:
function b_animate(){
var c2 = bars.barchart(10, 10, 500, 450, bdata, { colors:custom_colors});
$.each(c.bars, function(k, v) {
v.animate({ path: c2.bars[k][0].attr("path") }, 500);
v[0].value = bdata[k][0];
});
c2.remove();}
Hope this helps!

Resources