Hi,

I am trying to display line and point on a single chart. But here the X axis and Y axis values for line and point have different data.

How to give two X-axis values in series chart ?

Expected Output

Code I am using : Table [A] have columns - LineX,LineY,PointX,PointY. 

for (var i = 0; i < lenght; i++)

{
data.push({  'LineX': LineX[i], 'LineY': LineY[i] , 'PointX': PointX[0],'PointY': PointY[0] });
}

function CreateChart(chartID, chartTitle) {
$(chartID).igDataChart({
width: "780px",
height: "300px",
title: chartTitle,
titleTextColor: 'black',
horizontalZoomable: true,
verticalZoomable: true,
dataSource: data,
legend: { element: "legendOne",type:"legendOne" },
axes: [
{
name: "xAxis", type: "categoryX",label: "LineX", title: "Line X", titleTextColor: "black",
labelTextStyle: "10pt Segoe UI",
},
{
name: "yAxis", type: "numericY", title: "Y Value", titleTextColor: "black", titleAngle: -90,
labelTextStyle: "10pt Segoe UI",
}
],
series: [
CreateSeries("point", "PointY"),
CreateSeries("line", "LineY")
]
});
}

function CreateSeries(seriesType, seriesMemberPath) {
var thickness = 3;
var markerType;
if (seriesType == "point") {
markerType = "circle";
}
else{
markerType = "none";
}
var series = {
type: seriesType,
markerType: markerType,
xAxis: "xAxis",
yAxis: "yAxis",
name: seriesMemberPath + "series",
title: seriesMemberPath,
valueMemberPath: seriesMemberPath,
isTransitionInEnabled: true,
isHighlightingEnabled: false,
showTooltip: true,
thickness: thickness
}
return series;
}

Here, we cannot give PointX value, X axis is only taking the LineX Value.

For above coding we are getting multiple Points. Find the below Screenshot