Hello All,

This issue with the documentation is scheduled to be updated in the upcoming documentation releases. For the time being please take in consideration, that both Get and Set require “option” to be passed.

// Get

var series = $(".selector").igDataChart("option", "series");

series[0];

//    Set

$(".selector").igDataChart("option", "series",

        [{

            name: "series1",

            dataSource: data1,

            title: "Price Series 1",

            type: "column",

            xAxis: "xAxis",

            yAxis: "yAxis",

            valueMemberPath: "Item1"

        }, {

            name: "series2",

            dataSource: data2,

            title: "Price Series 2",

            type: "column",

            xAxis: "xAxis",

            yAxis: "yAxis",

            valueMemberPath: "Item2"

        }]

    );

Thank you for posting in the community!

Hello Andre,
Thank you for your feedback and for sharing this with us. We believe that the other community members could benefit from such threads. 

Hi,

it is on this page:

http://help.infragistics.com/jQuery/2012.1/ui.igdatachart

if you choose the Tab "Options" and scroll down to series and open it then you can read following code:

Dear Infragistic-Team,

thank you for trying to help me. After a hard fight with your Online API and many different more or less successful ways to try to get my problem solved, i finally done it.

The way to get multiple series in one chart and multiple charts in one with using JQuery and AJAX is not really as simple as it is with the MVC-Helper directly in the View.

Here is the JQuery-Code:

function getChart() {
    $.ajax({
        url: actionURLs.JSON_IGChart.toString(),
        traditional: true, /* I M P O R T A N T */
        datatype: 'json',
        type: "post",

        success: function (result) {
            for (var i = 0; i < result.ChartData.length; i++) {
                for (var j = 0; j < result.ChartData[i].DataSeries.length; j++) {
                    
                    if ($("#chart" + i).length == 0) {
                        $("<div></div>").attr("id", "chart" + i).appendTo($("#igContent"));
                    }

                    $("#chart" + i).igDataChart({
                        width: "500px",
                        height: "500px",
                        dataSource: result.ChartData[i].DataSeries[j].DataPoints,
                        dataSourceType: 'json',
                        axes:
                        [
                            {
                                type: "numericY",
                                name: "yAxis"
                            },
                            {
                                dataSource: result.ChartData[0].DataSeries[0].DataPoints,
                                type:"categoryY",
                                name: "Right",
                                label: "Label",
                                labelLocation:"outsideRight"
                            }
                        ]
                    })

                    bindChart(result.ChartData[i].DataSeries[j], i, j);
                }

                var series = $("#chart" + i).igDataChart("option", "series");
                console.log(series);
            }
        },

        error: function (xhr, ajaxOptions, thrownError) {
            alert("Chart konnte nicht geladen werden");
        }
    });
}

function bindChart(data, index, serNr) {
    //console.log(data.DataPoints);

    if (data.ID == "failSerie") {

        $("#chart" + index).igDataChart("option", "axes",
            [
                {
                    dataSource: data.DataPoints,
                    type: "numericX",
                    name: "xAxis" + serNr,
                    labelTextColor: data.Color,
                    labelVisibility: "collapsed"
                }
            ])
        $("#chart" + index).igDataChart("option", "series", 
            [
                {
                    dataSource: data.DataPoints,
                    type: "scatter",
                    name: data.ID,
                    title: data.Name,
                    xAxis: "xAxis" + serNr,
                    yAxis: "yAxis",
                    xMemberPath: "Value",
                    yMemberPath: "Value",
                    markerType: "triangle",
                    brush: data.Color
                }
            ])
    } else {
        $("#chart" + index).igDataChart("option", "axes",
            [
                {
                    dataSource: data.DataPoints,
                    type: "categoryX",
                    name: "xAxis" + serNr,
                    label: "Label",
                    labelTextColor: data.Color
                }
            ])
        $("#chart" + index).igDataChart("option", "series",
            [
                {
                    dataSource: data.DataPoints,
                    type: "line",
                    name: data.ID,
                    title: data.Name,
                    xAxis: "xAxis" + serNr,
                    yAxis: "yAxis",
                    valueMemberPath: "Value",
                    markerType: "circle",
                    brush: data.Color
                }
            ]
        )
    }
}

Finding this solution wasn't really easy last but not least because of wrong information in the Onlie-Documentation

So the command of setting a series is:

$("selector").igDataChrat("option", series, [{...}])

but in the online documentation is written to use this command:

$("selector").igDataChrat(series, [{...}])

with this command nothing happens.

It is my advice to you, to check you Online-API and Online-Documentations. maybe there are more mistakes.

Sincerly
André