Data points Overlap in XY chart - 8.0.15

IGNITION - PERSPECTIVE
1.How to avoid Datapoints Overlap in XY Chart when we need to visualize the data for longer date range
2. How to configure the dates in X axis without skipping the date sequence

Show us the dataSources that are being used to generate the chart.

  • In Property Editor, right-click on dataSources.
  • Copy.
  • Paste in here.
  • Format it using the </> button on the editor toolbar.
  • Preview before posting.

Apologies for the confusion. Please refer the formatted text below and do the needful

Preformatted text[
{
"type": "ia.chart.xy",
"version": 0,
"props": {
"title": {
"text": "Day - Energy",
"appearance": {
"color": "#000000"
}
},
"subtitle": {
"appearance": {
"color": "#000000"
}
},
"legend": {
"position": "right",
"absolute": {
"x": 10,
"y": 10
},
"markers": {
"stroke": {
"color": "#D5D5D5"
},
"icon": {
"color": "#D5D5D5",
"horizontalCenter": "none"
}
},
"labels": {
"font": {
"weight": 500,
"size": 9,
"color": "#000000"
}
}
},
"enableTransitions": true,
"scrollBars": {
"horizontal": {
"enabled": false
},
"vertical": {
"enabled": false
}
},
"xAxes": [
{
"name": "time",
"label": {
"enabled": false,
"text": "Time",
"color": ""
},
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"inversed": false,
"render": "date",
"category": {
"break": {
"enabled": false,
"startCategory": "",
"endCategory": "",
"size": 0.05
}
},
"date": {
"baseInterval": {
"enabled": true,
"timeUnit": "hour",
"count": 1,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.05
},
"inputFormat": "M/d/yyyy",
"format": "M/d"
},
"value": {
"range": {
"max": "",
"min": "",
"useStrict": false
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 100,
"size": 0.05
},
"format": "#,###.##"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "#2B2B2B",
"opacity": 1
},
"grid": {
"color": "",
"opacity": 0,
"dashArray": "",
"minDistance": 60,
"position": 0.5
},
"font": {
"size": 10,
"weight": 1000
}
}
}
],
"yAxes": [
{
"name": "kwh",
"label": {
"enabled": true,
"text": "kWh",
"color": "#000000"
},
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"inversed": false,
"render": "value",
"category": {
"break": {
"enabled": false,
"startCategory": "",
"endCategory": "",
"size": 0.05
}
},
"date": {
"baseInterval": {
"enabled": false,
"timeUnit": "hour",
"count": 1,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.05
},
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"format": "M/d/yyyy HH:mm:ss"
},
"value": {
"range": {
"max": "",
"min": "",
"useStrict": false
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 100,
"size": 0.05
},
"format": "#,###.##"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "#2B2B2B",
"opacity": 1
},
"grid": {
"color": "",
"opacity": 0,
"dashArray": "",
"minDistance": null,
"position": 0.5
},
"font": {
"size": 10,
"weight": 1000
}
}
}
],
"series": [
{
"name": "s1",
"label": {
"text": "shift1"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "example",
"x": "time",
"y": "s1"
},
"xAxis": "time",
"yAxis": "kwh",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]\nDate:[bold]{dateX}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "column",
"candlestick": {
"open": {
"x": "",
"y": ""
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"appearance": {
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"stacked": false,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"column": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"fill": {
"color": "#D6D614",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"stacked": true,
"width": null,
"height": null,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"line": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "",
"dashArray": ""
},
"fill": {
"opacity": 0,
"color": ""
},
"bullets": [
{
"enabled": false,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"rotation": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
},
"stepLine": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "",
"dashArray": ""
},
"fill": {
"opacity": 0,
"color": ""
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"rotation": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
}
},
{
"candlestick": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"stacked": false,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
}
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"open": {
"x": "",
"y": ""
}
},
"column": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "#3366CC",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"height": null,
"stacked": true,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"width": null
},
"open": {
"x": "",
"y": ""
}
},
"data": {
"source": "example",
"x": "time",
"y": "s2"
},
"defaultState": {
"visible": true
},
"hiddenInLegend": false,
"label": {
"text": "shift2"
},
"line": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": false,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"name": "s2",
"render": "column",
"stepLine": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": true,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]\nDate:[bold]{dateX}[/]"
},
"visible": true,
"xAxis": "time",
"yAxis": "kwh",
"zIndex": 0
},
{
"candlestick": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"stacked": false,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
}
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"open": {
"x": "",
"y": ""
}
},
"column": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "#4FC86C",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"height": null,
"stacked": true,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"width": null
},
"open": {
"x": "",
"y": ""
}
},
"data": {
"source": "example",
"x": "time",
"y": "s3"
},
"defaultState": {
"visible": true
},
"hiddenInLegend": false,
"label": {
"text": "shift3"
},
"line": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": false,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"name": "s3",
"render": "column",
"stepLine": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": true,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]\nDate:[bold]{dateX}[/]"
},
"visible": true,
"xAxis": "time",
"yAxis": "kwh",
"zIndex": 0
}
],
"style": {
"backgroundColor": "#CCCCFF",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": 15,
"fontWeight": "bold",
"textAlign": "start"
},
"dataSources": {}
},
"meta": {
"visible": false,
"name": "XYChart"
},
"position": {
"x": 19.85930000000002,
"y": 8.7747,
"height": 265,
"width": 740
},
"custom": {},
"propConfig": {
"props.dataSources.example": {
"binding": {
"type": "query",
"config": {
"queryPath": "Shift_Final",
"parameters": {
"st": "dateArithmetic({.../DateTimeInput.props.value}, -6, "days")",
"ln": "{.../Line_Dropdown.props.value}",
"ma": "{.../Machine_Dropdown.props.value}",
"bg": "{.../BG_Dropdown.props.value}",
"pl": "{.../Plant_Dropdown.props.value}",
"sp": "dateArithmetic({.../DateTimeInput.props.value}, 1, "days")"
}
}
}
}
}
}
]

