Your search did not match any results.
Charts

Overview

DevExtreme HTML5 JavaScript Charts are adaptive client-side widgets for visualizing data available as Knockout components. They provide more than 30 different chart types: from basic line and bar charts to bullets, sparklines, and treemaps. Many chart types can be combined, like bar and line charts in this demo. Discover other chart features, like the legend, zooming and scrolling, strips, in other demos from this section.

Copy to CodePen
Apply
Reset
window.onload = function () { var data = complaintsData.sort(function (a, b) { return b.count - a.count; }), totalCount = data.reduce(function (prevValue, item) { return prevValue + item.count; }, 0), cumulativeCount = 0, dataSource = data.map(function (item, index) { cumulativeCount += item.count; return { complaint: item.complaint, count: item.count, cumulativePercentage: Math.round(cumulativeCount * 100 / totalCount) }; }); var viewModel = { chartOptions: { palette: "Harmony Light", dataSource: dataSource, title: "Pizza Shop Complaints", argumentAxis: { label: { overlappingBehavior: "stagger" } }, tooltip: { enabled: true, shared: true, customizeTooltip: function (info) { return { html: "<div><div class='tooltip-header'>" + info.argumentText + "</div>" + "<div class='tooltip-body'><div class='series-name'>" + info.points[0].seriesName + ": </div><div class='value-text'>" + info.points[0].valueText + "</div><div class='series-name'>" + info.points[1].seriesName + ": </div><div class='value-text'>" + info.points[1].valueText + "% </div></div></div>" }; } }, valueAxis: [{ name: "frequency", position: "left", tickInterval: 300 }, { name: "percentage", position: "right", showZero: true, label: { customizeText: function (info) { return info.valueText + "%"; } }, constantLines: [{ value: 80, color: "#fc3535", dashStyle: "dash", width: 2, label: { visible: false } }], tickInterval: 20, valueMarginsEnabled: false }], commonSeriesSettings: { argumentField: "complaint" }, series: [{ type: "bar", valueField: "count", axis: "frequency", name: "Complaints frequency", color: "#fac29a" }, { type: "spline", valueField: "cumulativePercentage", axis: "percentage", name: "Cumulative percentage", color: "#6b71c3" }], legend: { verticalAlignment: "top", horizontalAlignment: "center" } } }; ko.applyBindings(viewModel, document.getElementById("chart-demo")); };
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery-3.1.0.min.js"%3E%3C/script%3E'))</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.5/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.2.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/17.2.5/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="chart-demo"> <div id="chart" data-bind="dxChart: chartOptions"></div> </div> </div> </body> </html>
#chart { height: 440px; } .tooltip-header { margin-bottom: 5px; font-size: 16px; font-weight: bold; padding-bottom: 5px; border-bottom: 1px solid #c5c5c5; } .tooltip-body { width: 170px; } .tooltip-body .series-name { font-weight: normal; opacity: 0.6; display: inline-block; line-height: 1.5; padding-right: 10px; width: 126px; } .tooltip-body .value-text { display: inline-block; line-height: 1.5; width: 30px; }
var complaintsData = [ { complaint: "Pizza is cold", count: 780 }, { complaint: "Inadequate cheese quantity", count: 120 }, { complaint: "Not baked properly", count: 52 }, { complaint: "Delayed delivery", count: 1123 }, { complaint: "Damaged delivery", count: 321 }, { complaint: "Incorrect billing", count: 89 }, { complaint: "Wrong size delivered", count: 222 } ];