jQWidgets Forums

Tagged: chart, jqxChart, null, stacked line, stackedline

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 6 months ago.

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

Author

stackedline not display value null Posts

October 15, 2013 at 2:33 am stackedline not display value null #30709

Member

– When I change value Swimming is null. stackedline not display next value others (Thursday,Friday…..).

$(document).ready(function () {
// prepare chart data as an array
var sampleData = [
{ Day: ‘Monday’, Running: 30, Swimming: 12, Cycling: 25 },
{ Day: ‘Tuesday’, Running: 25, Swimming: null, Cycling: 0 },
{ Day: ‘Wednesday’, Running: 30, Swimming: null, Cycling: 25 },
{ Day: ‘Thursday’, Running: 35, Swimming: 25, Cycling: 45 },
{ Day: ‘Friday’, Running: 0, Swimming: 20, Cycling: 25 },
{ Day: ‘Saturday’, Running: 30, Swimming: null, Cycling: 30 },
{ Day: ‘Sunday’, Running: 60, Swimming: 45, Cycling: 0 }
];
// 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,
categoryAxis:
{
text: ‘Category Axis’,
textRotationAngle: 0,
dataField: ‘Day’,
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: ‘#888888’,
unitInterval: 1,
showGridLines: false,
gridLinesInterval: 1,
gridLinesColor: ‘#888888’,
axisSize: ‘auto’
},
colorScheme: ‘scheme06’,
seriesGroups:
[
{
type: ‘stackedline’,
columnsGapPercent: 100,
seriesGapPercent: 5,
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 100,
displayValueAxis: true,
description: ‘Time in minutes’,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’
},
series: [
{ dataField: ‘Running’, displayText: ‘Running’ },
{ dataField: ‘Swimming’, displayText: ‘Swimming’ },
{ dataField: ‘Cycling’, displayText: ‘Cycling’ }
]
}
]
};
// setup the chart
$(‘#jqxChart’).jqxChart(settings);
// get the series groups of an existing chart
var groups = $(‘#jqxChart’).jqxChart(‘seriesGroups’);
// add a click event handler function to the 1st group
if (groups.length > 0) {
groups[0].click = function (e) {
alert(e.serie.displayText + ” for day ” + (e.elementIndex + 1) + “: ” + e.elementValue + ” minutes.”);
}
// update the group
$(‘#jqxChart’).jqxChart({ seriesGroups: groups });
}
});

October 15, 2013 at 5:35 am stackedline not display value null #30717

Dimitar

Participant

Hello TrungTran,

We tested your example with the latest version of jQWidgets (3.0.3). We did not experience the reported issue – the non-null values are correctly displayed. Please take a look at this image. The only change from your code is the symbolType seriesGroups property, which is set to “circle”. Here is the entire example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                { Day: 'Monday', Running: 30, Swimming: 12, Cycling: 25 },
                { Day: 'Tuesday', Running: 25, Swimming: null, Cycling: 0 },
                { Day: 'Wednesday', Running: 30, Swimming: null, Cycling: 25 },
                { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45 },
                { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25 },
                { Day: 'Saturday', Running: 30, Swimming: null, Cycling: 30 },
                { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 0 }
            ];
            // 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,
                categoryAxis:
                {
                    text: 'Category Axis',
                    textRotationAngle: 0,
                    dataField: 'Day',
                    showTickMarks: true,
                    tickMarksInterval: 1,
                    tickMarksColor: '#888888',
                    unitInterval: 1,
                    showGridLines: false,
                    gridLinesInterval: 1,
                    gridLinesColor: '#888888',
                    axisSize: 'auto'
                },
                colorScheme: 'scheme06',
                seriesGroups:
                [
                {
                    type: 'stackedline',
                    columnsGapPercent: 100,
                    seriesGapPercent: 5,
                    symbolType: 'circle',
                    valueAxis:
                {
                    unitInterval: 10,
                    minValue: 0,
                    maxValue: 100,
                    displayValueAxis: true,
                    description: 'Time in minutes',
                    axisSize: 'auto',
                    tickMarksColor: '#888888'
                },
                    series: [
                { dataField: 'Running', displayText: 'Running' },
                { dataField: 'Swimming', displayText: 'Swimming' },
                { dataField: 'Cycling', displayText: 'Cycling' }
                ]
                }
                ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
            // get the series groups of an existing chart
            var groups = $('#jqxChart').jqxChart('seriesGroups');
            // add a click event handler function to the 1st group
            if (groups.length > 0) {
                groups[0].click = function (e) {
                    alert(e.serie.displayText + " for day " + (e.elementIndex + 1) + ": " + e.elementValue + " minutes.");
                }
                // update the group
                $('#jqxChart').jqxChart({ seriesGroups: groups });
            }
        });
    </script>
</head>
<body class='default'>
    <div id='jqxChart' style="width: 680px; height: 400px">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.