Tool tip of K plot

[KuiMing]

Hello Yihui,

I'm trying to create K plot, but I can't let tool tip popup correctly. I think it's something wrong with JavaScript. Can you help me fix it up?

test=rbind( c(2320.26,2302.6,2287.3,2362.94),
            c(2300,2291.3,2288.26,2308.38),
            c(2295.35,2346.5,2295.35,2346.92),
            c(2347.22,2358.98,2337.35,2363.8))
names(test)=c('open', 'close', 'high', 'low')
K1 = list(
  title = list(
    text = 'test',
    subtext = 'From d3.js',
    x = 'right',
    y = 'bottom'
  ),

  tooltip = list(
    trigger = 'item',

# Something wrong here!!!
    formatter = JS("function (params) {
            var res = params[0].seriesName + ' ' + params[0].name;
            res += 'open : ' + params[0].value[0] + '  high : ' + params[0].value[3];
                   res += ' close : ' + params[0].value[1] + '  low : ' + params[0].value[2];
                   return res;
                   }")
  ),
  toolbox = list(
    show = TRUE,
    feature = list(
      restore = list(show = TRUE),
      saveAsImage = list(show = TRUE)
    )
  ),
  dataZoom =list(
    show =TRUE,
    realtime=TRUE,
    start = 50,
    end = 100
  ),
  xAxis=list(
    type = 'category',
    boundaryGap = TRUE,
    axisTick=list( onGap=FALSE),
    splitLine=list(show=FALSE),
    data =c(
      "2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29"
    )
  ),
  yAxis =list(
    type='value',
    scale=TRUE,
    boundaryGap=c(0.01, 0.01)
    ),
  series = list(
    list(
      type = 'k',
      name = c('open','close','high','low'),
      data = test
    )))

echart(K1)

[yihui]

It should be trigger = 'axis' instead of item: http://echarts.baidu.com/doc/example/k1.html

There are two additional problems in your data structure:

1. You should not assign a character vector to names(test) when test is a matrix (names(matrix) does not make any sense because a matrix only has row names and column names); in fact, test does not need row or column names at all.
2. The series name is wrong; it should not be a character vector of length greater than 1: c('open','close','high','low'). In the official ECharts example, it was '上证指数'.

So please be more careful when you apply ECharts examples to your own data :)

library(recharts)
test=rbind( c(2320.26,2302.6,2287.3,2362.94),
            c(2300,2291.3,2288.26,2308.38),
            c(2295.35,2346.5,2295.35,2346.92),
            c(2347.22,2358.98,2337.35,2363.8))
K1 = list(
  title = list(
    text = 'test',
    subtext = 'From d3.js',
    x = 'right',
    y = 'bottom'
  ),

  tooltip = list(
    trigger = 'axis',

    formatter = JS("function (params) {
                   var res = params[0].seriesName + ' ' + params[0].name;
                   res += 'open : ' + params[0].value[0] + '  high : ' + params[0].value[3];
                   res += ' close : ' + params[0].value[1] + '  low : ' + params[0].value[2];
                   return res;
                   }")
  ),
  toolbox = list(
    show = TRUE,
    feature = list(
      restore = list(show = TRUE),
      saveAsImage = list(show = TRUE)
    )
  ),
  dataZoom =list(
    show =TRUE,
    realtime=TRUE,
    start = 50,
    end = 100
  ),
  xAxis=list(
    type = 'category',
    boundaryGap = TRUE,
    axisTick=list( onGap=FALSE),
    splitLine=list(show=FALSE),
    data =c(
      "2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29"
    )
  ),
  yAxis =list(
    type='value',
    scale=TRUE,
    boundaryGap=c(0.01, 0.01)
  ),
  series = list(
    list(
      type = 'k',
      name = 'A NAME HERE',
      data = test
    )))

echart(K1)