Your search did not match any results.
Point Charts

Scatter

Documentation

Scatter charts can be used whenever you need to allow the user to draw their own conclusions about information displayed within the chart.

Copy to CodeSandBox
Apply
Reset
<template> <dx-chart id="chart" :data-source="dataSource" > <dx-common-series-settings type="scatter"/> <dx-series argument-field="x1" value-field="y1" /> <dx-series argument-field="x2" value-field="y2" > <dx-point symbol="triangleDown"/> </dx-series> <dx-argument-axis :tick-interval="5"> <dx-grid :visible="true"/> <dx-minor-grid :visible="true"/> </dx-argument-axis> <dx-value-axis :tick-interval="50"/> <dx-legend :visible="false"/> <dx-common-pane-settings> <dx-border :visible="true"/> </dx-common-pane-settings> </dx-chart> </template> <script> import { DxChart, DxSeries, DxPoint, DxCommonSeriesSettings, DxLegend, DxValueAxis, DxArgumentAxis, DxGrid, DxMinorGrid, DxCommonPaneSettings, DxBorder } from 'devextreme-vue/chart'; import { generateDataSource } from './data.js'; export default { components: { DxChart, DxSeries, DxPoint, DxCommonSeriesSettings, DxLegend, DxValueAxis, DxArgumentAxis, DxGrid, DxMinorGrid, DxCommonPaneSettings, DxBorder }, data() { return { dataSource: generateDataSource() }; } }; </script> <style> #chart { height: 440px; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
export function generateDataSource() { const b1 = random(-100, 100) / 10; const b2 = random(-100, 100) / 10; let k1 = random(-100, 100) / 10; let k2 = random(-100, 100) / 10; const ds = []; let deviation1; let deviation2; let i; let x1; let x2; let y1; let y2; let isNegativeDelta; let delta1; let delta2; if (k1 < 0.1 && k1 >= 0) { k1 = 0.1; } if (k1 > -0.1 && k1 < 0) { k1 = -0.1; } if (k2 < 0.1 && k2 >= 0) { k2 = 0.1; } if (k2 > -0.1 && k2 < 0) { k2 = -0.1; } deviation1 = Math.abs(k1 * 8); deviation2 = Math.abs(k2 * 8); for (i = 0; i < 30; i++) { x1 = random(1, 20); x2 = random(1, 20); isNegativeDelta = random(0, 1) === 0; delta1 = deviation1 * Math.random(); delta2 = deviation2 * Math.random(); if (isNegativeDelta) { delta1 = -delta1; delta2 = -delta2; } y1 = k1 * x1 + b1 + delta1; y2 = k2 * x2 + b2 + delta2; ds.push({ x1: x1, y1: y1, x2: x2, y2: y2 }); } return ds; } function random(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-vue': 'npm:devextreme-vue@19.2', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });