diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index baff070..9960113 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -16,6 +16,7 @@ import { OrderByRow } from './OrderByRow';
 import type { QueryOrderBy } from '../types/queryOrderBy';
 import type { QueryFilter } from '../types/queryFilter';
 import { FilterRow } from './FilterRow';
+import { convertFilterValueToProperType } from '../utils/filterUtils';
 
 enum LoadingState {
   Default = 'DEFAULT',
@@ -49,6 +50,44 @@ export function QueryEditor(props: Props) {
       });
   }, [props.datasource.apiKey, props.datasource.baseUrl]);
 
+  /**
+   * Ensures that dashboard JSON Models from the old Angular plugin are mapped correctly to the
+   * current model used by the application. Uses the {@link BitmovinAnalyticsDataQuery.resultFormat}
+   * as an indicator of whether an old JSON model was loaded.
+   */
+  useEffect(() => {
+    if (props.query.resultFormat == null) return;
+    //TODO why is it not working for more than one queries in a dashboard? Why do I need to first reset to the ewnewst graph
+
+    // The old Angular plugin did the filter value conversion in the query method before
+    // sending the request, so the filter values saved in the old JSON model are the "raw"
+    // input values as strings. The new react plugin, however, saves the converted API conform filter
+    // values in the JSON model, as it converts the filter values in the `QueryInputFilter` component.
+    // This allows the new plugin to provide error feedback directly to the user via a tooltip before
+    // sending the request.
+    const convertedFilters = query.filter.map((filter) => {
+      return {
+        name: filter.name,
+        operator: filter.operator,
+        value: convertFilterValueToProperType(
+          filter.value as string,
+          filter.name,
+          filter.operator,
+          !!props.datasource.adAnalytics
+        ),
+      } as QueryFilter;
+    });
+
+    let interval = props.query.interval;
+    if (props.query.resultFormat === 'table') {
+      setIsTimeSeries(false);
+      interval = undefined;
+    }
+
+    props.onChange({ ...props.query, filter: convertedFilters, interval: interval, resultFormat: undefined });
+    props.onRunQuery();
+  }, []);
+
   const query = defaults(props.query, DEFAULT_QUERY);
 
   const handleLicenseChange = (item: SelectableValue) => {
diff --git a/bitmovin-analytics-datasource/src/types/grafanaTypes.ts b/bitmovin-analytics-datasource/src/types/grafanaTypes.ts
index 5173d25..e29ec35 100644
--- a/bitmovin-analytics-datasource/src/types/grafanaTypes.ts
+++ b/bitmovin-analytics-datasource/src/types/grafanaTypes.ts
@@ -21,6 +21,12 @@ export interface BitmovinAnalyticsDataQuery extends DataQuery {
   limit?: number;
   filter: QueryFilter[];
   alias?: string;
+  /**
+   * @deprecated This option is only used to migrate old Angular dashboards to the new React-based model.
+   * It serves as an indicator of whether an old Angular-based JSON model was loaded, as this option
+   * will only be set through the old plugin's logic. In the new React-based plugin, this option will always be undefined.
+   */
+  resultFormat?: string;
 }
 
 export const DEFAULT_QUERY: Partial<BitmovinAnalyticsDataQuery> = {