Tips for generating various series using dx-Chartjs

Trying to visualize ratings based on their type is proving to be difficult as I can't seem to figure out how to group the series according to types.

The available chart options are:

$scope.chartOptions = {
            dataSource: data,
            commonSeriesSettings: {
                argumentField: "ratingDate"
            },
            series: [
                { valueField: "score", group: "Recommend", color: '#66cc33' },
                { valueField: "score", group: "Service", color: '#35a2f4' },
                { valueField: "score", group: "Product", color: '#ef4e3a' },
                { valueField: "score", group: "Experience", color: '#fea000' }
            ],
            argumentAxis: {
                grid: {
                    visible: true
                },
                argumentType: 'datetime'
            },...

The series option lacks a group feature, which is something I wish it had so I could have individual series for Service scores over time, Product scores over time, etc.

Currently, I'm getting 4 duplicated series with different colors. Here is a fiddle

The documentation doesn't provide information on grouping like this, so I'm wondering if anyone has encountered and resolved a similar issue?

Perhaps there's a grouping function where I can return truMetric == "Recommend"?

My sample data is structured as follows:

var data =
            [
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 7.0, "percentageRating": 7.0, "totalNumberOfRatings": 8, "ratingDate": "2014-04-01T00:00:00Z", "categoryId": 10000},
                ...
            ];
javascriptangularjsdevexpresschart.js

Answer №1

If you're looking to read data grouping, this resource might be helpful: 

