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
Maneesh Chandran
30
Line and Point on single chart with different X and Y Values
posted

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