jQuery UI Widgets › Forums › Chart › RangeColumn with dates

Tagged: , , ,

This topic contains 5 replies, has 2 voices, and was last updated by  Hristo 5 years, 10 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    RangeColumn with dates Posts
  • January 14, 2019 at 7:36 pm RangeColumn with dates #103517

    mflach
    Participant

    I’d like to create a sudo-gantt chart using the RangeColumn chart with dates. For example:

    Referring to the Color Bands demo (https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_color_bands.htm)

    Instead of days on the X Axis I’d like dates (1/1/2019 – 6/30/2019) and supply dataFieldFrom and dataFieldTo data with specific dates.

    I’m hoping to put this inside a Range Selector object in order to adjust my date range to correspond to some known event.

    January 16, 2019 at 11:35 am RangeColumn with dates #103531

    Hristo
    Participant

    Hello mflach,

    I would like to suggest you look at this demo.
    It demonstrates how you could create a Range selector and to customize the labels on the xAxis.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    January 16, 2019 at 1:22 pm RangeColumn with dates #103537

    mflach
    Participant

    Thanks for your response but the issue I’m having with the the RangeColumn chart more so than the Range Selector. What I really need is an example of the RangeColumn chart with dates on the X axis.

    Mark

    January 17, 2019 at 11:12 am RangeColumn with dates #103554

    Hristo
    Participant

    Hello Mark,

    Could you clarify it what you mean by “RangeColumn”?
    If you want to change the density of the date/time points over the xAxis then you could try to set there unitInterval member into it.
    Also, the rotation of the labels will be useful – labels: { angle: rotationAngle }.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    January 17, 2019 at 12:36 pm RangeColumn with dates #103556

    mflach
    Participant

    There is a demo of a chart that uses the chart type “RangeColumn”. It’s set in a horizontal layout but uses numerical values on the x axis. I’d like to use the same chart type with dates on the x axis. Using the chart in the link below as an example, I’d like to have values that represent a date range plotted on a chart. The example uses numbers for the range, I’d like to use dates.

    https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_color_bands.htm?material

    Hope this clarifies what I’m trying to do.

    Mark

    January 21, 2019 at 11:01 am RangeColumn with dates #103584

    Hristo
    Participant

    Hello Mark,

    You could use the formatFunction callback of the valueAxis to handle this.
    Please, take a look at this example:

    <!DOCTYPE HTML>
<html lang="en">
<head>
    <title id='Description'>JavaScript Chart with horizontal layout, range and color bands</title>
    <meta name="description" content="This is an example of JavaScript Chart Horizontal Layout, Range Columns and Color Bands." />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <script type="text/javascript" src="../../scripts/jquery-1.12.4.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/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../scripts/demos.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: 25, M1_To: 37, M2_From: 9, M2_To: 17 },
                { Person: "Dev 2", M1_From: 50, M1_To: 56, 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,
                xAxis:
                {
                    dataField: 'Person',
                    unitInterval: 1,
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    }
                },
                colorScheme: 'scheme03',
                seriesGroups:
                    [
                        {
                            orientation: 'horizontal',
                            type: 'rangecolumn',
                            columnsGapPercent: 100,
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            valueAxis:
                            {
                                flip: true,
                                labels: { angle: 45 },
                                minValue: 1,
                                maxValue: 59,
                                unitInterval: 1,
                                title: { text: 'Day' },
                                tickMarks: { color: '#BCBCBC' },
                                formatFunction: function (value)
                                {
                                    console.log(value)
                                    var month = 'Jan';
                                    var day = value;
                                    if (value < 32) {
                                        month = 'Jan';
                                        
                                    } else {
                                        month = 'Feb';
                                        day = value - 31
                                    }
                                    return day + ' ' + month;
                                }
                            },
                            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: '#00FF00', opacity: 0.15 },
                                { minValue: 24, maxValue: 27, color: '#0000FF', opacity: 0.20 },
                                { minValue: 29, maxValue: 29, color: '#FF0000', opacity: 0.5, lineWidth: 3 }
                            ]
                        }

                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:1250px; height:500px">
    </div> 
    <div class="example-description">
    <br />
    <h2>Description</h2>
    <br />
    This is an example of JavaScript Chart horizontal layout, range columns and color bands. The type of the seriesGroups is rangecolumn. You can see how to set the minimum value, the maximum value and the color of the bands.  
    </div>   
</body>
</html>

    Note: If you want to have more than one month you should get their days and make calculations based on their sum.
    For example, for a whole year, you should use 365 days (normally) and the first day of February will start from 32 day of the year.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.