Chart property showValues not working in Fusion Charts zoomline chart - javascript

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.

Related

How does it implement this chart with highcharts?

https://institutional.fidelity.com/app/item/RD_13569_45180/the-art-and-science-of-investment-decision-making.html
There is a very nice graph and pie chart under Investment Decision-Making in 2016.
I know it is highcharts now. I want to write something similar. But I can't find any chart type similar in its document.
Could you tell me what kind of chart it is? And how to put different data items inside the bubble.
It looks like a combination of line, bubble and pie series.
Line series (alternative: scatter with lineWidth > 0) lies under the bubbles. All interaction with this series should be disabled (hover state, tooltip, etc.).
Text inside the bubble is data label (dataLabels.enabled property should be set to true). You can manage its content in dataLabels.formattercallback function.
You can handle showing/adding pie (donut) charts in plotOptions.bubble.point.events.mouseover callback function. Text in the middle of a donut can be rendered via SVGRenderer.text().
All options that I mentioned can be found in the API: https://api.highcharts.com/highcharts/

how to synchronize multiple d3 charts when zoomed?

function chart (data, selector) {
// generate chart with zoom feature. it scales the X domain and update the chart accordingly.
}
chart(dataset1, "#chart1")
chart(dataset2, "#chart2")
chart(datasetn, "#chartn")
the code above is a chart generator function which I give it different datasets to make me charts. in all charts, the dataset has the same X values but different Y values.
problem:
lets say we have 3 charts, all the X axis ranges are between 0-100. In the first chart, I drag mouse and create a zoombox between 30-60 and the first chart updates, now it is scaled between 30-60. But the second and third chart are intact. I need them to be updated as well between 30-60.
similarly if I do the same for second chart, I need the first and third one get updated.
here is jsfiddle to illustration
I made not so big modification to make this works.
First of all we remember globally the information about single chart in var charts array. This is done during creation of charts
charts.push(lineChart(data1,"#chart1"));
charts.push(lineChart(data2,"#chart2"));
charts.push(lineChart(data3,"#chart3"));
Next we can use this array in function zoomdrag and update.
This work maybe not perfect (reset of chart is missing) but show how to handle it and get the same zoom in all charts.
Here is jsfiddle

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!

Display gaps in a Sencha Touch Cartesian Chart

I would like to display gaps in a chart serie. I'm using Sencha Touch 2.4.1. I already tried to set the data to "no data" which results in a solid line between the surrounding data records (Sencha Fiddle). Setting the data to null results in a zero value in the chart.
Is there a way to display a gap in the serie?
Try the following fiddle: https://fiddle.sencha.com/#fiddle/lb9
It uses renderer to define transparent color for some parts of the chart. More information you can find here: http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.chart.series.Line-cfg-renderer

Google Charts API labels with lines

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:

Categories

Resources