jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 16 through 30 (of 144 total)

← 1 2 3 … 10 →

Author

Posts
January 28, 2019 at 3:46 pm in reply to: Range Selector restrictions with Date Range Selector restrictions with Date #103717

Klaus H
Participant

Hello Hristo,

thank you for your feedback, I will show this to my customer.

Best Regards
Klaus

January 24, 2019 at 10:39 am in reply to: Range Selector restrictions with Date Range Selector restrictions with Date #103653
Klaus H
Participant
Hello Hristo,

I have copied your code from the click event and the chart variable is valid at that point. But setting the chart.xAxis.minValue and maxValue and then chart.refresh() don’t have any effect after I have used the range selector. You can try it for yourself, use the example you provided, then play around with the rangeSelector and then click on the button. When I do this, nothing happens. I am not sure what you mean with changing the minValue and maxValue of the xAxis, that’s what I am doing as far as I understand.
```
		var chart = $('#chartContainer').jqxChart('getInstance');
		console.log("rangeSelectionChanged");
		console.log(chart);
                chart.xAxis.minValue = new Date(2019, 0, 17, 10, 34, 0);
                chart.xAxis.maxValue = new Date(2019, 0, 17, 10, 38, 0);
                chart.refresh();
		console.log("rangeSelectionChanged end");
```
That’s the code I tried in the rangeSelectionChanged event, all console entries appear. chart is set (also if I initialize it outside the event), but the chart is not refreshed with the new axis values.

Could you please check the example how I described it or clarify if I misunderstood you? That would be great.

Best Regards
Klaus
January 22, 2019 at 12:12 pm in reply to: Range Selector restrictions with Date Range Selector restrictions with Date #103603

Klaus H
Participant

Hello Hristo,

unfortunately that does not seem to work, putting the code in the rangeSelectionChanged event does not work – also if I use the range selector and then click the button, it also does not work. Any idea why that could be?

Best Regards
Klaus

January 22, 2019 at 11:59 am in reply to: Range Selector restrictions with Date Range Selector restrictions with Date #103602

Klaus H
Participant

Hello Hristo,

thank you very much for this example, combining this with the rangeSelectionChanged event should do the trick.

Best Regards
Klaus

January 21, 2019 at 10:49 am in reply to: Range Selector restrictions with Date Range Selector restrictions with Date #103583

Klaus H
Participant

Hello Hristo,

thank you for your answer.

The integrated RangeSelector is preferred by my customer, because it has the graph displayed in it, that is a big help. It’s not a big deal, the customer asked if I could fix the view so the datapoint is always on the line as a nice to have feature.

You mentioned moving the internal RangeSelector, how is that possible, because I cannot find anything besides the events in the API. The easiest idea would be to create the event, catch the dates, round them to the next full minute and then refresh the selector with these dates. Is that somehow possible? That would be my last idea.

Best Regards
Klaus

January 17, 2019 at 2:04 pm in reply to: Range Selector restrictions with Date Range Selector restrictions with Date #103557
Klaus H
Participant
Hello Hristo,

I have made you a simplified version of the case, 30 minutes of data with 1 data entry per minute, the timestamp always on the full minute.

In the initial load the start and the end of the chart are the first and last timestamp. I did not put any effort into formatting the timestamps on the axis, but one can see what happens. When I use the range selector, I am free to land on every possible timestamp between the min and max timestamps, for example I move the left side of the range selector from 17-Jan-2019 10:30:0 and land on 17-Jan-2019 10:31:41 and every vertical lign is now on a :41 and therefore no datapoint is on a vertical line anymore.

So is there a possibility to give the range selector a step like say “minute” or can I react in one of the eventhandlers and round to the next full minute?

