Tips for generating various series using dx-Chartjs

Question

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},
                ...
            ];

javascript angularjs devexpress chart.js

Answer 1

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/

Answer 2

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/

Tips for generating various series using dx-Chartjs

Answer №1

Similar questions

Creating Positioning Magic with HTML Elements

Comparison: executing an immediately invoked function expression (IIFE) and a separate

How to troubleshoot missing API data in a Bootstrap 5 modal

Display the element only when the request sent with getJSON exceeds a certain threshold of time in milliseconds

Retrieving the headers from an ajax request

Currency symbol display option "narrowSymbol" is not compatible with Next.Js 9.4.4 when using Intl.NumberFormat

What are the advantages of implementing filters in AngularJS?

Leveraging react-markdown alongside Material-UI's table component

New feature alert! Introducing the Mentio JS menu now available at the bottom of the webpage

How can you retrieve the <head> content from a remote website without being able to make any changes to that site?

AngularJS - Issues with data binding functionality

Steps to combine multiple arrays into a unified array:1. Begin by allocating a

Mapping keys in a react component for efficient sorting

Choose the specific Element by its dynamicID in JQuery

The abort() function in Chrome can trigger an Undefined Error

Loop through an array of buttons using an event listener

Tips for updating a column with just one button in AngularJS

What is the most effective method to exhibit every element within a content wrapper at a specific interval of time?

Deactivate the second subradio button when the first option is selected and vice versa

What is the best way to create a directive that wraps the div elements utilized in an ng-repeat loop?