webix.ui({
"type": "clean",
"rows": [
{
"template": "<span class='webix_icon fa fa-bar-chart'></span>Cost across private clouds (MTD)",
"css": "sub_title",
"height": 30
},
{
"view": "chart",
"type": "line",
"xAxis": {
"template": "#xvalue#",
"lines": false,
"title": "Month-to-date"
},
"yAxis": {
"lines": false,
"title": "Cost (INR)"
},
"legend": {
"values": [
{
"text": "GCP_test",
"color": "#009CCC"
},
{
"text": "vmware",
"color": "#F58B1F"
},
{
"text": "hypervtest",
"color": "#FF7F8C"
},
{
"text": "AWS",
"color": "#8A4CA6"
},
{
"text": "Azure connection",
"color": "#FFD556"
}
],
"align": "right",
"valign": "middle",
"layout": "y"
},
"series": [
{
"value": "#gcp_test#",
"item": {
"borderColor": "#ffffff",
"color": "#009CCC"
},
"line": {
"color": "#009CCC"
},
"tooltip": {
"template": "#gcp_test# INR"
}
},
{
"value": "#vmware#",
"item": {
"borderColor": "#ffffff",
"color": "#F58B1F"
},
"line": {
"color": "#F58B1F"
},
"tooltip": {
"template": "#vmware# INR"
}
},
{
"value": "#hypervtest#",
"item": {
"borderColor": "#ffffff",
"color": "#FF7F8C"
},
"line": {
"color": "#FF7F8C"
},
"tooltip": {
"template": "#hypervtest# INR"
}
},
{
"value": "#aws#",
"item": {
"borderColor": "#ffffff",
"color": "#8A4CA6"
},
"line": {
"color": "#8A4CA6"
},
"tooltip": {
"template": "#aws# INR"
}
},
{
"value": "#azureconnection#",
"item": {
"borderColor": "#ffffff",
"color": "#FFD556"
},
"line": {
"color": "#FFD556"
},
"tooltip": {
"template": "#azureconnection# INR"
}
}
],
"data": [
{
"xvalue": "01-28",
"gcp_test": "0",
"vmware": "0",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "01-29",
"gcp_test": "0",
"vmware": "0",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "01-30",
"gcp_test": "0",
"vmware": "0",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "01-31",
"gcp_test": "0",
"vmware": "4.86",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-01",
"gcp_test": "0",
"vmware": "190.47",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-02",
"gcp_test": "0",
"vmware": "7.989999999999999",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-03",
"gcp_test": "0",
"vmware": "7.989999999999999",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-04",
"gcp_test": "0",
"vmware": "7.99",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-05",
"gcp_test": "0",
"vmware": "7.989999999999999",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-06",
"gcp_test": "0",
"vmware": "7.989999999999999",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-07",
"gcp_test": "0",
"vmware": "7.989999999999999",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-08",
"gcp_test": "0",
"vmware": "7.989999999999999",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-09",
"gcp_test": "0",
"vmware": "7.99",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-10",
"gcp_test": "0",
"vmware": "7.99",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-11",
"gcp_test": "0",
"vmware": "7.99",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-12",
"gcp_test": "0",
"vmware": "7.989999999999999",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-13",
"gcp_test": "0",
"vmware": "7.989999999999999",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-14",
"gcp_test": "0",
"vmware": "8.16",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-15",
"gcp_test": "0",
"vmware": "7.989999999999999",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-16",
"gcp_test": "0",
"vmware": "7.989999999999999",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
},
{
"xvalue": "02-17",
"gcp_test": "0",
"vmware": "7.989999999999999",
"hypervtest": "0",
"aws": "0",
"azureconnection": "0"
}
]
}
],
"id": "costacrossprivateclouds"
});
It is possible to achieve the needed appearance using xAxis template as a function which will return the labels depending on any condition.
The following code uses Webix date-related methods and native Date API to get the start of the week (Sunday) and compare it to the date got from the labels:
https://snippet.webix.com/bgk6ufxr
In general, there is plenty of methods in Webix to format the dates in the needed way.
However, more complex rules of date comparison may require usage of the native JS API for Date objects.