The data looks OK (although you didn't manage to format it). The format button works the same as any other formatting button such as Bold or Italics: select the text then press the button.

We'll need to see how you've configured the XY Chart.

  • In Project Browser, right-click on the XY Chart.
  • Select Copy.
  • Paste it in here.
  • Select all the code and format it using the </> button on the editor toolbar.
  • Preview before posting and fix it if it's wrong. It should look like this:
[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "xAxes": [
        {
          "name": "time",
          "label": {
            "enabled": true,
            "text": "Time",
            "color": ""
          },
          "visible": true,
        etc. ...
1 Like

{ Please follow @Transistor 's instructions. The most helpful people around here are unlikely to help you if you don't help them by clearly formatting your posts. Visible indentation is vital information, and your post doesn't have it. Click the "pencil" icon to edit your post and follow instructions. }

Apologies for the confusion. I have updated the formatted text above as per the instructions. kindly refer and give suggestions

It is not formatted. It still shows no indentation. Select your json/python/log text/whatever then click the "Preformatted Text" button.

1 Like

Quick question:
Does this look formatted to you?


compared to @Transistor 's

(If you get RSI when scrolling to reach the bottom of your own single post, then you've probably not formatted it right)

Again Apologies for the confusion I hope the below text will be in correct format

  1. In that txt I need to know what parameters i need to pass for st and sp inorder to get the output for current date and previous 6 days value. kindly give suggestions regarding all parameters
[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "title": {
        "text": "Day Energy (in kWh)",
        "appearance": {
          "color": "#000000"
        }
      },
      "legend": {
        "markers": {
          "width": 10,
          "height": 3
        }
      },
      "cursor": {
        "lineX": {
          "stroke": {
            "width": 0.5
          }
        }
      },
      "background": {
        "gradient": {
          "rotation": 90
        }
      },
      "xAxes": [
        {
          "name": "time",
          "label": {
            "enabled": true,
            "text": "Date",
            "color": "#000000"
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "date",
          "category": {
            "break": {
              "enabled": true,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": true,
              "timeUnit": "day",
              "count": 1,
              "skipEmptyPeriods": true
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "dd-MM-yy"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "#000000",
              "opacity": 1
            },
            "grid": {
              "color": "",
              "opacity": 0,
              "dashArray": "",
              "minDistance": 50,
              "position": 0.5
            },
            "font": {
              "size": 15,
              "weight": 700
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "Diff",
          "label": {
            "enabled": true,
            "text": "kWh",
            "color": "#000000"
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "value",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": true,
              "timeUnit": "day",
              "count": 1,
              "skipEmptyPeriods": true
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "HH:mm:ss"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "#000000",
              "opacity": 1
            },
            "grid": {
              "color": "",
              "opacity": 0,
              "dashArray": "",
              "minDistance": null,
              "position": 0.5
            },
            "font": {
              "size": 15,
              "weight": 700
            }
          }
        }
      ],
      "series": [
        {
          "name": "Diff",
          "label": {
            "text": "kWh"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "example",
            "x": "time",
            "y": "Diff"
          },
          "xAxis": "time",
          "yAxis": "Diff",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]\n Date:[bold]{dateX}[/]",
            "cornerRadius": 1,
            "pointerLength": 1,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "column",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "#8A8AFF",
                "opacity": 1
              },
              "stroke": {
                "color": "#555555",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "width": null,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "line": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "#0000FF",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": -5
                    }
                  },
                  "fill": {
                    "color": "#2B2B2B",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "#47FFFF",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]\nDate:[bold]{dateX}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        }
      ],
      "dataSources": {}
    },
    "meta": {
      "name": "XYChart_0"
    },
    "position": {
      "x": 19.6539,
      "y": 15.559200000000004,
      "height": 263,
      "width": 722
    },
    "custom": {},
    "propConfig": {
      "props.dataSources.example": {
        "binding": {
          "type": "query",
          "config": {
            "queryPath": "DayEnergy",
            "parameters": {
              "ll": "{.../Line_Dropdown.props.value}",
              "st": "dateArithmetic({.../DateTimeInput.props.value}, -6, \"days\")",
              "ma": "{.../Machine_Dropdown.props.value}",
              "bg": "{.../BG_Dropdown.props.value}",
              "pl": "{.../Plant_Dropdown.props.value}",
              "sp": "dateArithmetic({.../DateTimeInput.props.value}, 0, \"days\")"
            }
          }
        }
      }
    }
  }`Preformatted text`
]
type or paste code here
````Preformatted text``Preformatted text``Preformatted text``Preformatted text

I'm having a look, but for others, watch out for this "Preformatted text" landmine:

1 Like

You'll need to disable the binding on dataSource.example, as we don't have your SQL data and the named query, hence the data is blank when we import it.

This is unrelated, but it seems like you've added this into a Coordinate View or container. I don't know your page design, but generally if it's got a chart on it like this, 9 times out of 10 it should be in a Flex View, not a Coordinate View so that it resizes nicely and is easy to develop and maintain

2 Likes

Thanks for the suggestions.
I have modified the chart type from line to bar chart and modified the query,now i didnt get the datapoints overlap but i have some issues in passing the parameters to get the exact value which i expected.
kindly refer the code and give suggestion to pass the parameters for :st and :sp

I have no idea what issues you're having if you don't tell me the issues and what you're expecting to see...

But I noticed that perhaps "days" isn't valid for dateArithmetic

1 Like