AmStockCharts Features - Formatting Queries

[datastorm-open]

AmStockCharts Features - Formatting Queries

[Djaiff]

Hi,

I am sorry but I don't have enough time to improve the package. But I can give you some elements :

1. Your first question deals with CSS customization. If you use shiny, you can link a stylesheet and refer to this page http://www.amcharts.com/tutorials/css-class-names/ and this tutorial http://www.amcharts.com/tutorials/css-animations/.
   For use outside Shiny, I will develop the features.
2. I think you can solve the problem by using the method setDataProviderwith the argument keepNA set to FALSE.
3. I can't access the page, could you maybe send me a new link as example of what you want to do ?

I hope this will help you.
Regards,

[debsush]

Hi,

For the third case, let us use the below example where external buttons are used to call the JS function to resize the charts. Similiarly, how can I use a Javascript function related to AmCharts within shiny which can be invoked on clicking a button.

JS function:
function resize( dim, dir, h ) {
/**

• Set appropriate container size
  */
  var container = $('.resizable');
  if ( 'd' == dim )
  container.css( { 'width': dir, 'height': h });
  else if ( 'w' == dim )
  container.css( { 'width': container.width() + dir } );
  else
  container.css( { 'height': container.height() + dir } );
  $( '#dims' ).html( Math.round( container.width() ) + 'x' + Math.round( container.height() ) + 'px' );

  /**

• Normally the charts will watch for window resize / orientation chang

• events to automatically resize themselves.
  *

• Since we're manipulating the container size manually, we need to

• trigger chart resize event as well.
  *

• Normally you won't have to do this.
  */
  chart.invalidateSize();
  }

Link:http://codepen.io/amcharts/pen/QwgEKQ/

I would like the solution to be generic so that I can apply it using any given JS function and external controls widgets such as buttons/checkboxinput etc.

Thank you

[debsush]

When I tried setDataProvider for AmStockCharts. I get the below error:

unable to find an inherited method for function ‘setDataProvider’ for signature ‘"AmStockChart", "logical", "logical"’. My code is below

pipeR::pipeline(
amStockChart(startDuration = 0,dataSets=dataSets_ls,theme="light"),
setDataProvider(keepNA = FALSE),
addPanel(
stockPanel(showCategoryAxis = TRUE,......),
addStockGraph(id = 'fg1',valueAxis = 'v1',.......)
)
Wonder where am I going wrong.

[Djaiff]

• The method setDataProvider is to use when you define the DataSets. Tell me if it does not work.
• Regarding the JavaScript functions, I cannot create generic functions in the package source code. However if you use Shiny, you can either create a .js script that you source in the UI or use other packages to link the JavaScript functions to your webpage. Then you can use shiny functions to get the reactivity.
  There is a basic example that can help here (using 'shinyjs') https://cran.r-project.org/web/packages/shinyjs/vignettes/overview.html. I should have a little time today for trying to give an example.

[debsush]

Hi,
I was able to work out the keepNA functionality. Thank you for the suggestion.
On point#1, I am able to work with CSS but cannot add a label to a stock panel. I think the below is a better example than the one I gave previously.
http://www.amcharts.com/tips/placing-watermark-label-relatively-plot-area-position/

My code:
pipeR::pipeline(
amStockChart(......),
addPanel(stockPanel(......)%>>%
addValueAxis(........)%>>%
addStockGraph(..........)%>>%
setStockLegend(.........)%>>%
addListener('init', paste('function() {',
addListener('init', paste('function() {',
'setTimeout(function() {',
'chart.allLabels = [{',
'x: chart.marginLeftReal + 20,',
'y: chart.marginTopReal + 20,',
'text: "Watermark label",',
'size: 20,',
'alpha: 0.3',
'}];',
' chart.validateNow();',
'}, 100);','}'))),
setCategoryAxesSettings(.............),
setValueAxesSettings(............)
)
The above code is not able to produce the watermark text in the stock panel background.

Regards,

[Djaiff]

Hi,

It seems to be easier to set the watermark on a serial chart:

pipeR::pipeline(
  amSerialChart(dataDateFormat = 'YYYY',categoryField = 'year', startDuration = 0),
  setDataProvider(data.frame(year = 1990:2015, value = runif(length(1990:2015), -1, 1))),
  addValueAxes(axisAlpha = 0, position = 'left'),
  addGraph(id = 'g1', type =  'column', valueField =  'value', fillAlphas = 1),
  setCategoryAxis(minPeriod = 'YYYY', parseDates = TRUE),
  addListener('init', paste('function(event) {',
                            'setTimeout(function() {',
                            '   event.chart.allLabels = [{',
                            '      x: event.chart.marginLeftReal + 20,',
                            '      y: event.chart.marginTopReal + 20,',
                            '      text: "Watermark label",',
                            '      size: 20,',
                            '      color: "green",',
                            '      alpha: 1',
                            '   }];',
                            '   event.chart.validateNow()',
                            '}, 100)}'))
)

I still do not find out how to set the watermark with js code. Did you try with the CSS setting ?

[debsush]

I wonder why did the above solution not work for an AmStockChart since each panel in a Stock Chart is equivalent to a Serial Chart.
Yes, I could get the watermark label using CSS but the reason I wanted either AddListener or Js code to work is because I wanted to parameterize the text in the watermark label. For example, the watermark text = Indicator that the user is analyzing. (say Stock Price or Volume etc)

I continue to look for solutions around Js code. I do not think it has anything to do with your awesome package but rather to do with my Ubuntu and the V8 package which it does not support

Regards,

[debsush]

I have figured this out and am closing the issue. Thank you

[JianWang2016]

Could you please share your solution?