jQuery UI Widgets Forums Chart Line series chart does not plot all sources (legends) when they have null values

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 8 years, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • priya srivastava
    Participant

    Dear Team,

    I am trying to plot line series chart with multiple sources having null values for few dates, but some of the sources are not getting plotted on the chart. Please see below code snippet. In the sample data, Cycling source has null value for four different dates and is not getting plotted. Please let me know what else I should do? There is a prerequisite to show data in line chart only.

    self.loadChart = function() {
    var sampleData = [
    { Day: “2013-08-06T00:00:00”, Running: 30, Swimming: 0, Cycling: null, Goal: 40 },
    { Day: “2013-08-07T00:00:00”, Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
    { Day: “2014-01-23T00:00:00”, Running: 30, Swimming: 0, Cycling: null, Goal: 60 },
    { Day: “2014-02-10T00:00:00”, Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
    { Day: “2014-03-13T00:00:00”, Running: 0, Swimming: 20, Cycling: null, Goal: 50 },
    { Day: “2014-05-16T00:00:00”, Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
    { Day: “2014-09-22T00:00:00”, Running: 20, Swimming: 40, Cycling: null, Goal: 90 }
    ];
    var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];
    // prepare jqxChart settings
    var settings = {
    title: “Fitness & exercise weekly scorecard”,
    description: “Time spent in vigorous exercise by activity”,
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData,
    colorScheme: ‘scheme05’,
    borderLineColor: ‘#888888’,
    categoryAxis:
    {
    type: ‘date’,
    baseUnit: ‘day’,
    textRotationAngle:-45,
    dataField:’Day’,
    showGridLines:true,
    gridLinesColor:’#ccc’,
    axisSize:’auto’,
    valuesOnTicks: true,
    unitInterval:50,
    formatFunction: function (value) {
    return value.getDate() + ‘-‘ + months[value.getMonth()] + ‘-‘ + value.getFullYear();
    },
    gridLines: {
    visible: true,
    interval: 3
    }
    },
    seriesGroups:
    [
    {
    type: ‘line’,
    valueAxis:
    {
    visible: true,
    unitInterval: 10,
    minValue: 0,
    maxValue: 100,
    title: { text: ‘Time in minutes’ },
    tickMarks: {color: ‘#888888’},
    gridLines: {color: ‘#888888’},
    axisSize: ‘auto’
    },
    columnsGapPercent: 50,
    seriesGapPercent: 5,
    series: [
    { dataField: ‘Goal’, displayText: ‘Personal Goal’, opacity: 0.7 },
    { dataField: ‘Running’, displayText: ‘Running’ },
    { dataField: ‘Swimming’, displayText: ‘Swimming’ },
    { dataField: ‘Cycling’, displayText: ‘Cycling’ }
    ]
    }
    ]
    };

    // setup the chart
    $(‘#chart1’).jqxChart(settings);

    setTimeout(function () {
    $(‘#chart1’).jqxChart(‘refresh’);
    }, 0);
    };


    Dimitar
    Participant

    Hello priya srivastava,

    Please check out the demo Line Serie with missing points, which showcases the different display options when having data points with null values.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    priya srivastava
    Participant

    Hi Dimitar,

    Thanks for your prompt response. Yes, I had tried this option with the latest jqx version (3.7) and there it is working absolutely fine. Is there any work around to achieve the same with earlier version of jqx libraries (2.7 Feb 2013) version?

    Regards,
    Priya


    Dimitar
    Participant

    Hi Priya,

    This feature has been introduced in version 3.3.0 and cannot be implemented in any older versions. We always recommend using the latest version for the best widget experience.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.