CODEWITHSUNDEEP
angulartypescriptchart.jsjqxgridjqxwidgets
deitz88
deitz88

Reputation: 33

injecting chart.js sparkline to jqxGrid widget in Angular with typescript

I am attempting to display a sparkline from an array of data coming from an internal API call.

the data comes as an array of numbers, and import { Chart, registerables } from 'chart.js'; Chart.register(...registerables); are imported.

the columns for the grid are:

 public columns = [
    {...},
    { text: 'Price Histiory', datafield: 'priceHistory', outerHeight: 100, innerHeight: 100, width: 200, cellsRenderer: (row: any, column: any, value: any, rowData: any) => {
     
        let chart = '<div><canvas id="chart' + row + '"></canvas></div>'
        this.testy('chart'+row, value)
        return chart
          }
        }
  ]

the only way to get the values I have found is to create a function that takes in the values form the cellrenderer value property and then create this below:

  async testy(chart, value){
    await chart
    const ctx = <HTMLCanvasElement> document.getElementById(`${chart}`);
    ctx.style.height = '35px'
    ctx.style.width = '200px'
 
    const myChart = new Chart(ctx, {
      type: 'line',
      data: {
        datasets: [{
          label: '',
          data: [value],
          fill: true,
          borderColor: 'red',
          tension: 0.1
        }]
      }
      }) 
      return myChart
    }

i am currently getting the data to upload the numbers correctly, but I cannot get the line to display. Instead it displays as :

screenshot

I have tried to a wide variety of types for the 'type' arg in the chart.js, but cannot seem to get it to display a simple line/sparkline chart.

i have also dug pretty heavily into the docs.

Any ideas on what I could be doing wrong here?

Upvotes: 1

Views: 151

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31371

In the function where you make your chart you specify the data as an array with a single value so only a single point is drawn, chart.js needs at least 2 values to draw a line between them.

Also your chart does not have enough height to display anything correctly so if you want your graph to be useful you also need to give the container some more height

Upvotes: 0

Related Questions