CODEWITHSUNDEEP
javascriptangularjsdevexpresschart.js
Ali Habibzadeh
Ali Habibzadeh

Reputation: 11558

How to create multiple series on dx-Chartjs

I am trying to visualise some ratings based on their type however I am having difficulty finding how to group the series based on the types.

the chart options are as follow:

$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 has no group option, its what I wish I had as I would like to see one series being about the scores of Service over time, one about Product score overtime etc.

Currently I get 4 duplicated series with different colours. Here is a fiddle

The documentation has no information about grouping like this so I was wondering if anyone has come across this and solved an issue similar to this?

Maybe a grouping function that I can return truMetric == "Recommend" in?

My sample data looks like this:

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},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 7.0, "percentageRating": 7.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-02T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 1.6666666666666667, "percentageRating": 1.6666666666666667, "totalNumberOfRatings": 12, "ratingDate": "2014-04-04T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 6.0, "percentageRating": 6.0, "totalNumberOfRatings": 12, "ratingDate": "2014-04-05T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 5.333333333333333, "percentageRating": 5.333333333333333, "totalNumberOfRatings": 12, "ratingDate": "2014-04-06T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 0.66666666666666663, "percentageRating": 0.66666666666666663, "totalNumberOfRatings": 12, "ratingDate": "2014-04-08T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 2.6, "percentageRating": 2.6, "totalNumberOfRatings": 20, "ratingDate": "2014-04-09T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10000, "description": null, "truMetric": "Recommend", "questionCategory": "Recommend", "score": 3.0, "percentageRating": 3.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-10T00:00:00Z", "categoryId": 10000},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 5.0, "percentageRating": 5.0, "totalNumberOfRatings": 12, "ratingDate": "2014-04-01T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 7.0, "percentageRating": 7.0, "totalNumberOfRatings": 8, "ratingDate": "2014-04-02T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 3.8, "percentageRating": 3.8, "totalNumberOfRatings": 20, "ratingDate": "2014-04-03T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 4.0, "percentageRating": 4.0, "totalNumberOfRatings": 8, "ratingDate": "2014-04-04T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 5.666666666666667, "percentageRating": 5.666666666666667, "totalNumberOfRatings": 12, "ratingDate": "2014-04-06T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 3.6666666666666665, "percentageRating": 3.6666666666666665, "totalNumberOfRatings": 12, "ratingDate": "2014-04-09T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10001, "description": null, "truMetric": "Service", "questionCategory": "Service", "score": 9.0, "percentageRating": 9.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-10T00:00:00Z", "categoryId": 10001},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 4.5, "percentageRating": 4.5, "totalNumberOfRatings": 8, "ratingDate": "2014-04-01T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 3.0, "percentageRating": 3.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-02T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 5.333333333333333, "percentageRating": 5.333333333333333, "totalNumberOfRatings": 12, "ratingDate": "2014-04-03T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 7.5, "percentageRating": 7.5, "totalNumberOfRatings": 8, "ratingDate": "2014-04-04T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 5.5, "percentageRating": 5.5, "totalNumberOfRatings": 8, "ratingDate": "2014-04-05T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 0.5, "percentageRating": 0.5, "totalNumberOfRatings": 8, "ratingDate": "2014-04-07T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 5.666666666666667, "percentageRating": 5.666666666666667, "totalNumberOfRatings": 12, "ratingDate": "2014-04-08T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10002, "description": null, "truMetric": "Experience", "questionCategory": "Experience", "score": 2.0, "percentageRating": 2.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-10T00:00:00Z", "categoryId": 10002},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 8.0, "percentageRating": 8.0, "totalNumberOfRatings": 8, "ratingDate": "2014-04-01T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 6.25, "percentageRating": 6.25, "totalNumberOfRatings": 16, "ratingDate": "2014-04-02T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 3.0, "percentageRating": 3.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-03T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 0.0, "percentageRating": 0.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-04T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 3.25, "percentageRating": 3.25, "totalNumberOfRatings": 16, "ratingDate": "2014-04-05T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 1.0, "percentageRating": 1.0, "totalNumberOfRatings": 8, "ratingDate": "2014-04-06T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 6.0, "percentageRating": 6.0, "totalNumberOfRatings": 16, "ratingDate": "2014-04-07T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 2.5, "percentageRating": 2.5, "totalNumberOfRatings": 8, "ratingDate": "2014-04-08T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10003, "description": null, "truMetric": "Product", "questionCategory": "Product", "score": 3.5, "percentageRating": 3.5, "totalNumberOfRatings": 8, "ratingDate": "2014-04-10T00:00:00Z", "categoryId": 10003},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 2.0, "percentageRating": 2.0, "totalNumberOfRatings": 12, "ratingDate": "2014-04-01T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 5.0, "percentageRating": 5.0, "totalNumberOfRatings": 8, "ratingDate": "2014-04-02T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 8.0, "percentageRating": 8.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-04T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 4.666666666666667, "percentageRating": 4.666666666666667, "totalNumberOfRatings": 12, "ratingDate": "2014-04-05T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 5.0, "percentageRating": 5.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-07T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 1.0, "percentageRating": 1.0, "totalNumberOfRatings": 4, "ratingDate": "2014-04-09T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 10004, "description": null, "truMetric": "Value", "questionCategory": "Value", "score": 3.3333333333333335, "percentageRating": 3.3333333333333335, "totalNumberOfRatings": 12, "ratingDate": "2014-04-10T00:00:00Z", "categoryId": 10004},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 5.0, "percentageRating": 5.0, "totalNumberOfRatings": 48, "ratingDate": "2014-04-01T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 5.9, "percentageRating": 5.9, "totalNumberOfRatings": 40, "ratingDate": "2014-04-02T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 4.2222222222222223, "percentageRating": 4.2222222222222223, "totalNumberOfRatings": 36, "ratingDate": "2014-04-03T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 4.0, "percentageRating": 4.0, "totalNumberOfRatings": 36, "ratingDate": "2014-04-04T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 4.666666666666667, "percentageRating": 4.666666666666667, "totalNumberOfRatings": 48, "ratingDate": "2014-04-05T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 4.375, "percentageRating": 4.375, "totalNumberOfRatings": 32, "ratingDate": "2014-04-06T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 4.2857142857142856, "percentageRating": 4.2857142857142856, "totalNumberOfRatings": 28, "ratingDate": "2014-04-07T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 3.0, "percentageRating": 3.0, "totalNumberOfRatings": 32, "ratingDate": "2014-04-08T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 2.7777777777777777, "percentageRating": 2.7777777777777777, "totalNumberOfRatings": 36, "ratingDate": "2014-04-09T00:00:00Z", "categoryId": 99},
                {"clientId": 100052, "questionId": 99, "description": null, "truMetric": "truRating", "questionCategory": "truRating", "score": 3.875, "percentageRating": 3.875, "totalNumberOfRatings": 32, "ratingDate": "2014-04-10T00:00:00Z", "categoryId": 99}
            ];

Upvotes: 0

Views: 945

Answers (1)

juvian
juvian

Reputation: 16068

You can use this: http://phonejs.devexpress.com/Documentation/Howto/Data_Layer?version=13_2#Data_Layer_Reading_Data_Grouping

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

Full fiddle: http://jsfiddle.net/2Bq9k/1/

Upvotes: 2

Related Questions