jQuery UI Widgets Forums Chart How to display column series grouped by week?

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  Hristo 2 days, 4 hours ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • jgarcias
    Participant

    Hi team!

    I have a PHP function to collect data from my MySQL database, counting the number of documents prepared by different user roles and returning such numbers to generate a column chart. That back-end function calculates the difference between two dates (parameters) and builds a SQL statement to count documents filled in on that range of dates.
    If the range <= 7 days the chart displays series daily.
    If the range > 7 and <= 30 the chart displays series per week.
    if the range > 30 and < 365 the chart displays series per month.

    The JSON field ‘mtsDate’ carries the result of such calculation, so that in javascript I can know what xAxis.type and xAxis.baseUnit to use, but there is nothing to indicate weeks.

    I am using this javascript function to this end:

       function activityChart() {
          var source = null;
          var bars = [];
          
          jQuery.ajax({
             type: 'get',
             url: '/graph/activityChartData',   // returns the total documents prepared by role
             data: { iniDate: iniDate, endDate: endDate },
             dataType: 'json',
             success: function (response) {
                source = JSON.parse(JSON.stringify(response));
    
                // Create array of fields (keys) from JSON object.
                var fields = Object.keys(source[0]);
    
                // The for loop starts at 1 because the first JSON field is a date.
                for (var i = 1; i < fields.length; i++) {
                   // Create a number of series (bars) equal to number of JSON keys.
                   bars.push({ dataField: fields[i], displayText: fields[i] });
                }
                settings.source = source;
                $('#chartContainer').jqxChart(settings);
             },
             error: function (xhr, status, error) {
                alert('Error loading "' + source.url + '" : ' + error);
             }
          });
          
          var settings = {
             title: 'Documents prepared by role',
             description: '',
             enableAnimations: false,
             showLegend: true,
             padding: { left: 5, top: 5, right: 5, bottom: 5 },
             titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
             xAxis:
             {
                dataField: 'mtsDate',
                //type: 'date',  // What type should I use?
                type: 'default',
                baseUnit: 'day',
                unitInterval: 1,
                formatFunction: function (value) {
                   return $.jqx.dataFormat.formatdate(value, 'dd/MM/yyyy');
                },
                gridLines: { visible: true },
             },
             colorScheme: 'scheme02',
             seriesGroups:
                [
                   {
                      type: 'column',
                      valueAxis:
                      {
                         unitInterval: 2,
                         minValue: 0,
                         maxValue: 30,
                         displayValueAxis: true,
                         description: 'Number of tests',
                         axisSize: 'auto',
                         tickMarksColor: '#888888'
                      },
                      series: bars,
                   }
                ]
          };
          // setup the chart
          $('#chartContainer').jqxChart(settings);
       };

    I can generate this chart successfully drawing series (bars) per day or per month.
    The question is:
    How can I draw the bars per week?

    Cheers,

    Joaquin.


    Hristo
    Participant

    Hello Joaquin,

    Before I continue I would like to mention that the initialization should happen just once.
    I notice that because I saw that you use the function for this.
    To update it you need to use its methods.
    For this purpose, I would like to suggest you look at this demo:
    https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_live_updates.htm?light
    You could customize it as you use the xAxis.type = "base"; option and again with the formatFunction callback to format the labels.
    Please, take a look at this example:
    http://jsfiddle.net/twrgb75c/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    jgarcias
    Participant

    Thank you Hristo.
    That really worked for me.

    One more detail please… when I hover the mouse pointer, on the chart bars, a tooltip is displayed but it shows the dataField name (mtsDate in my case) and its value. Is there a way to change that name to something more meaningful like ‘Month’/’Week’/’Date’?

    Cheers,

    Joaquin.

    • This reply was modified 2 days, 9 hours ago by  jgarcias.

    jgarcias
    Participant

    Hi Hristo

    Do not worry. I found out how to format the tooltip in the documentation.

    Thanks a lot.


    Hristo
    Participant

    Hello Joaquin,

    Thank you for these details.
    Please, let me know if you have any other questions.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.