jqxChart slowdown

[LipiParticipant]

Hi!
During the initial drawing of jqxChart (by $(‘#jqxChart3′).jqxChart(settings)), everything is quick as lightning. However, when I draw my diagram the second time, it gots painfully slow. In FireFox it is 5 secs, in IE11 it is more than 20 sec. Only 3 times 365 points are drawn. What can be the reason. The code is something like:

   
...
   function plotData2(data, plotTitle)
    {
      var source =
        {
          datatype: "json",
          localdata: data,
          datafields: [
            {name: 'time'},
            {name: 'recid1'},
            {name: 'value1'}
          ]
        };

      var dataAdapter = new $.jqx.dataAdapter(source,
        {
          autoBind: true,
          async: true,
          downloadComplete: function () {
          },
          loadComplete: function () {
          },
          loadError: function () {
          }
        });

      $.jqx._jqxChart.prototype.colorSchemes.push({
        name: 'customScheme',
        colors: ['#FF0000', '#00FF00', '#0000FF', '#FFC084', '#FF8000', '#00FFFF', '#FF00FF', '#C084FF']
      });

      var settings = {
        title: plotTitle,
        description: '',
        backgroundColor: '#FFFFFF',
        enableAnimations: false,
        showLegend: true,
        enableCrosshairs: true,
        crosshairsDashStyle: '2,2',
        crosshairsLineWidth: 1.0,
        padding: {left: 5, top: 5, right: 50, bottom: 5},
        titlePadding: {left: 90, top: 0, right: 0, bottom: 10},
        source: dataAdapter,
        colorScheme: 'customScheme',
        localization: getLocalization('hu'),
        xAxis:
          {
            type: 'basic',
            title: {text: 'Napok száma'},
            textRotationAngle: 0,
            valuesOnTicks: false,
            dataField: 'time',
            displayText: 'Napok száma',
            showTickMarks: true,
            valuesOnTicks: true,
            gridLines: {
              visible: true,
              dashStyle: '4,4',
              color: '#444444'
            },
            rangeSelector: {
              size: 40,
              renderTo: $('#chartSelectorContainer2'),
              padding: {top: 0, bottom: 0},
              backgroundColor: '#FFFFFF',
              dataField: 'value1',
              gridLines: {visible: false},
              serieType: 'area'
            }
          },
        seriesGroups:
          [
            {
              type: 'line',
              alignEndPointsWithIntervals: false,
              valueAxis:
                {
                  visible: true,
                  position: 'left',
                  title: {text: 'Fogyasztás [m3]'},
                  toolTipFormatSettings: {thousandSeparator: ' ', decimalPlaces: 0, dateFormat: 'd2'},
                  labels: {
                    horizontalAlignment: 'right',
                    formatSettings: {decimalPlaces: 1}
                  },
                  gridLines: {
                    visible: true,
                    dashStyle: '2,4'
                  }
                },
              series: [
                {dataField: 'value1', displayText: 'Fogyasztás [m3]'}
              ]
            }
          ]
      };
      $('#jqxChart2').jqxChart(settings);
    }
...

The used jqWidgets version is 4.3.0, together with jquery-1.11.1.min.

Best regards,
Lipi

P.S. It would be nice to have a preview and a delete feature in this Forum.

[Peter StoevKeymaster]

Hi Lipi,

If you run this same code, you’re drawing your chart many times. Create the Chart, then when you need to update a setting, update just that setting, do not run the initialization code again.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[LipiParticipant]

Hi, Peter,
you mean something like

...
    var init1;
    init = false;
...
    function plotData2(data, plotTitle)
    {
      var source =
        {
          datatype: "json",
          localdata: data,
          datafields: [
            {name: 'time'},
            {name: 'recid1'},
            {name: 'value1'}
          ]
        };

      var dataAdapter = new $.jqx.dataAdapter(source,
        {
          autoBind: true,
          async: true,
          downloadComplete: function () {
          },
          loadComplete: function () {
          },
          loadError: function () {
          }
        });

      if (!init2) {

        $.jqx._jqxChart.prototype.colorSchemes.push({
          name: 'customScheme',
          colors: ['#FF0000', '#00FF00', '#0000FF', '#FFC084', '#FF8000', '#00FFFF', '#FF00FF', '#C084FF']
        });

        var settings = {
          title: plotTitle,
          description: '',
          backgroundColor: '#FFFFFF',
          enableAnimations: false,
          showLegend: true,
          enableCrosshairs: true,
          crosshairsDashStyle: '2,2',
          crosshairsLineWidth: 1.0,
          padding: {left: 5, top: 5, right: 50, bottom: 5},
          titlePadding: {left: 90, top: 0, right: 0, bottom: 10},
          source: dataAdapter,
          colorScheme: 'customScheme',
          localization: getLocalization('hu'),
          xAxis:
            {
              type: 'basic',
              title: {text: 'Napok száma'},
              textRotationAngle: 0,
              valuesOnTicks: false,
              dataField: 'time',
              displayText: 'Napok száma',
              showTickMarks: true,
              valuesOnTicks: true,
              gridLines: {
                visible: true,
                dashStyle: '4,4',
                color: '#444444'
              },
              rangeSelector: {
                size: 40,
                renderTo: $('#chartSelectorContainer2'),
                padding: {top: 0, bottom: 0},
                backgroundColor: '#FFFFFF',
                dataField: 'value1',
                gridLines: {visible: false},
                serieType: 'area'
              }
            },
          seriesGroups:
            [
              {
                type: 'line',
                alignEndPointsWithIntervals: false,
                valueAxis:
                  {
                    visible: true,
                    position: 'left',
                    title: {text: 'Fogyasztás [m3]'},
                    toolTipFormatSettings: {thousandSeparator: ' ', decimalPlaces: 0},
                    labels: {
                      horizontalAlignment: 'right',
                      formatSettings: {decimalPlaces: 1}
                    },
                    gridLines: {
                      visible: true,
                      dashStyle: '2,4'
                    }
                  },
                series: [
                  {dataField: 'value1', displayText: 'Fogyasztás [m3]'}
                ]
              }
            ]
        };
        $('#jqxChart2').jqxChart(settings);
        init2 = true;
      } else {
        var settings = {
          title: plotTitle,
          source: dataAdapter
        }
        $('#jqxChart2').jqxChart(settings);
      }
    }

do you?
Yes, it definitely helped.
THANK YOU.

[LipiParticipant]

But of course you should use init2 everywhere in the code sample.
I had three functions, and show here only the second function.
Thanks again,
Lipi

[Author]

Posts