I used the example with the Tesla stock prices from version 6.0.4 as a base for this:
```
<!DOCTYPE html />
<html lang="en">
<head>
    <title id='Description'>JavaScript Chart Range Selector Example</title>
    <meta name="description" content="This is an example of Javascript Chart Range Selector and Zooming." />
    <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" src="../../jqwidgets/jqxchart.rangeselector.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

			var chartdatasourcearr = [{"dptimestamp":"2019-01-17 10:30:00","val_590":92.98},{"dptimestamp":"2019-01-17 10:31:00","val_590":81.6},{"dptimestamp":"2019-01-17 10:32:00","val_590":93.4},{"dptimestamp":"2019-01-17 10:33:00","val_590":88.82},{"dptimestamp":"2019-01-17 10:34:00","val_590":88.35},{"dptimestamp":"2019-01-17 10:35:00","val_590":88.89},{"dptimestamp":"2019-01-17 10:36:00","val_590":88.3},{"dptimestamp":"2019-01-17 10:37:00","val_590":88.62},{"dptimestamp":"2019-01-17 10:38:00","val_590":86.6},{"dptimestamp":"2019-01-17 10:39:00","val_590":77.41},{"dptimestamp":"2019-01-17 10:40:00","val_590":84.29},{"dptimestamp":"2019-01-17 10:41:00","val_590":83.98},{"dptimestamp":"2019-01-17 10:42:00","val_590":87.35},{"dptimestamp":"2019-01-17 10:43:00","val_590":92.36},{"dptimestamp":"2019-01-17 10:44:00","val_590":89.53},{"dptimestamp":"2019-01-17 10:45:00","val_590":79.46},{"dptimestamp":"2019-01-17 10:46:00","val_590":89.62},{"dptimestamp":"2019-01-17 10:47:00","val_590":88.94},{"dptimestamp":"2019-01-17 10:48:00","val_590":83.41},{"dptimestamp":"2019-01-17 10:49:00","val_590":91.89},{"dptimestamp":"2019-01-17 10:50:00","val_590":80.62},{"dptimestamp":"2019-01-17 10:51:00","val_590":85.63},{"dptimestamp":"2019-01-17 10:52:00","val_590":87.04},{"dptimestamp":"2019-01-17 10:53:00","val_590":86.14},{"dptimestamp":"2019-01-17 10:54:00","val_590":86.16},{"dptimestamp":"2019-01-17 10:55:00","val_590":79.78},{"dptimestamp":"2019-01-17 10:56:00","val_590":85.54},{"dptimestamp":"2019-01-17 10:57:00","val_590":87.47},{"dptimestamp":"2019-01-17 10:58:00","val_590":86.51},{"dptimestamp":"2019-01-17 10:59:00","val_590":86.88},{"dptimestamp":"2019-01-17 11:00:00","val_590":88.55}];

			
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'dptimestamp' },
                    { name: 'val_590' }
                    ],
				localdata: chartdatasourcearr
            };
			
		
            var dataAdapter = new $.jqx.dataAdapter(source);

            // prepare jqxChart settings
            var settings = {
                title: "Tesla Motors Stock Price",
                description: "(June 2017 - March 2018)",
                enableAnimations: false,
                enableCrosshairs: true,
                padding: { left: 5, top: 5, right: 30, bottom: 5 },
                titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                {
                    dataField: 'dptimestamp',
                    minValue: Date.parse("2019-01-17 10:30:00"),
                    maxValue: Date.parse("2019-01-17 11:00:00"),
                    type: 'date',
                    baseUnit: 'minute',
                    rangeSelector: {
                        size: 80,
                        padding: {top: 0, bottom: 0 },
                        minValue: Date.parse("2019-01-17 10:30:00"),
                        backgroundColor: 'white',
                        dataField: 'val_590',
                        baseUnit: 'minute',
                        gridLines: { visible: false },
                        serieType: 'area'
                    }
                },
                valueAxis:
                {
                    title: { text: 'Price per share [USD]<br><br>' },
                    labels: { horizontalAlignment: 'right' }
                },

                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'scatter',
                            series: [
                                { dataField: 'val_590', displayText: 'Close Price', lineWidth: 0, lineWidthSelected: 0, symbolSize: 5, symbolType: 'circle'}
                            ]
                        }

                    ]
            };
			
			$('#chartContainer').jqxChart(settings);

        });
    </script>
</head>
<body class='default'>
    <div>
        <div id='chartContainer' style="width:800px; height:500px;">
        </div>
        
        <div id='selectorContainer' style="width:500px; height:100px;">
        </div>
    </div>
    <div class="example-description">
    <br />
    <h2>Description</h2>
    <br />
    This is an example of Javascript chart range selector and zooming.  The chart data is prepared from a csv file. You can see an example of a complex tool tip custom formatting with the toolTipCustomFormatFn function. You can also see how to limit the duration of the animation with the animationDuration setting. The code also demonstrates how to render the selector in a separate container. 
    </div>
</body>
</html>
```
July 11, 2018 at 11:20 am in reply to: jqxScheduler Localization jqxScheduler Localization #100947

