toolTip contentFormatter – take earlier dataPoint when not present

[adrian3k]

Hello,

First of all – Hi to all members!
Second – Great job on CanvasJS – I’m a js newbie and it is quite nice thing to work on :)

Now, the problem im facing:

I have a chart with multiple lines, I use toolTip contentFormatter to have all the needed info from all the graphs. But I cannot ‘trick’ the contentFormatter function to use ‘earlier’ dataPoint if it is not present.

Example:

data: [{
type: "spline",
name: "1.",
xValueFormatString: "DD MM YYYY",
dataPoints: [
	{ z: 500, zz: " mg", x: new Date(2020, 5, 1),  y: 2 },
	{ z: 500, zz: " mg", x: new Date(2020, 5, 3), y: 3 },
	{ z: 500, zz: " mg", x: new Date(2020, 5, 8),  y: 3 },
	{ z: 500, zz: " mg", x: new Date(2020, 5, 9), y: 4 },
	{ z: 500, zz: " mg", x: new Date(2020, 5, 16), y: 6 },
	{ z: 500, zz: " mg", x: new Date(2020, 5, 23), y: 8 },
]},{
type: "spline",
name: "2.",
xValueFormatString: "DD MM YYYY",
dataPoints: [
	{ z: 5000, zz: " IU", x: new Date(2020, 4, 10),  y: 2 },
	{ z: 5000, zz: " IU", x: new Date(2020, 4, 12), y: 2 },
	{ z: 5000, zz: " IU", x: new Date(2020, 5, 9), y: 2 },
	{ z: 5000, zz: " IU", x: new Date(2020, 5, 16), y: 3 },
]},{
type: "spline",
name: "3.",
xValueFormatString: "DD MM YYYY",
dataPoints: [
	{ z: 100, zz: " mcg", x: new Date(2020, 4, 10),  y: 2 },
	{ z: 100, zz: " mcg", x: new Date(2020, 4, 17),  y: 2 },
	{ z: 100, zz: " mcg", x: new Date(2020, 5, 9), y: 2 },
	{ z: 100, zz: " mcg", x: new Date(2020, 5, 16), y: 3 },
]},

As you can see “1.” contain nothing on Date 2020, 4
And “2.” and “3.” contain nothing on Date 2020, 5, 8

Is there a way to use the ‘earlier’ dataPoint?
Let’s say I want to check Date 2020, 5, 8:
“2.” is empty (I would like to take info from 2020, 4, 12)
“3.” is empty (I would like to take info from 2020, 4, 17)

Oh, the tooltip contentFormatter:

toolTip: {
shared: true,
contentFormatter: function (e) {
	var content = " ";
	for (var i = 0; i < e.entries.length; i++) {
	content += e.entries[i].dataSeries.name + ": " + e.entries[i].dataPoint.y * e.entries[i].dataPoint.z + e.entries[i].dataPoint.zz;
	content += "<br/>";
	}
return content;
}},

[adrian3k]

And not to create another topic (this one should be easier, I think)
Is there a way to set AxisX using dates from dataPoints and current date to, lets say, 2 week difference?

first dataPoint: 2020, 1, 1
current Date: 2020, 5, 30

dataPoints (multiple different values of Date)

2020, 1, 3
2020, 1, 18
2020, 2, 4
2020, 2, 13
2020, 2, 19
etc.

I would like to have AxisX to contain:

2020, 1, 1
2020, 1, 15
2020, 2, 1
2020, 2, 15
etc.
until current date: 2020, 5, 30 (last one should 'change' everyday)

[adrian3k]

Url to fiddle: see the code / chart

[Shashi Ranjan]

@adrian3k,

ToolTip is shown for every dataPoint. When toolTip shared property is set to true, all the y-values from each series for the corresponding x-value in the chart (if any dataPoint present) are shown. If the y-value is not present in one of the series, the toolTip content will show the y-values for the rest of the series. It’s not possible to show the previous y-value when it’s not present in one of the series as it’s for corresponding x-value and not previous.

—
Shashi Ranjan
Team CanvasJS

[adrian3k]

cant reply

after i tried to edit post i got this — Cloudflare Ray ID: 59e5006d6b0f973c

Sorry, you have been blocked
You are unable to access canvasjs.com

Why have I been blocked?
This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.

What can I do to resolve this?
You can email the site owner to let them know you were blocked. Please include what you were doing when this page came up and the Cloudflare Ray ID found at the bottom of this page.

• This reply was modified 3 years, 10 months ago by adrian3k.
• This reply was modified 3 years, 10 months ago by adrian3k.

[adrian3k]

Thank you for reply.. is there a way to use function to “generate dataPoint” so it can make all the nonpresent y-value same?

code would be here but got blocked by cloudflare

and then go with some var-lastline-container in function, like:

code would be here but got blocked by cloudflare

Maybe this would be a better way to go with my “idea”?

And back to second question – the x-axis data from first to current in 2 week split – is it possible?

[Shashi Ranjan]

@adrian3k,

It seems like posting your reply got blocked by Cloudflare. This could happen when your reply has some content that Cloudflare considers as malicious.

Please upload your sample project to Google-Drive or Onedrive and share it with us so that we can look into it and help you resolve.

—
Shashi Ranjan
Team CanvasJS

[adrian3k]

@shashiranjan,
Post in plain TXT file

Hope it will be okay to view this in plain text (forum style would be better..)

Thank you for your time!

New idea
Maybe use Array’s to achieve my goals?

Go with array for AxisX (generate all the 2020,1,1 2020,1,15 2020,2,1 2020,2,15 etc)
Then make array for chart lines containing all the data (with day and other values)

And at the end use functions to compare dates and insert value from ‘earlier’ date?

But not sure if it can be achieved in canvasJS to insert dataPoint from array’s/functions :D

[Shashi Ranjan]

@adrian3k,

Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with the sample data along with a brief description of your exact requirement so that we can look into the code, run it locally to understand the scenario better and help you resolve?

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

Having a sample project helps us in figuring out the issue and suggesting an appropriate solution accordingly.

—
Shashi Ranjan
Team CanvasJS

[adrian3k]

@shashiranjan

earlier fiddle: first post problem / example
Here is the code with some data (some dates are missing content – it can’t be resolved, reply from 1 june)
But the idea is to “generate dataPoints” using function for data.name – is it possible?

Will try to make some code for the ‘idea’ with Array’s – will need some free time for it :)

[Shashi Ranjan]

@adrian3k,

As mentioned earlier, when toolTip shared property is enabled all the y-values corresponding to that particular x-value from each of the dataSeries are shown. If a dataSeries does not contain any dataPoints corresponding to that particular x-value it will not be shown in the toolTip.

—
Shashi Ranjan
Team CanvasJS