Forum Discussion

eshaul's avatar
eshaul
Data Storage
02-29-2024

Create vertical line in line chart with dates as x-axis

hello,

I am trying to add vertial lines (indicating event in time) to a simple line chart with dates as x-axis.

Unfurtunatly i succeeded only adding a single line according to index on x-axis and not value.

Questions:

1. How can i add the line for specific values (dates)?

2. How can i add more than one line?

3. The label i added is not shown. any idea why?

 

 

widget.on('beforeviewloaded', function(widget, ev){
	ev.options.xAxis.plotLines = [{
		color: 'red',
		dashStyle: 'ShortDash',
		width: 2,
		value: 9,
		label : {
			text : 'ver2'
		}
	}]
	
});

 

 

7 Replies

    • eshaul's avatar
      eshaul
      Data Storage

      Hi Liliia_DevX ,

      Thanks for your reply, i am familiar with this thread, already looked at it, it is not helping me with the 3 issues i mentioned

      Thanks,

      Erez.

    • eshaul's avatar
      eshaul
      Data Storage

      Hi @Liliia_DevX ,

      As i wrote, the reference was not helpful, any other idea where can i look?

      • Liliia_DevX's avatar
        Liliia_DevX
        Sisense Employee

        Hi eshaul,

        Please try to use the following script as an example to implement your own solution:

        widget.on('processresult', function(w, ev) {
            let targetDates = ["2013-04-22T00:00:00", "2013-05-14T00:00:00"]; // Change these to your desired dates
            let indices = [];
        
            targetDates.forEach((targetDate) => {
                let currentDate = new Date(targetDate);
                ev.rawResult?.values.forEach((v, i) => {
                    // Assuming the x-axis values are dates, compare them with the target date
                    let dataDate = new Date(v[0].data);
                    if (currentDate.getTime() === dataDate.getTime()) {
                        indices.push(i);
                    }
                });
            });
        
            if (indices.length > 0) {
                ev.result.xAxis.plotLines = indices.map((index) => {
                    return {
                        color: '#FF0000',
                        width: 2,
                        dashStyle: "dash",
                        value: index
                    };
                });
            }
        });

        You need to adjust targetDates to make it work for the specific dates. It was tested with the following widget configuration:

        I'm afraid we don't have a ready-to-use example script to show also labels and it requires a further development investigation and implementation. 

        Hope this code snippet helps!

        Best Regards, Lily