var dataSource = new DevExpress.data.DataSource(data);
dataSource.group("ratingDate","truMetric" );
dataSource.load().done(function(result) {
    var chart_data=[];
    for(var i=0;i<result.length;i++){
        var d={ratingDate:result[i].key};
        for(var j=0;j<result[i].items.length;j++){
            d[result[i].items[j].key]=result[i].items[j].items[0].score;
        }
        chart_data.push(d);
    }
$("#chartContainer").dxChart({
    dataSource:chart_data,
    // rest of your code

        series: [
            { valueField: "Recommend", name:"Recommend",  color: '#66cc33' },
            { valueField: "Service", name:"Service",  color: '#35a2f4' },
            { valueField: "Product", name:"Product", color: '#ef4e3a' },
            { valueField: "Experience", name:"Experience",  color: '#fea000' }
        ],

//rest of your code

Check out the full fiddle here: http://jsfiddle.net/2Bq9k/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Encountering a bug with Angular-bootstrap pagination displaying an undefined function

Attempting to implement angular-bootstrap pagination footer Encountering an error TypeError: undefined is not a function at Object.fn (http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2265:5) at Scope.$get.Scope.$digest (http://l ...

javascriptangularjstwitter-bootstrappagination

The JavaScript exec() RegExp method retrieves a single item

Possible Duplicate: Question about regex exec returning only the first match "x1y2z3".replace(/[0-9]/g,"a") This code snippet returns "xayaza" as expected. /[0-9]/g.exec("x1y2z3") However, it only returns an array containing one item: ["1"]. S ...

javascriptregex

Changing the custom route in React Router to utilize a render prop instead of the component prop

I'm currently working on a React app that incorporates React Router. I've been encountering a bug in my code stemming from my custom ProtectedRoute component: const ProtectedRoute = ({ component, ...args }) => ( <Route component={with ...

javascriptreactjsreact-routerreact-router-domauth0

What is the process for storing form data into a text file?

Despite seeing similar questions in the past, I am determined to get to the bottom of why this code isn't functioning as expected. My goal is to input form data into a .txt file using a post request. While I lack extensive knowledge of PHP, I am pieci ...

javascriptphphtmlforms

The reason behind my unsuccessful attempt to utilize AJAX with the Google GeoChart API

Learning about JavaScript is exciting! I recently tried incorporating a Google Geochart to generate visual reports. The sample code looked like this: function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Country ...

javascriptajaxjson

The dropdown in vue-multiselect automatically closes after the first selection is made, ensuring a smooth user experience. However,

I am experiencing an issue where the dropdown closes after the first selection, despite setting close-on-select="false". However, it works properly after the initial select. You can observe this behavior directly on the homepage at the following link: vue ...

javascriptvue.jsvuejs2vue-multiselect

What could be causing a blank page to appear after being redirected? (Using NextJS 13 API Route)

After struggling with this issue for 2 days, I'm throwing in the towel and reaching out to the community for assistance. I've been tasked with setting up a basic login system for a new project using NextJS v13. However, it seems like a lot has c ...

javascriptnode.jstypescriptnext.jsmiddleware

The functionality of the Bootstrap dropdown list button is not functioning properly on mobile devices

Currently, I am in the process of developing a website and testing its mobile view on my iPhone. The website is still using bootstrap 3, but I have encountered some issues. When I tap on the navigation button on my iPhone, nothing happens - no dropdown lis ...

javascriptjqueryhtmlcsstwitter-bootstrap

Protractor is encountering a SyntaxError that says there is a missing parenthesis after the argument list

I am currently testing a hyperlink in my protractor script and encountering an error message. Despite checking for missing brackets, I cannot seem to identify the issue. As a newcomer to protractor, I would appreciate some guidance on what might be wrong w ...

angularjsprotractor

Encountering a problem in Angular 2 when trying to pass undefined variables between components while fetching data from

My approach involves making a single API call and storing the response in a global variable within my Service. I then utilize two helper functions to share and manipulate this value between parent and child components. repairs.service.ts public myItems:a ...

angularjsangularangular2-templateangular2-services

I created a customized version of jQuery tabs, but I am looking for an external link to display the tab content and to style the original navigation

I've been experimenting with modifying a tabs script in jQuery that I came across. It seems like my attempt to enhance it has made things more complex than necessary. While I know creating tabs with jQuery is simple, I wanted to create my own version ...

javascriptjqueryhtmlcss

Learn how to utilize a Library such as 'ngx-doc-viewer2' to preview *.docx and *.xlsx files within the application

After 3 days of searching, I finally found a solution to display my *.docx and *.xlxs files in my angular application. The API returns the files as blobs, so my task was to use that blob to show the file rather than just downloading it using window.open(bl ...

javascriptangulartypescriptblobngx-doc-viewer

I can't seem to establish a connection with my MongoDB Atlas cluster. I encountered the MongooseError, which is as follows:

Error [MongooseError]: The uri parameter for the openUri() method needs to be a string but is currently set as "undefined". Please ensure that the first parameter for mongoose.connect() or mongoose.createConnection() is a valid string. const express = r ...

javascriptnode.jsmongodbexpressmongoose

Instructions on assigning a date string value (retrieved from the database) to the <input type="date" ng-model="endtime" name="endtime" /> field

Hey there! I'm new to using angularjs and I'm facing some issues. I have a list of data where, when updating a row, the row value should be added to a table with a datetime column. However, when I try to edit it, I can't seem to set the valu ...

angularjsstringdatetimedatepicker

vue-router: error encountered while attempting to load asynchronous component for rendering

I'm new to vue-router and having trouble getting it to work. When I try to start my app, these errors pop up: [vue-router] Failed to resolve async component render: TypeError: _vm is undefined 49:16:39 [vue-router] uncaught error during route navigat ...

javascriptwebpackvue.jsvue-router

The functionality of Nuxt's asyncData is restricted when attempting to access data from authorized express routes

Setting up an online store. I began with the products, which can be pulled without authorization but require it for editing. The process is smooth so far, probably because it's happening on the client side where authentication information is included ...

javascriptnode.jsvue.jsnuxt.js

"Encountered an error while trying to define a Boolean variable due

I am in the process of creating a TF2 trading bot with price checking capabilities. I encounter an issue while trying to define a boolean variable to determine if the item is priced in keys or not. My attempt at replacing isKeys with data[baseName].prices ...

javascriptnode.jssteamunexpected-token

Connection lost from JS client in Twilio's Programmable Chat

My React application utilizes the Twilio Programmable Chat library for chat functionality. The setup code typically appears as follows, enclosed within a try/catch block: this.accessManager = new AccessManager(twilioToken.token); const chatClientOptio ...

javascriptreactjstwiliochattwilio-programmable-chat

Add a container element resembling a div inside a table without implementing the table layout

I am working with a table that is rendered by DataTable, and I have the requirement to dynamically append new elements inside the table like this: The dark grey area represents the new DOM elements that need to be inserted dynamically. The first row cont ...

javascripthtmlcss

The Symfony API failed to generate a response

There seems to be a problem when trying to link the Symfony API with a React application. The API is not providing any response, even though it works fine when accessed directly through the link. ApiDirectURL Fetching this data from the React app is yiel ...

javascriptreactjssymfony