X-Axis labeling Contour.js

Dear Support Team, Dear Community,

First of all, thank you for taking your time to read through and answer my question related to X-Axis labeling in Contour.

I have input data with a custom dimension, which I want to have on my X-Axis. Therefore, as the procedure only provides indexed data points from 0 to N, I decided to go for a solution that accesses the keys, that are sent in the Json-Object and loop through.

					xAxis: {
						labels: {
							formatter: function(d) {
								return Object.keys(data.variable)[d];
							}
						}
					},

Would there be another, more natural solution in contour, as I do feel that this is more of a workarround rather than a natural workflow in the library.

Furthermore I wanted to ask, if the X-Axis of a bar chart can also be set via the setData() or a comparable function. As the data object, that is passed is solely an array indexed from 0 onwards.

I have added the full code as a reference below.

Have a great day!
Julian

	 Flow.channel.variables.subscribe("variable", function(data) { 
		console.log("variable");
		console.log(data);
		 console.log(data.variable);
		var data_array = [];
		var counter = 0;
		for(var key in data.variable){
			data_array[counter] = data.variable[key][0]
			counter ++
		};
		$(function variable_chart() {
			chart_test = document.getElementById("variable_chart");
			console.log(chart_test);
			contains_svg = chart_test.getElementsByTagName("svg");
			if(contains_svg.length == 0){
				variable_chart_object= new Contour({ 
					el: '#variable_chart',
					xAxis: {
						labels: {
							formatter: function(d) {
								return Object.keys(data.variable)[d];
							}
						}
					},
				})
				.cartesian()
				.column(data_array)
				.drawable()
				.render();
			} else {
				console.log("update chart");
				variable_chart_object.setData(data_array).render();
			}
		});
     });

Hi Julian,
We apologize for the delay.
We will reach out to you after we further review this issue (as well as your previous posted issues).
You can also reach us at support@forio.com
Regards,
Geromel

Hi Julian,

Our apologies for the (very long) delay, we had issues with our notification system and missed alerts of new posts.

If you’re still having this issue, can you provide a json snippet of what data.variable looks like ? Your code looks fine, but I’m having trouble picturing the expected output - a link to your simulation would be great as well. That said, a few notes:

  • You can define custom categories for the X-Axis labels
  • In general manipulating the X-axis data directly is an anti-pattern. The better solution is to use setData on the chart, as you’re doing now and rely on the formatter to update the axis. If your issue is that the data indices don’t correspond 1:1 with the X values, you also specify your data as x-y pairs

If you send us a link to the simulation / an example of data.variable + expected visual I can provide more specifics. You can also modify this jsfiddle showcasing the behavior is that’s easier.