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'
		}
	}]
	
});

 

 

Developers

7 Replies

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

      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
      03-02-2024

      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
        03-04-2024

        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