Google Candlestick Chart setting line width not working - javascript

I'm using google charts (in GWT with gwt-charts library) and I'm trying to change the line width of a candlestick chart to 1 but it is not working
I'm using ComboChart with series of type Candlestick and I've tried setting lineWidth to 1 for "options" and "series" object, with no luck.
Is it possible that lineWidth has no effect on candlestick types ?
Code:
ComboChart chart = new ComboChart();
ComboChartOptions options = ComboChartOptions.create();
Legend legend = Legend.create();
legend.setPosition(LegendPosition.NONE);
options.setLegend(legend);
ComboChartSeries series = ComboChartSeries.create();
series.setType(SeriesType.CANDLESTICK);
series.setLineWidth(1);
options.setSeries(series);
options.setLineWidth(1);
// draw on data update
...
chart.draw(dataTable, options);

Unfortunatelly, candlestick.risingColor.strokeWidth and candlestick.falingColor.strokeWidth only affect the candle body. There is an enhancement request to customize shadows and wicks on https://github.com/google/google-visualization-issues/issues/1014 but the priority is low. If more users star this issue, Google team may speed up the solution.

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.

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

dc.js generate a pieChart with top 5 values

I'm visualizing a drug database of 200 entries. I've created a piechart using DC.js to show the frequency of each drug. The pie chart is cluttered with drugs that appear once.
I want to adjust this pie chart so that it visualizes the top 5 most used drugs i.e. the top 5 biggest slices of the pie chart.
Is there a way to use the .group() or .reduceSum() methods so only the biggest pie chart slices are shown?
As answered on the user group: Use the functions of the Cap Mixin, which is a base of the pie chart:
var pie = dc.pieChart("#pie-chart");
[...]
pie.cap(5);

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