chart_2.json

{
  "alias": "chart2",
  "name": "Chart 2",
  "descriptor": {
    "type": "timeseries",
    "sizeX": 10,
    "sizeY": 9,
    "resources": [
      {
        "url": "https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"
      }
    ],
    "templateHtml": "<div id=\"echart\" style=\"width:600px; height:400px;\"></div>",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
    "controllerScript": "var seriesMarkLine = {}\nvar myChart;\nvar option;\nvar serverAttributes = [];\nvar clientAttributes = [];\n\nself.onInit = function() {\n    var settings = self.ctx.settings;\n    if (self.ctx.settings.annotations !== undefined) {\n        var clientAttributesToPoll = []\n        var serverAttributesToPoll = []\n        var clientAttributesCounter = 0;\n        var serverAttributesCounter = 0;\n\n        for (var i = 0; i < self.ctx.settings\n            .annotations.length; i++) {\n            if ((self.ctx.settings.annotations[i]\n                    .attributeType == 'Client') && (self\n                    .ctx.settings.annotations[i]\n                    .annotationsType == 'Attribute')) {\n                if (clientAttributesCounter > 0)\n                    clientAttributesToPoll =\n                    clientAttributesToPoll + ','\n                clientAttributesToPoll.push(self.ctx\n                    .settings.annotations[i]\n                    .attribute);\n                clientAttributesCounter++;\n            }\n            if ((self.ctx.settings.annotations[i]\n                    .attributeType == 'Server') && (self\n                    .ctx.settings.annotations[i]\n                    .annotationsType == 'Attribute')) {\n\n\n                if (serverAttributesCounter > 0)\n                    serverAttributesToPoll =\n                    serverAttributesToPoll + ','\n                serverAttributesToPoll.push(self.ctx\n                    .settings.annotations[i]\n                    .attribute);\n                serverAttributesCounter++;\n            }\n\n        }\n    }\n\n\n\n\n\n\n    if (clientAttributesToPoll !== '') {\n        var entityId = self.ctx.datasources[0].entityId;\n        var entity = {\n            entityType: 'DEVICE',\n            id: entityId\n        }\n\n        self.ctx.attributeService.getEntityAttributes(\n            entity, 'CLIENT_SCOPE',\n            clientAttributesToPoll\n        ).subscribe((attributes) => {\n\n            //Add Annotations that has been defined as ClientAttributes\n            annotiatons = [];\n            for (var i = 0; i < attributes\n                .length; i++) {{\n\n                \n                for (var j = 0; j < self.ctx\n                    .settings.annotations\n                    .length; j++) {\n                    if (self.ctx.settings\n                        .annotations[j]\n                        .attribute ==\n                        attributes[i].key) {\n                            \n                            \n                            \n                        clientAttributes.push(\n                            {\n                                'key': attributes[i].key,\n                                'value': parseFloat(attributes[i].value),\n                                'color': self.ctx\n                            .settings\n                            .annotations[j]\n                            .color,\n                            'axisAssignment': self.ctx.settings.annotations[j].axisAssignment\n                            });\n                            \n                            \n\n\n                        \n                    }\n                    \n                }\n                }\n                }\n                \n\n\n        })\n    }\n\n\n\n\n    if (serverAttributesToPoll !== '') {\n\n        var entityId = self.ctx.datasources[0].entityId;\n        var entity = {\n            entityType: 'DEVICE',\n            id: entityId\n        }\n\n        self.ctx.attributeService.getEntityAttributes(\n            entity, 'SERVER_SCOPE',\n            serverAttributesToPoll\n        ).subscribe((attributes) => {\n\n            //Add Annotations that has been defined as ClientAttributes\n            annotiatons = [];\n            \n            for (var i = 0; i < attributes\n                .length; i++) {\n\n                \n                for (var j = 0; j < self.ctx\n                    .settings.annotations\n                    .length; j++) {\n                    if (self.ctx.settings\n                        .annotations[j]\n                        .attribute ==\n                        attributes[i].key) {\n                            \n                            \n                            \n                        serverAttributes.push(\n                            {\n                                'key': attributes[i].key,\n                                'value': parseFloat(attributes[i].value),\n                                'color': self.ctx\n                            .settings\n                            .annotations[j]\n                            .color,\n                            'axisAssignment': self.ctx.settings.annotations[j].axisAssignment\n                            });\n                            \n                            \n\n\n                        \n                    }\n                    \n                }\n            }\n            \n        })\n    }\n    \n    \n    \n    self.onResize();\n\n\n}\n\n    function adjustHexOpacity(color, opacity) {\n        \n        const r = parseInt(color.slice(1, 3), 16);\n        const g = parseInt(color.slice(3, 5), 16);\n        const b = parseInt(color.slice(5, 7), 16);\n\n        return 'rgba(' + r + ', ' + g + ', ' + b + ', ' +\n            opacity + ')';\n    }\n\nfunction draw() {\n    \nlet seriesMarkLine = {\n\n    data: []\n}\n\n    var data1 = [\n        [1640968951095, 2],\n        [1640968961095, 4],\n        [1640968971095, 6],\n        [1640968981095, 8]\n    ];\n\n    var data2 = [\n        [1640968951095, 1],\n        [1640968961095, 2],\n        [1640968971095, 3],\n        [1640969981095, 4]\n    ];\n\n\n    myChart = echarts.init($('#echart', self.ctx\n        .$container)[0]);\n\n\n    var legend = Array();\n    var series = Array();\n\n\n    for (var i = 0; i < self.ctx.data.length; i++) {\n        var settings = self.ctx.data[i].dataKey.settings;\n        let legendElement = self.ctx.data[i].dataKey.label\n        //legend.push(legendElement);\n\n\n        let dataElement = Array();\n        var datasourceData = self.ctx.data[i];\n        var dataSet = datasourceData.data;\n        var dataToAdd = Array();\n        for (var d = 0; d < dataSet.length; d++) {\n            var tsValuePair = dataSet[d];\n            var ts = tsValuePair[0];\n            var value = tsValuePair[1];\n\n            dataElement.push([ts, value.toFixed(settings\n                .numberOfDigits || 1)]);\n        }\n        dataToAdd.push(dataElement);\n\n\n\n        let seriesMarkLineData = {\n            type: 'average',\n            name: 'Average'\n        }\n        if (settings.showAverage)\n            seriesMarkLine.data.push(seriesMarkLineData)\n\n        \n\n\n\n\n        var markPoint = {\n            data: [\n\n            ]\n        }\n        if (settings.showMinValue)\n            markPoint.data.push({\n                type: 'min',\n                name: 'min'\n            })\n        if (settings.showMaxValue)\n            markPoint.data.push({\n                type: 'max',\n                name: 'max'\n            })\n\n\n\n        let seriesElement = {\n            name: legendElement,\n            itemStyle: {\n                normal: {\n                    color: self.ctx.data[i].dataKey\n                        .color\n                }\n            },\n            type: (settings.chartType == 'Bar') ?\n                'bar' : 'line',\n            yAxisIndex: (settings.axisAssignment ==\n                'Right') ? 1 : 0,\n            data: dataElement,\n            symbol: (self.ctx.settings.showDataPoints) ?\n                'circle' : 'none',\n            markLine: seriesMarkLine,\n            markPoint: markPoint,\n\n\n        }\n\n        if (settings.fillChart) {\n\n            let color1 = settings.gradientColor1 ||\n                '#0366fc'\n\n            let color2 = settings.gradientColor2 ||\n                '#a7c5f2'\n            seriesElement.areaStyle = {\n                color: new echarts.graphic\n                    .LinearGradient(0, 0, 0, 1, [{\n                            offset: 0,\n                            color: adjustHexOpacity(\n                                color1, settings.fillOpacity)\n                        },\n                        {\n                            offset: 1,\n                            color: adjustHexOpacity(\n                                color2, settings.fillOpacity)\n                        }\n                    ])\n            }\n\n\n\n        }\n\n\n\n        series.push(seriesElement)\n\n\n\n\n\n    }\n    \n    \n    \n\n \n\n\n\n    option = {\n        tooltip: {\n            trigger: 'axis',\n            axisPointer: {\n                type: 'cross',\n                crossStyle: {\n                    color: '#999'\n                }\n            }\n        },\n        toolbox: {\n\n            feature: {\n                dataView: {\n                    show: true,\n                    readOnly: false\n                },\n                //magicType: {show: true, type: ['line', 'bar']},\n                //restore: {show: true},\n                saveAsImage: {\n                    show: true\n                },\n                dataZoom: {\n                    yAxisIndex: 'none'\n                },\n                restore: {}\n            }\n        },\n        legend: {\n            data: legend\n        },\n        xAxis: [{\n            type: 'time',\n            axisLabel: {\n                hideOverlap: true\n            }\n\n            //axisPointer: {\n            //    type: 'shadow'\n            //}\n        }],\n        dataZoom: [{\n            type: 'inside',\n            throttle: 50\n        }]\n        ,\n        yAxis: [{\n                type: 'value',\n                name: self.ctx.settings\n                    .yAxisLeftTitle || '',\n\n                //interval: 50,\n                axisLabel: {\n                    formatter: '{value} ' + (self\n                        .ctx.settings\n                        .yAxisLeftUnit || 'ml')\n                }\n            },\n            {\n                type: 'value',\n                name: self.ctx.settings\n                    .yAxisRightTitle || '',\n\n                //interval: 5,\n                axisLabel: {\n                    formatter: '{value} ' + (self\n                        .ctx.settings\n                        .yAxisRightUnit || 'ml')\n                }\n            }\n        ],\n        series: series\n    };\n        if (self.ctx.settings.showPanZoomTool){\n         option.dataZoom.push(   \n        {\n            \n                start: 0,\n                stop: 100\n            \n        })\n        \n    \n        }\n\n    if (!self.ctx.settings.yAxisLeftAutoScale) {\n\n        option.yAxis[0].min = self.ctx.settings\n            .yAxisLeftMinScale || 0,\n            option.yAxis[0].max = self.ctx.settings\n            .yAxisLeftMaxScale || 100\n    }\n    if (!self.ctx.settings.yAxisRightAutoScale) {\n\n        option.yAxis[1].min = self.ctx.settings\n            .yAxisRightMinScale || 0,\n            option.yAxis[1].max = self.ctx.settings\n            .yAxisRightMaxScale || 100\n    }\n\n    myChart.setOption(option);\n    myChart.resize();\n    \n\n}\n\nself.onDataUpdated = function() {\n\n    //self.onResize();\n    var series = Array();\n    for (var i = 0; i < self.ctx.data.length; i++) {\n            let seriesMarkLine = {\n\n    data: []\n}\n        var settings = self.ctx.data[i].dataKey.settings;\n        let legendElement = self.ctx.data[i].dataKey.label\n        //legend.push(legendElement);\n\n\n        let dataElement = Array();\n        var datasourceData = self.ctx.data[i];\n        var dataSet = datasourceData.data;\n        var dataToAdd = Array();\n        for (var d = 0; d < dataSet.length; d++) {\n            var tsValuePair = dataSet[d];\n            var ts = tsValuePair[0];\n            var value = tsValuePair[1];\n\n            dataElement.push([ts, value.toFixed(settings\n                .numberOfDigits || 1)]);\n        }\n        dataToAdd.push(dataElement);\n\n\n\n        var seriesMarkLineData = {\n            type: 'average',\n            name: 'Average'\n        }\n        if (settings.showAverage)\n            seriesMarkLine.data.push(seriesMarkLineData)\n\n        if (self.ctx.settings.annotations != undefined) {\n\n            \n        }\n\n\n\n\n        var markPoint = {\n            data: [\n\n            ]\n        }\n        if (settings.showMinValue)\n            markPoint.data.push({\n                type: 'min',\n                name: 'min'\n            })\n        if (settings.showMaxValue)\n            markPoint.data.push({\n                type: 'max',\n                name: 'max'\n            })\n\n\n\n        let seriesElement = {\n            name: legendElement,\n            itemStyle: {\n                normal: {\n                    color: self.ctx.data[i].dataKey\n                        .color\n                }\n            },\n            type: (settings.chartType == 'Bar') ?\n                'bar' : 'line',\n            yAxisIndex: (settings.axisAssignment ==\n                'Right') ? 1 : 0,\n            data: dataElement,\n            symbol: (self.ctx.settings.showDataPoints) ?\n                'circle' : 'none',\n            markLine: seriesMarkLine,\n            markPoint: markPoint,\n\n\n        }\n\n        if (settings.fillChart) {\n            let color1 = settings.gradientColor1 ||\n                '#0366fc'\n\n            let color2 = settings.gradientColor2 ||\n                '#a7c5f2'\n            seriesElement.areaStyle = {\n                color: new echarts.graphic\n                    .LinearGradient(0, 0, 0, 1, [{\n                            offset: 0,\n                            color: adjustHexOpacity(\n                                color1, settings.fillOpacity)\n                        },\n                        {\n                            offset: 1,\n                            color: adjustHexOpacity(\n                                color2, settings.fillOpacity)\n                        }\n                    ])\n            }\n        }\n        series.push(seriesElement)\n    }\n    \n    // Add Fixed Annotations\n    if (self.ctx.settings.annotations != undefined) {\n\n            for (var j = 0; j < self.ctx.settings\n                .annotations.length; j++) {\n                var color = self.ctx.settings\n                .annotations[j].color || 'blue';\n                \n                let seriesMarkLineData1 = {\n                    yAxis: self.ctx.settings\n                        .annotations[j].fixedNumber,\n                    name: self.ctx.settings\n                        .annotations[j].description,\n                    lineStyle: {\n                        type: \"solid\", \n                        color: color,\n                        width: 2\n                    \n                    },\n                    label:{\n                        position: 'middle',\n                        formatter: '{b}: {c}'\n                    } \n                }\n                \n                if (self.ctx.settings\n                        .annotations[j].description == undefined)\n                        seriesMarkLineData1.label.formatter = '{c}'\n                \n                for (var i = 0; i < self.ctx.data.length; i++)\n            {\n                \n                if (self.ctx.settings.annotations[j]\n                    .annotationsType == 'Fixed')\n                    {\n                if ((self.ctx.settings.annotations[j].axisAssignment ==\n                'Right') &&  (series[i].yAxisIndex == 1))\n                {\n                    \n                    series[i].markLine.data.push(seriesMarkLineData1)\n                    \n                    break;\n                }\n                if ((self.ctx.settings.annotations[j].axisAssignment ==\n                'Left') &&  (series[i].yAxisIndex == 0))\n                {\n                 \n                series[i].markLine.data.push(seriesMarkLineData1)\n                break;\n                }\n                \n            }\n            }\n            }\n            \n            \n        }\n        \n        \n        \n    // Add Server Atttribute Annotations\n    if (self.ctx.settings.annotations != undefined) {\n            \n            for (var j = 0; j < serverAttributes.length; j++) {\n\n                \n                let seriesMarkLineData1 = {\n                    yAxis: serverAttributes[j].value,\n                    name: serverAttributes[j].key,\n                    lineStyle: {\n                        type: \"solid\", \n                        color: serverAttributes[j].color,\n                        width: 2\n                    \n                    },\n                    label:{\n                        position: 'middle',\n                        formatter: '{b}: {c}'\n                    } \n                }\n                \n\n                \n                for (var i = 0; i < self.ctx.data.length; i++)\n            {\n\n\n                if ((serverAttributes[j].axisAssignment ==\n                'Right') &&  (series[i].yAxisIndex == 1))\n                {\n                    \n                    series[i].markLine.data.push(seriesMarkLineData1)\n                    \n                    break;\n                }\n                if ((serverAttributes[j].axisAssignment ==\n                'Left') &&  (series[i].yAxisIndex == 0))\n                {\n                 \n                series[i].markLine.data.push(seriesMarkLineData1)\n                break;\n                }\n                \n            \n            }\n            }\n            \n            \n        }\n        \n        \n        // Add Client Atttribute Annotations\n    if (self.ctx.settings.annotations != undefined) {\n            \n            for (var j = 0; j < clientAttributes.length; j++) {\n\n                \n                let seriesMarkLineData1 = {\n                    yAxis: clientAttributes[j].value,\n                    name: clientAttributes[j].key,\n                    lineStyle: {\n                        type: \"solid\", \n                        color: clientAttributes[j].color,\n                        width: 2\n                    \n                    },\n                    label:{\n                        position: 'middle',\n                        formatter: '{b}: {c}'\n                    } \n                }\n                \n\n                \n                for (var i = 0; i < self.ctx.data.length; i++)\n            {\n\n                \n                if ((clientAttributes[j].axisAssignment ==\n                'Right') &&  (series[i].yAxisIndex == 1))\n                {\n                    \n                    series[i].markLine.data.push(seriesMarkLineData1)\n                    \n                    break;\n                }\n                if ((clientAttributes[j].axisAssignment ==\n                'Left') &&  (series[i].yAxisIndex == 0))\n                {\n                 \n                series[i].markLine.data.push(seriesMarkLineData1)\n                \n                break;\n                }\n                \n            \n            }\n            }\n            \n            \n        }\n    \n    if (myChart != undefined)\n    {\n    option.series = series;\n    myChart.setOption(option);\n    }\n    \n\n}\n\nself.onResize = function() {\n\n    $('#echart', self.ctx.$container)[0].style.height =\n        self.ctx.height + \"px\";\n    $('#echart', self.ctx.$container)[0].style.width = (\n        self.ctx.width - 15) + \"px\";\n    $('#echart', self.ctx.$container)[0].style\n        .paddingLeft = (5) + \"px\";\n\n    draw();\n    self.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n\n}\n\nself.onMobileModeChanged = function() {\n\n}\n\nself.getSettingsSchema = function() {\n\n}\n\nself.getDataKeySettingsSchema = function() {\n\n}\n\nself.onDestroy = function() {\n\n}",
    "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"yAxisLeftTitle\": {\n                \"title\": \"Title Left Y-Axis\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"yAxisLeftUnit\": {\n                \"title\": \"Unit Left Y-Axis\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"yAxisRightTitle\": {\n                \"title\": \"Title Right Y-Axis\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"yAxisRightUnit\": {\n                \"title\": \"Unit Right Y-Axis\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"showDataPoints\": {\n                \"title\": \"Show Data points\",\n                \"type\": \"boolean\",\n                \"default\": false\n            }\n            ,\n            \"showPanZoomTool\": {\n                \"title\": \"Show Pan and Zoom tool\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \n            \"yAxisLeftAutoScale\": {\n                \"title\": \"Left Y-Axis Autoscale\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"yAxisLeftMinScale\": {\n                \"title\": \"Left Y-Axis Min-Value\",\n                \"type\": \"number\",\n                \"default\": 0\n            },\n            \"yAxisLeftMaxScale\": {\n                \"title\": \"Left Y-Axis Max-Value\",\n                \"type\": \"number\",\n                \"default\": 100\n            },\n            \"yAxisRightAutoScale\": {\n                \"title\": \"Right Y-Axis Autoscale\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"yAxisRightMinScale\": {\n                \"title\": \"Right Y-Axis Min-Value\",\n                \"type\": \"number\",\n                \"default\": 0\n            },\n            \"yAxisRightMaxScale\": {\n                \"title\": \"Right Y-Axis Max-Value\",\n                \"type\": \"number\",\n                \"default\": 100\n            },\n            \"annotations\": {\n                \"title\": \"Annotations\",\n                \"type\": \"array\",\n                \"minItems\": 0,\n                \"items\": {\n                    \"title\": \"Attribute\",\n                    \"type\": \"object\",\n                    \"properties\": {\n                        \"annotationsType\": {\n                            \"title\": \"Annotations Type\",\n                            \"type\": \"string\",\n                            \"enum\": [\n                                \"Fixed\",\n                                \"Attribute\"\n                            ],\n                            \"default\": \"Fixed\"\n                        },\n                        \"fixedNumber\": {\n                \"title\": \"Fixed Number\",\n                \"type\": \"number\",\n                \"default\": 10\n            },\n                        \"attribute\": {\n                            \"title\": \"Attribute\",\n                            \"type\": \"string\"\n                        },\n                        \"description\": {\n                            \"title\": \"Description\",\n                            \"type\": \"string\"\n                        },\n                        \"color\": {\n                            \"title\": \"Color\",\n                            \"type\": \"string\",\n                            \"enum\": [\n                                \"Red\",\n                                \"Green\",\n                                \"Blue\",\n                                \"Yellow\"\n                            ],\n                            \"default\": \"Green\"\n                        },\n\n                        \"attributeType\": {\n                            \"title\": \"Attribute Type\",\n                            \"type\": \"string\",\n                            \"enum\": [\n                                \"Client\",\n                                \"Server\"\n                            ],\n                            \"default\": \"Client\"\n                        },\n                        \"axisAssignment\": {\n                            \"title\": \"Axis Assignment\",\n                            \"type\": \"string\",\n                            \"enum\": [\n                                \"Left\",\n                                \"Right\"\n                            ],\n                            \"default\": \"Left\"\n                        }\n                    },\n                    \"required\": [\"color\"]\n                }\n            }\n            \n        }\n        },\n    \"form\": [\n        \"yAxisLeftTitle\",\n        \"yAxisLeftUnit\",\n        \"yAxisLeftAutoScale\",\n        \"yAxisLeftMinScale\",\n        \"yAxisLeftMaxScale\",\n        \"yAxisRightTitle\",\n        \"yAxisRightUnit\",\n        \"yAxisRightAutoScale\",\n        \"yAxisRightMinScale\",\n        \"yAxisRightMaxScale\",\n        \"showDataPoints\",\n        \"showPanZoomTool\",\n        \"annotations\"\n        \n        \n    ]\n}",
    "dataKeySettingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"DataKeySettings\",\n        \"properties\": {\n            \"chartType\": {\n                \"title\": \"Type\",\n                \"type\": \"string\",\n                \"enum\": [\n                    \"Line\",\n                    \"Bar\"],\n                \"default\": \"Line\"\n            },\n            \"showAverage\": {\n                \"title\": \"Show horizonal average line\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"showMinValue\": {\n                \"title\": \"Show min. Value\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"showMaxValue\": {\n                \"title\": \"Show max. value\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \n            \n            \n            \"gradientColor1\": {\n                \"title\": \"Gradient Color 1\",\n                \"type\": \"string\",\n                \"default\": \"#008a00\"\n            },\n            \"gradientColor2\": {\n                \"title\": \"Gradient Color 2\",\n                \"type\": \"string\",\n                \"default\": \"#008a00\"\n            },\n            \n            \"fillOpacity\": {\n                \"title\": \"Fill Opacity\",\n                \"type\": \"number\",\n                \"minimum\": 0,\n                \"maximum\": 1,\n                \"default\": 0.5\n            },\n            \"fillChart\": {\n                \"title\": \"fill Chart\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"axisAssignment\": {\n                \"title\": \"Axis Assignment\",\n                \"type\": \"string\",\n                \"enum\": [\n                    \"Left\",\n                    \"Right\"],\n                \"default\": \"Left\"\n            },\n            \"numberOfDigits\": {\n                \"title\": \"Number of Digits\",\n                \"type\": \"number\",\n                \"default\": 1\n            },\n        \n        \"required\": [\n                    ]\n        }\n        },\n    \"form\": [\n        \"chartType\",\n        \n        \n        \"showAverage\",\n        \"showMinValue\",\n        \"showMaxValue\",\n        \n        \n        \"fillChart\",\n        {\n            \"key\": \"gradientColor1\",\n            \"type\": \"color\"\n        },\n        {\n            \"key\": \"gradientColor2\",\n            \"type\": \"color\"\n        },\n        \"fillOpacity\",\n        \"axisAssignment\",\n        \"numberOfDigits\"\n    ]\n}",
    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":true,\"fillLines\":false,\"showPoints\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"yAxisLeftAutoScale\":true,\"yAxisLeftMaxScale\":100,\"yAxisRightAutoScale\":true,\"yAxisRightMaxScale\":100,\"showPanZoomTool\":true,\"annotations\":[{\"annotationsType\":\"Fixed\",\"fixedNumber\":10,\"color\":\"Red\",\"attributeType\":\"Client\",\"axisAssignment\":\"Left\"}]},\"title\":\"Chart 2\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null}"
  }
}