How to fill gap between threshold and line chart - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular chart, bands, chart, jquery chart, jqxChart, line chart, threshold area

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

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

Author

How to fill gap between threshold and line chart Posts

September 18, 2015 at 7:03 am How to fill gap between threshold and line chart #75961

apurva

Participant

Hello,

I have created a line chart with threshold now what I want is to fill the area where threshold occur, I have tried draw function but it’s not working, my jqwidget version is 2.9 I can’t update version, Please help. Here is my code for chart and band.

var tempTimeFaultSetting = {

enableAnimations: true,
showLegend: true,
padding: { left: 0, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
legendLayout: { left: 100, top: 420, width: 300, height: 20, flow: ‘horizontal’ },
source: dataAdapter_tempTimeFault,
categoryAxis: {
text: ‘Category Axis’,
textRotationAngle: 0,
dataField: ‘Date’,
showTickMarks: true,
valuesOnTicks: false,
showGridLines: false,
unitInterval: 5,
minValue: 0,
maxValue: 30,
axisSize: ‘auto’
},
colorScheme: ‘scheme01’,
seriesGroups: [
{
type: ‘line’,
showLabels: false,
symbolType: ‘circle’,
valueAxis: {
unitInterval: 10,
minValue: 10,
maxValue: 50,
showGridLines: false,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’
},
series: [
{ dataField: ‘Running’, displayText: ‘Running’ },
{ dataField: ‘OnTime’, displayText: ‘OnTime’ }
],
bands:
[

{
minValue: 35,
maxValue: 35.2,
lineWidth: 1,
color: ‘#C26666’
},
{
minValue: 42,
maxValue: 42.2,
lineWidth: 1,
color: ‘#6B0000’
}
]

}
]
};

Thanks
Apurva Agrawal

September 23, 2015 at 7:44 am How to fill gap between threshold and line chart #76092

Dimitar

Participant

Hello Apurva Agrawal,

jqxChart colour bands have been introduced in version 2.9.0, so this functionality should work fine on your side. Here is the demo javascript_chart_color_bands.htm included with version 2.9.0:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title id='Description'>Chart with horizontal layout, range columns and color bands</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.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 the data

            var data = [
                { Person: "Planning", M1_From: 2, M1_To: 5, M2_From: 5, M2_To: 10 },
                { Person: "Dev 1", M1_From: 5, M1_To: 7, M2_From: 9, M2_To: 17  },
                { Person: "Dev 2", M1_From: 5, M1_To: 12, M2_From: 14, M2_To: 22  },
                { Person: "QA 1", M1_From: 7, M1_To: 14, M2_From: 14, M2_To: 25 },
                ];

            var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                var dataItem = data[itemIndex];
                return '<DIV style="text-align:left"><b>Team: ' + categoryValue + 
                        '</b><br />Start day: ' +  value.from + 
                        '<br />End day: ' + value.to;
            };

            // prepare jqxChart settings
            var settings = {
                title: "Monthly Project Schedule",
                description: "Website update plan",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: data,
                categoryAxis:
                    {
                        text: 'Category Axis',
                        dataField: 'Person',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: true
                    },
                colorScheme: 'scheme03',
                seriesGroups:
                    [
                        {
                            orientation: 'horizontal',
                            type: 'rangecolumn',
                            columnsGapPercent: 100,
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            valueAxis:
                            {
                                flip: true,
                                unitInterval: 1,
                                displayValueAxis: true,
                                description: 'Day',
                                axisSize: 'auto',
                                tickMarksColor: '#888888',
                                minValue: 1,
                                maxValue: 30
                            },
                            series: [
                                    { dataFieldFrom: 'M1_From', dataFieldTo: 'M1_To', displayText: 'Sprint 1', opacity: 1 },
                                    { dataFieldFrom: 'M2_From', dataFieldTo: 'M2_To', displayText: 'Sprint 2', opacity: 1 }
                                ],
                            bands:
                            [
                                { minValue: 13, maxValue: 16, color: '#FF0000', opacity: 0.15},
                                { minValue: 24, maxValue: 27, color: '#FF0000', opacity: 0.20}
                            ]
                        }

                    ]
            };

            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </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.