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
Hello Maneesh,
I have been investigating into the behavior you are looking to achieve, and from the screenshot you have provided, it looks like your X-Axis has a numeric data type. Additionally, from your final comments, it sounds like you want to designate PointX and PointY for the member paths of the series that you are adding to the chart.
If both of the above things are true, I would recommend that you instead use a NumericX and NumericY axis. You can then use a ScatterPoint and ScatterLine series in the igDataChart, which allows you to designate the XMemberPath and YMemberPath properties of the series, given that they are both numeric. This seems to me to be more akin to what you are looking to do, and if you are, you can find a code example for the “scatter” family of charts here: https://www.igniteui.com/data-chart/charts-scatter-series.
Please let me know if you have any other questions or concerns on this matter.
Hi Andrew,
Thanks for the advice, Yeah scatter works as i expected. But now i am facing another issue.
I am not able to see tooltip for Line scatter, but able to see for Point.
Please find the below sample output and code which i am using currently
Output
Here you can see that tooltip is working for point but when i hover over the line no tooltip is visible
Sample Code
CreateChart("#Chart", "Sample");
function CreateSeries(seriesType,XV,YV) {
var markerType = "none"; if (seriesType == "scatter" ) { markerType = "circle"; }
var series = { name: XV + "Series", type: seriesType, title: YV, xAxis: "xAxis", yAxis: "yAxis", xMemberPath: XV, yMemberPath: YV, markerType: markerType, showTooltip: true, thickness: 3 };
return series; }
function CreateChart(selector, title) { $(selector).igDataChart({ width: "780px", height: "300px", title: title, horizontalZoomable: true, verticalZoomable: true, legend: { element: "legendOne",type:"legendOne" }, //windowResponse: "immediate", dataSource: data, axes: [{ name: "xAxis", type: "numericX", interval: 5, title: "X axis", }, { name: "yAxis", type: "numericY", title: "Y axis", abbreviateLargeNumbers: true, }], series: [ CreateSeries("scatter","PointX","PointY"), CreateSeries("scatterLine","LineX","LineY"), ] }); }
Thank you for your update on this matter.
I have created a sample project on my end to try to mimic the behavior you are seeing, but unfortunately, I cannot seem to reproduce the behavior you are seeing as the tooltip is showing correctly on my end for the Scatter Line series. I am attaching the sample project I used to test this. My tests were made against the latest 2021 CDN JQuery packages. If you are using a different version, please let me know.
It is also worth noting that the tooltip on the Scatter Line series will show for the nearest underlying data point, and not for the value on an arbitrary point on the line.
NewChartTest.zip
Yeah, I am using 2016 CDN Jquery Packages(16.1.20161.1009). Can you suggest a solution in that version.
Thanks,
Maneesh
I have reverted my sample to use 2016.1, and it appears that in that version we only supported tooltips directly on the markers of the line-based series and not the line itself. I see that you are setting the markerType to “none” for your Scatter Line series at the moment, but if you want to have tooltips in 2016.1, you will need to have a markerType for that series.