Graph with refresh and click event get labels

[tranenParticipant]

Hi,

I got 3 different minor problems that I would like to know if it’s possible to solve them.
So I will try my best to explain the situation.
My chart will show Date (category axis) and value.
1/ At the beginning of the page I need to have an empty chart but if I put empty data it will show a random date like “1900”.
is it possible to get a real empty chart?
2/ I use also range selector, when I update the chart I would like to update the range selector too because if I move it before the update it will stay at the time even after the update. is it possible?
3/ Finally, I would like to use the click event to get the Value and the Day. So far for the value it’s ok and works for all the data but if I try to get the day it just show nothing and it will show for the first value. How can I get the label of the chart?

If you can help me for any of them it will be a great help!

Here is the code I have:

 <script type="text/javascript">

         function GetResponse(data) {
            // example of data:
            // data = [ {'Day' : '02/01/2014 ' , 'ID' : 20 } , 
	   //           {'Day' : '03/01/2014 ' , 'ID' : 30 } , 
	   //           {'Day' : '04/01/2014 ' , 'ID' : 10 } , 
	  //            {'Day' : '05/01/2014 ' , 'ID' : 40 }]
             var SampleData = JSON.parse(data);
             var source = {
                 localdata: SampleData,
                 datatype: 'array'
             }
             var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true });
             $('#chartContainer').jqxChart({ _renderData: new Array() });
             $('#chartContainer').jqxChart({ source: dataAdapter });
             $('#chartContainer').jqxChart('refresh');
         };

        $(document).ready(function () {
   
            var initChart = function () {
                var sampleData = [
                     { "Day": "", "ID": "0" }
                ];
                var source = {
                    localdata: sampleData,
                    datatype: 'array'
                }
                var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true });
                var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                var settings = {
                    title: "Test",
                    description: "",
                    enableAnimations: true,
                    showLegend: false,
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter,
                    xAxis:
                        {
                            dataField: 'Day',
                            showGridLines: true,
                            type: 'date',
                            baseUnit: 'day',
                            labels:
                            {
                                formatFunction: function (value) {
                                    return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString();
                                }
                            },
                            rangeSelector: {
                                renderTo: $('#selectorContainer'),
                                size: 80,
                                padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
                                backgroundColor: 'white',
                                dataField: 'ID',
                                baseUnit: 'day',
                                gridLines: { visible: false },
                                serieType: 'area',
                                labels: {
                                    formatFunction: function (value) {
                                        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString();
                                    }
                                }
                            }
                        },
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'column',
                                columnsGapPercent: 50,
                                seriesGapPercent: 0,
                                click: myEventHandler,
                                series: [
                                        { dataField: 'ID', displayText: 'data' }
                                ]
                            }
                        ]
                };

                function myEventHandler(e) {
                    var eventData = 'DataField: ' + e.instance + ' Value: ' + e.elementValue;
                    var record = dataAdapter.records[e.elementIndex];
                    eventData += "Day: " + record.Day;
                   alert(eventData)
                };

                // setup the chart
                $('#chartContainer').jqxChart(settings).
                    on('rangeSelectionChanging', function (event) {
                        var args = event.args;
                        args.instance.description = args.minValue.getFullYear() + " - " + args.maxValue.getFullYear();
                    })
       
            }
            var initWidgets = function (tab) {
                switch (tab) {
                    case 0:
                        initChart();
                        break;
                    case 1:
                        initGrid();
                        break;
                }
            }
            $('#jqxTabs').jqxTabs({ width: '100%', height: 420, theme: 'fresh', initTabContent: initWidgets });      
         
        });

Thank you!

[Peter StoevKeymaster]

Hi tranen,

Setting internal properties like _renderData is not allowed and I don’t suggest you to ever try to do that if you want working solutions.
To update the widget’s source, set its source property to new dataAdapter instance. Calling “refresh” after that is not required.
Handling Chart’s events is demonstrated on this example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_events.htm?arctic and explained here: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-events.htm

Best Regards,
Peter Stoev

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

[tranenParticipant]

Hi,

Thanks for your answer, I change for the refresh.
I already look the other links before but I am still not able to solve any of my problems.

[Author]

Posts