How to display column series grouped by week?

[jgarciasParticipant]

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.

[HristoParticipant]

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

[jgarciasParticipant]

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.

[jgarciasParticipant]

Hi Hristo

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

Thanks a lot.

[HristoParticipant]

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

[Author]

Posts