Chart + range selector - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 6 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 5 months ago.

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

Author

Chart + range selector Posts

September 23, 2014 at 9:20 am Chart + range selector #59903

Tyl

Participant

Hi,
I am evaluating Jqwidgets with angular and I face a problem using the range selector to zoom the chart on the Xaxis (which is a date axis).
Is there an angularjs sample demonstrating this ?

September 23, 2014 at 9:39 am Chart + range selector #59906

Peter Stoev

Keymaster

Hi Tyi,

All the AngularJS demos are available on our website. It seems that we still do not have the sample you’re looking for.

Best Regards,
Peter Stoev

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

September 23, 2014 at 12:38 pm Chart + range selector #59918

Tyl

Participant

I have copied your working jquery sample with a range selector on a time X axis (demos/jqxchart/javascript_chart_range_selector.htm) and converted it to angular, using exactly the same settings and data.

The charts works if I comment the range selector in the xAxis object, but as soon as I uncomment the range selector i get this stack :

September 23, 2014 at 1:00 pm Chart + range selector #59919

Peter Stoev

Keymaster

Hi Tyl,

Thank you for the information. As I wrote, we do not have such example yet. However, I prepared one. See working sample below:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxChart directive for AngularJS</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.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/jqxbuttons.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="../../jqwidgets/jqxchart.rangeselector.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            // prepare the data
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Date' },
                    { name: 'Open' },
                    { name: 'High' },
                    { name: 'Low' },
                    { name: 'Close' },
                    { name: 'Volume' },
                    { name: 'AdjClose' }
                ],
                url: '../sampledata/TSLA_stockprice.csv'
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

            var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                var dataItem = dataAdapter.records[itemIndex];
                return '<DIV style="text-align:left"><b>Date: ' +
                        categoryValue.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                        '</b><br />Open price: $' + dataItem.Open +
                        '</b><br />Close price: $' + dataItem.Close +
                        '</b><br />Daily volume: ' + dataItem.Volume +
                         '</DIV>';
            };

            // prepare jqxChart settings
            $scope.settings = {
                title: "Tesla Motors Stock Price",
                description: "(June 2010 - March 2014)",
                enableAnimations: true,
                animationDuration: 1500,
                enableCrosshairs: true,
                padding: { left: 5, top: 5, right: 30, bottom: 5 },
                source: dataAdapter,
                xAxis:
                    {
                        dataField: 'Date',
                        minValue: new Date(2012, 0, 1),
                        maxValue: new Date(2013, 11, 31),
                        formatFunction: function (value) {
                            return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
                        },
                        type: 'date',
                        baseUnit: 'day',
                        rangeSelector: {
                            // Uncomment the line below to render the selector in a separate container 
                            //renderTo: $('#selectorContainer'),
                            size: 120,
                            padding: { /*left: 0, right: 0,*/top: 30, bottom: 0 },
                            minValue: new Date(2010, 5, 1),
                            backgroundColor: 'white',
                            dataField: 'Close',
                            baseUnit: 'month',
                            showGridLines: false,
                            formatFunction: function (value) {
                                return months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
                            }
                        }
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            valueAxis:
                            {
                                description: 'Price per share [USD]<br><br>'
                            },
                            series: [
                                { dataField: 'Close', displayText: 'Close Price', lineWidth: 1, lineWidthSelected: 1 }
                            ]
                        }

                    ]
            };
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-chart jqx-settings="settings" style="width: 850px; height: 500px;"></jqx-chart>
        <br />
     </div>
</body>
</html>

May be you missed a Javascript reference or something else.

Best Regards,
Peter Stoev

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

September 23, 2014 at 1:28 pm Chart + range selector #59920

Tyl

Participant

Thanks Peter, your sample is working, I will now search why mine is not ..
I’ll let you know if I find something interesting.

September 23, 2014 at 1:39 pm Chart + range selector #59921

Tyl

Participant

Actually I have found the difference between your sample and mine that makes mine not working.

You use a dataAdapter as source for the data and I use a local sampleData just like this one (containing the same data as TSLA_stockprice.csv but converted to json) :

var dataSample = [
{
Date:”6/29/2010″,
Open:19,
High:25,
Low:17.54,
Close:23.89,
Volume:18766300,
AdjClose:23.89
},
{
Date:”6/30/2010″,
Open:25.79,
High:30.42,
Low:23.3,
Close:23.83,
Volume:17187100,
AdjClose:23.83
},
…
];

In this case, I get the stack that I wrote in a previous post if I activate the range selector (if I don’t everything is fine).

Do I misunderstand the use of the source attribute or is it a bug ?
If it is a bug, is there a workaround that could let me continue to use a local json array as source ?

September 23, 2014 at 1:50 pm Chart + range selector #59922

Peter Stoev

Keymaster

Hi Tyl,

There is no bug on our side as you saw from my working demo. If you would like use the approach I suggested you, if not debug yours and find the error on your side.

Best Regards,
Peter Stoev

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

Author

Posts

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

You must be logged in to reply to this topic.