-2

I want to develop a range slider like same as it is shown at http://www.amcharts.com/demos/line-chart-with-scroll-and-zoom/#theme-light

Basically the idea is to develop a chart and add a range slider. is there any idea that how i can set the chart as background of range slider?

Thanks,

Aqdas
  • 868
  • 4
  • 16
  • 57
  • You mean like this: http://bl.ocks.org/mbostock/1667367? – Mark Jul 23 '15 at 19:02
  • yes please. I am using kendo ui and have no issue with any other javascript library. – Aqdas Jul 23 '15 at 19:04
  • but using json not csv data – Aqdas Jul 23 '15 at 19:09
  • 1
    I won't and I doubt anyone else is going to do the work for you. Take a crack at it and come back with the **specific** problems... – Mark Jul 23 '15 at 19:13
  • bro i am going byself :-S, i have copy pasted code mentioned below, and its working fine. Issue is, it has no rangeslider, but when i click and move mouse, then it shows the area which is selected. – Aqdas Jul 23 '15 at 19:15
  • my requirement is rangeslider with background as same graph – Aqdas Jul 23 '15 at 19:26
  • http://jsfiddle.net/aqdasiftekhar/L41p61w9/8/ Please have a look at this. I need to get selected value from data – Aqdas Jul 27 '15 at 11:35

1 Answers1

1

The background is already the same chart in the rangeslider.

You cannot logically move the range slider into main area - where would you drag the slider to?

However, if you are just looking to select a moving window (say as a filter), you can do it by resizing the chartScrollbar to fill the height of the chart (leaving a bit so that it doesn't get clipped off)

"scrollbarHeight": 490

and the hiding the actual chart's components (points, lines, axes, tooltips) using CSS so that they don't interfere.

#chartdiv svg > g:nth-child(<<index of layer to hide>>) {
  display: none;
}

If you want the axes, identify the chart layer with the axes and set it's transform to translate(0, 0) so that it overlaps the scrollbarChart.

CodePen - http://codepen.io/anon/pen/waYzpw

enter image description here

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • http://jsfiddle.net/aqdasiftekhar/L41p61w9/8/ Please have a look at this. I need to get selected value from data – Aqdas Jul 27 '15 at 11:36
  • it's available in brushed() - `console.log(brush.empty() ? x2.domain() : brush.extent());` – potatopeelings Jul 27 '15 at 12:10
  • wow, great Thanks for helping me bro. i wish i could give you one more vote :-) – Aqdas Jul 27 '15 at 12:15
  • based on link http://jsfiddle.net/aqdasiftekhar/L41p61w9/8/, is it possible that it shows only date/week/month and year but not time if there is very small data. i.e. 2 dates only? – Aqdas Jul 28 '15 at 16:42