Format x_axis value


#1

I’m created line chart but can’t format x_axis.

Here attached some screenshot for details and required output.

current image :
image

required image:


#2

Hi @chamilmc!

The best way to change this, if you know exactly which dates you’d like as labels, would be to add a label property to your JSON payload for the widget rather than including each date with the point to add on the chart.

Here’s an example payload for this:

  "x_axis": { 
    "labels": ["2014-01-07", "2014-01-14", "2014-01-21", "2014-01-28"]
  }, 
  "series": [ 
    { 
      "name": "Visitors per month", 
      "data": [71173, 57624, 64851, 60486]
    } 
  ] 
}}'

And here’s how it looks when I push it to my widget:

Does this help?

Lisa


#3

Hi Lisa,

Thank you, But I prefer another way.
Here’s add my sample JSON.

{
“api_key”:"",
“data”:{
“x_axis”:{
“type”:“datetime”
},
“y_axis”:{
“format”:“decimal”,
“unit”:""
},
“series”:[
{
“name”:"",
“data”:[
[
“2017-06-26”,
323
],
[
“2017-06-27”,
323
],
[
“2017-06-28”,
324
],
[
“2017-06-29”,
232
],
[
“2017-06-30”,
328
],
[
“2017-07-01”,
327
],
[
“2017-07-02”,
326
],
[
“2017-07-03”,
323
],
[
“2017-07-04”,
318
],
[
“2017-07-05”,
318
],
[
“2017-07-06”,
319
],
[
“2017-07-07”,
318
],
[
“2017-07-08”,
319
],
[
“2017-07-09”,
318
],
[
“2017-07-10”,
318
],
[
“2017-07-11”,
319
],
[
“2017-07-12”,
320
],
[
“2017-07-13”,
322
],
[
“2017-07-14”,
324
],
[
“2017-07-15”,
324
],
[
“2017-07-16”,
323
],
[
“2017-07-17”,
316
],
[
“2017-07-18”,
312
],
[
“2017-07-19”,
318
],
[
“2017-07-20”,
320
],
[
“2017-07-21”,
324
],
[
“2017-07-22”,
324
],
[
“2017-07-23”,
323
],
[
“2017-07-24”,
323
],
[
“2017-07-25”,
326
],
[
“2017-07-26”,
326
],
[
“2017-07-27”,
326
],
[
“2017-07-28”,
318
],
[
“2017-07-29”,
320
],
[
“2017-07-30”,
318
],
[
“2017-07-31”,
316
],
[
“2017-08-01”,
320
],
[
“2017-08-02”,
323
],
[
“2017-08-03”,
324
],
[
“2017-08-04”,
327
],
[
“2017-08-05”,
326
],
[
“2017-08-06”,
326
],
[
“2017-08-07”,
323
],
[
“2017-08-08”,
323
],
[
“2017-08-09”,
330
],
[
“2017-08-10”,
333
],
[
“2017-08-11”,
331
],
[
“2017-08-12”,
331
],
[
“2017-08-13”,
333
],
[
“2017-08-14”,
331
],
[
“2017-08-15”,
331
],
[
“2017-08-16”,
331
],
[
“2017-08-17”,
330
],
[
“2017-08-18”,
327
],
[
“2017-08-19”,
327
],
[
“2017-08-20”,
320
],
[
“2017-08-21”,
320
],
[
“2017-08-22”,
320
],
[
“2017-08-23”,
323
],
[
“2017-08-24”,
320
],
[
“2017-08-25”,
322
],
[
“2017-08-26”,
320
],
[
“2017-08-27”,
315
],
[
“2017-08-28”,
309
],
[
“2017-08-29”,
309
],
[
“2017-08-30”,
313
],
[
“2017-08-31”,
316
],
[
“2017-09-01”,
316
],
[
“2017-09-02”,
316
],
[
“2017-09-03”,
313
],
[
“2017-09-04”,
312
],
[
“2017-09-05”,
312
],
[
“2017-09-06”,
312
],
[
“2017-09-07”,
313
],
[
“2017-09-08”,
311
],
[
“2017-09-09”,
312
],
[
“2017-09-10”,
311
],
[
“2017-09-11”,
311
],
[
“2017-09-12”,
309
],
[
“2017-09-13”,
315
],
[
“2017-09-14”,
333
],
[
“2017-09-15”,
335
],
[
“2017-09-16”,
328
],
[
“2017-09-17”,
328
],
[
“2017-09-18”,
328
],
[
“2017-09-19”,
328
],
[
“2017-09-20”,
347
],
[
“2017-09-21”,
347
],
[
“2017-09-22”,
344
],
[
“2017-09-23”,
342
],
[
“2017-09-24”,
341
],
[
“2017-09-25”,
341
],
[
“2017-09-26”,
347
],
[
“2017-09-27”,
351
],
[
“2017-09-28”,
358
],
[
“2017-09-29”,
368
],
[
“2017-09-30”,
361
],
[
“2017-10-01”,
358
],
[
“2017-10-02”,
356
],
[
“2017-10-03”,
356
]
]
}
]
}
}

====================
I need to only show x-axis like that

Inline image 1
"2017-08-01"/“2017-09-01”/2017-10-01"

how to set x-axis show value and y-axis gap.also how can change line colour.


#4

Hi again @chamilmc,

I’ve been speaking to the team about this and, short of overriding the labels for the X-axis in the way I suggested, there is no way to display the values on the x-axis in the format you want:

“2017-08-01”/“2017-09-01”/2017-10-01"

This is partially due the amount of space available, given the number of values that you’re sending, and partially due to the way that we show datetimes when they appear on the x-axis.

There definitely isn’t room for each of these dates to appear, but even if you only have two dates, for example a week apart, and make sure that there is plenty of room for the labels, they would be shown in the format day-month that can be seen here:

It is still possible to see the dates when you hover over the data points on your chart, if this is useful to you.

You also asked about the y-axis gap. Please could you give us a little more information about what you mean by this? Are you looking for more control over the values shown, for example, starting the y-axis at 300 and moving upwards in increments of 10 or something similar?

It is not possible to change the colour of lines used for the line chart - the first data series on any line chart, whether it has a single line or multiple lines, is always blue. Sorry about this! More control over this is definitely a great request for the future of the tools and something that I’m sure other users would also appreciate. I have made sure to bring this up with our product team.

Please do get back to us with more details about your y-axis question and if there is anything else that we can help with.

Best regards,

Lisa


#5

Hi Lisa,
Thanks a lot for your briefly explain about the line chart.

I think you got the idea, we need to set value gap for y-axis and show their values for the y-axis
eg: we start from 100 and gap should be 25
100/125/150/175 etc.

Best regards,
Chamil


#6

Hi again @chamilmc,

I’ve been looking into this for you.

You can set the minimum (and maximum) values for your y-axis as part of the widget configuration page, rather than as part of the payload sent to create the chart. You can see this here in the example widget I made:

2017-10-23_16-08-12

It is not possible to manually specify the interval used between these values on the y-axis. This is set automatically based on the datapoints sent to the chart and the size of the widget used.

Sorry that I don’t have the answer you were hoping for here but I hope this helps to explain what you’re seeing.

Please do let us know if you have more questions about this (or anything else).

Lisa