valueAxis title and timestamps on xAxis not showing

[mhussajnParticipant]

Hi, i’m building an app using Angular CLI and jqxChart. I started the project from scratch today and noticed that you have updated your guidelines and package (jqwidgets-scripts instead of jqwidgets-framework). So i installed new package, followed your new guidelines and copied my code which uses some of the code from chart demo – “Live Updates Every Second”

Now the title on valueAxis and timestamps are not showing.

before:

after:

ts file:

  @ViewChild('myChart') myChart: jqxChartComponent;

  data: any[] = [];
  xAxis: any =
  {
      dataField: 'timestamp',
      type: 'date',
      baseUnit: 'second',
      unitInterval: 5,
      formatFunction: (value: any) => {
          return jqx.dataFormat.formatdate(value, 'hh:mm:ss', 'en-us');
      },
      gridLines: { step: 2 },
      valuesOnTicks: true,
      labels: { angle: -45, offset: { x: -17, y: 0 } }
  };
  valueAxis: any =
  {
      minValue: 0,
      maxValue: 100,
      title: { text: 'Index Value' },
      labels: { horizontalAlignment: 'right' }
  };
  seriesGroups: any[] =
  [
      {
          type: 'splinearea',
          alignEndPointsWithIntervals: true,
          series: [
            { dataField: 'value1', displayText: 'Core 1', opacity: 0.7, lineWidth: 2},
            { dataField: 'value2', displayText: 'Core 2', opacity: 0.7, lineWidth: 2},
            { dataField: 'value3', displayText: 'Core 3', opacity: 0.7, lineWidth: 2},
            { dataField: 'value4', displayText: 'Core 4', opacity: 0.7, lineWidth: 2},
          ]
      }
  ];

  ngAfterViewInit(): void {
      const data = this.myChart.source();
      const timer = setInterval(() => {
          if (data.length >= 100) {data.splice(0, 1); }
          const timestamp = new Date();
          timestamp.setSeconds(timestamp.getSeconds());
          timestamp.setMilliseconds(0);
              data.push({
                  timestamp: timestamp,
                  value1: Math.floor(Math.random() * 99) + 1,
                  value2: Math.floor(Math.random() * 99) + 1,
                  value3: Math.floor(Math.random() * 99) + 1,
                  value4: Math.floor(Math.random() * 99) + 1,
              });
          this.myChart.update();
      }, 1000);
  }

[Ivo ZhulevParticipant]

Hi mhussajn,

Can you please share and the HTML markup?

Best Regards,
Ivo

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

[ponrajParticipant]

We are having the same issue as well, it seems the value axis title and x-axis labels are displayed under the chart [while debugging the elements, they are there but not visible.]

Mockups:
padding: any = { left: 10, top: 5, right: 10, bottom: 5 };

titlePadding: any = { left: 50, top: 0, right: 0, bottom: 10 };

xAxis: any =
{
dataField: ‘ChartDate’,
type: ‘date’,
baseUnit: ‘month’,
title: { text: ‘Business Date’ },
unitInterval: 3,
tickMarks: { visible: true, interval: 1 },
gridLinesInterval: { visible: true, interval: 1 },
valuesOnTicks: true,
labels: {
angle: -30,
rotationPoint: ‘topright’,
offset: { x: 0, y: -25 }
}
};

valueAxis: any =
{
dataField: ‘ChartDate’,
title: { text: ‘Count’ },
labels: { horizontalAlignment: ‘right’ }
};

seriesGroups: any =
[
{
type: ‘line’,
series: [
{ dataField: ‘Unique_Count’, displayText: ‘Unique Count’ }
]
}
];

[StanislavParticipant]

Hello ponraj,

We are sorry for the inconvenience!
For now, use v5.4.0 of jqwidgets.(You can still use v5.6.0 on the jqwidgets-ts files)

We will do our best to fix the problem as soon as possible.

Best Regards,
Stanislav

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

[Author]

Posts