Klaus H
Participant

Hello Martin,

thank you, that worked, I did not think about the difference between HH and hh.

Best Regards
Klaus

June 1, 2018 at 10:15 am in reply to: Problem with export chart to image Problem with export chart to image #100430

Klaus H
Participant

Hello Martin,

I did not see the scatter chart example, that works perfectly. Thank you

Best regards
Klaus

April 5, 2018 at 3:29 pm in reply to: Problem with iterating through tabs Problem with iterating through tabs #99613

Klaus H
Participant

Hello Hristo,

as written before your last post, I am using the approach to generate the chart two times, once inside the tab, once inside a container, I access the picture data from the container and make that invisible after I have retrieved the necessary data (or maybe in the future I delete the container). Technically it works, the first user feedback is good, browser performance does not seem to be an issue as of now.

I don’t see any way to achieve a good solution for this case with the api right now. There would have to be an event that is triggered after the chart has finished rendering in order to save the data and create the next tab with the next chart. But as you said it is a strange case and not a common case.

Thanks for all the help.

Regards
Klaus

April 5, 2018 at 7:44 am in reply to: Problem with iterating through tabs Problem with iterating through tabs #99601

Klaus H
Participant

Hi,

I couldn’t solve the problem, but I found a workaround, I generate all the charts two times, one inside the tab and one outside the tab and if I need to generate the picture data for the chart, I use that from outside of the tab and make it invisible if I do not need it.

April 3, 2018 at 2:16 pm in reply to: Problem with iterating through tabs Problem with iterating through tabs #99574

Klaus H
Participant

Hello Hristo,

thank you for your feedback.

I have a function that tries to add a new a new tab and checks if there is corresponding data for it to do so or finish the execution. If there is data, it tries to add a new tab with a new function call. I had the first call of this in the callback of the load function of the website and further calls I triggered in the add event of the jqxTab – I have moved this to the initTabContent and it works 100% like before with the strange behaviour.

The main problem is I need to get the png data of the chart, for that it needs to be visible, but not all are visible if I use the select function and I cannot react to the refreshEnd event of the chart to get to the data because that seems to fire once it starts rendering, I would need it after it has finished rendering.

Do you think it might work if I do not create the additional tabs on the fly in JavaScript but if I create them on the server as HTML? But I have tried this on a fiddle and that did not seem to work either, even with ensureVisible:
http://jsfiddle.net/7g3sz64c/

I don’t understand why the tab is not shown/selected.

November 24, 2017 at 12:32 pm in reply to: Problem with Filterrow and Localization Problem with Filterrow and Localization #97535

Klaus H
Participant

Adding “filtercondition: ‘contains'” to each column gets rid of the problem, but I do not know why changing the language changes this behaviour.

November 24, 2017 at 12:20 pm in reply to: Problem with Filterrow and Localization Problem with Filterrow and Localization #97533

Klaus H
Participant

I guess I have found the problem, in the english version the default value of the filter is “contains” which is probably set somewhere in the code. With the german localization contains (= enthält) is not preselected but empty (= leer) as the first entry is selected. Is there any way I can influence this?

Edit: If I use a checkedlist as a filter, it also does not work.

November 10, 2017 at 7:58 am in reply to: Show Tooltip Info in an outside element Show Tooltip Info in an outside element #97228

Klaus H
Participant

Hi,

works like a charm. The biggest problem was the missing timestamp in the event in the series chart, but I figured out to use the elementIndex for that. Maybe you can send that with the event in the future.

Best Regards
Klaus

November 9, 2017 at 12:55 pm in reply to: Show Tooltip Info in an outside element Show Tooltip Info in an outside element #97203

Klaus H
Participant

Hello Hristo,

thank you very much. That looks very promising and that should work.

Regards
Klaus
Author

Posts

Viewing 15 posts - 16 through 30 (of 144 total)

← 1 2 3 … 10 →