Google Charts API labels with lines - javascript

Is it possible to achieve the same effect with the 'new' Google Charts API like in the deprecated Image Charts service where the labels are outside the chart and a line points to the right pie slice?
Important: I know how to create the pie chart, I just don't know how I can achieve the: labels outside the chart + lines layout.
How it should look (uses deprecated Image Charts):
EDIT: just to make sure you guys don't write down to much code, I am just searching for the right properties to achieve this. Thanks.

You can get a similar result by using the legend.position property and set its value to labeled.
Though the line points will be attached to the centers of the slices, it's not possible to reattach them to slice borders.
var options = {
legend: { position: 'labeled' }
};
// ...
chart.draw(data, options);
The picture of the chart:

Related

Chart property showValues not working in Fusion Charts zoomline chart

I cannot find a way to make showValues: '1' show the data plot values in a zoomline graphic with Fusion Charts.
You see and try it in this fiddle: http://jsfiddle.net/60oeahc1/4/
¿Is there a way to make it work for zoomline charts?
The thing is that with a line chart is working: http://jsfiddle.net/z0xutjhL/
As per your query, since zoomline features large data , using showValue would overlap the data value text which in turn will result in poor visualization. Hence, It will not be possible to use showValue here.

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/

How can I modify the color of DC.js pieChart drawpaths?

I've got some pie charts with nice external labels, and drawPaths set to true, but I've been unable to get the drawPaths to actually draw. I'm curious whether there could be something lurking in css that has them set in such a way that they aren't drawing. As add'l info, I am using dc.js version: '2.0.0-beta.32'
Code for one of the charts looks like this:
zoneChart
.width(300)
.height(250)
.dimension(zoneDim)
.group(pointsByZone)
.innerRadius(20)
.externalLabels(50)
.drawPaths(true)
.externalRadiusPadding(50);
Any thoughts would be appreciated. Thanks!

Plugin for custom horizontal line Y-axis marker on grid of a Line chart with Chart.js

I need to create "up" and "low" markers on along the Y-axis of my Chart.js line chart. I can't seem to find an out-of-the-box way of doing this. Anybody can help me on how to write a plugin to achieve something like this? (See the horizontal red lines along the 70 and 50 Y-axis.
I found a plugin called Chart.Annotations.js on the Chart.js GitHub root page. It is exactly what I needed!
You need to add the following attributes to your options object. Add an annotations: attribute per line you want to draw. In my case I had 2.
annotation: {
annotations: [{
type:'line',
mode:'horizontal',
scaleID:'y-axis-1',
value:'10',
borderColor:'#000000',
borderWidth:2
}]
}
Look at this screenshot of my final implementation:

Show color thresholds in c3.js gauge

I'm trying to configure a c3gauge chart but I would like to show the threshold values in the chart (outside labels with the color would be nice) just to realize how far the value is from the next level.
Any one can help me?
This is the gauge now:
This is what I expect:
There is no specific option in c3.js Gauge chart to draw thresholds lines and legends, so I thought to use d3.js to add them to chart on rendered event:
onrendered: function() {
drawThresholds(this, thresholdOpts, opts);
}
Check this jsfiddle for complete example: https://jsfiddle.net/beaver71/032tcczg/
Output obtained looks like below:
and:

Categories

Resources