Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Tedi
30
How to plot scatter and line series
posted

Hi Team,

Me and my team are considering to use infragistics jquery component especially the html5 chart, and it seems that it is still in ctp version. Any ideas when is the RTM released?

I have another question which is how to plot a scatter and line series within one chart. From your example, I noticed that for scatter you need to specify x and y value which is correct, but why for the line series, you only need to specify valuememberPath instead of x and y like scatter. Attached is just an example of what I am trying to achieve. Could you please show me just a simple example on how to do it? (Not neccessary to look like the one in the pic)

Cheers

 

Parents
No Data
Reply
  • 1775
    Suggested Answer
    posted

    Hello ifvantedi,

    We are pleased that you consider our jQuery library and the charts in particular. The library will be RTM in the next release which is 2012 volume 1.

    As to scatter and line series, the explanation is that in the current implementation scatter and line series are mapped to different x-axes. Scatter is mapped to a ‘numericX’ x-axis and line is mapped to ‘categoryX’ x-axis. The ‘categoryX’ axis for line maps itself the x-component and the line series maps the y-component of the coordinates. That means you need to specify two x-axes in order to accommodate scatter and line series in one chart.

    By looking at your example I assumed you have different data sources for the scatter and line series and I produced the example below (sorry, it really doesn’t look like yours). See how I attached the lineData array to the lineX axis and the lineSeries to define and plot the line series, and also I attached the scatterData to the scatterSeries to define and plot the scatter series. The attached image shows how this code is rendered on screen.

     

    Code Snippet
    1. var scatterData = [
    2.         { "arg": 0.0, "val": 0.0 },
    3.         { "arg": 0.1, "val": 0.25 },
    4.         { "arg": 0.2, "val": 0.55 },
    5.         { "arg": 0.3, "val": 0.88 },
    6.         { "arg": 0.35, "val": 1.22 },
    7.         { "arg": 0.42, "val": 1.33 }
    8.     ];
    9.  
    10. var lineData = [
    11.         { "arg": 0.0, "val": 0.0 },
    12.         { "arg": 0.23, "val": 0.33 },
    13.         { "arg": 0.38, "val": 0.55 },
    14.         { "arg": 0.44, "val": 0.88 },
    15.         { "arg": 0.55, "val": 1.22 },
    16.         { "arg": 0.83, "val": 1.33 }
    17.     ];
    18.  
    19. $(function () {
    20.     $("#chart").igDataChart({
    21.         axes: [{
    22.             type: "numericX",
    23.             name: "scatX"
    24.         }, {
    25.             type: "categoryX",
    26.             name: "lineX",
    27.             dataSource: lineData,
    28.             labelVisibility: "collapsed",   //  do not display labels
    29.             majorStroke: "rgba(0, 0, 0, 0)" //  transparent
    30.         }, {
    31.             type: "numericY",
    32.             name: "funcAxis"
    33.         }],
    34.         series: [
    35.         {
    36.             type: "scatter",
    37.             name: "scatterSeries",
    38.             title: "Scatter",
    39.             dataSource: scatterData,
    40.             xAxis: "scatX",
    41.             yAxis: "funcAxis",
    42.             xMemberPath: "arg",
    43.             yMemberPath: "val",
    44.             legend: { element: "legend" }
    45.         }, {
    46.             type: "line",
    47.             name: "lineSeries",
    48.             title: "Line",
    49.             dataSource: lineData,
    50.             xAxis: "lineX",
    51.             yAxis: "funcAxis",
    52.             valueMemberPath: "val",
    53.             legend: { element: "legend" }
    54.         }]
    55.     });
    56. });

    If you need further assistance do not hesitate to ask.

    Cheers

Children