0

How do I access a certain row in a CARTO source?

For instance, I have Chart.js reading the ticketcount column using this:

var source = new carto.source.SQL('select * from ticketspercounty_copy');
var histogram = new carto.dataview.Histogram(source, 'ticketcount',{bins: 46});
histogram.on('dataChanged', (data) => {
       //console.log(data)

         let chart = new Chart(histo, {
           type: "bar",
           data: {
             labels: ['Abbeville',
                      'Charleston',
                      'York',
                    ],
             datasets: [
               {
                 data: data.bins.map(element => element.freq)
               }
             ]
           }
         });
       });
      // Add the histogram to the client
      client.addDataview(histogram);

but this generates an object that does not resemble the data like so:

enter image description here

I've pointed it to the freq field for testing but ultimately, I would like it to just read the singular value in each of the 46 rows.

Here is a snapshot of the table:

enter image description here

All I want to do is create a histogram of the ticketcount per ticketcounty and that information is not in the bin array.

1

You can get any bin from your data object. As stated in CARTO Developers, bins is an array, so you can use any js Array method in your code. I also recommend refactoring your code, I would create the chart outside the event and only populate the histogram once the data changes:

  const histogramDataview = new carto.dataview.Histogram(source, 'pop2005', {bins: 10});

  const histogramElement = document.getElementById('chart');   const histoChart = new Chart(histogramElement, {
    type: "bar",
    data: {
      datasets: [{
        label: 'Frequency',
        data: [],
        backgroundColor: [
          '#fcde9c','#faa476','#f0746e','#e34f6f','#dc3977','#b9257a','#7c1d6f'
        ]
        }]
      }
    });

  client.addDataview(histogramDataview);

  histogramDataview.on('dataChanged', (data) => {
    histoChart.data.labels = data.bins.map(x => `${x.start} to ${x.end}`);
    histoChart.data.datasets.forEach((dataset) => {
        dataset.data = data.bins.map(x => x.freq);
    });
    histoChart.update();   });

Here is the complete working example.

Bear in mind that CARTO.js histogram dataviews return bins, not columns. But I guess that's a typo, and based on your last sentence, you mean rows. If you want to get all feature value of the viewport, I recommend using CARTO VL viewportFeature or the SQL API with fetch or something like axios.

Update: based on the last update what you need is a category widget using sum(ticketcount) as the aggregated function. This can be done in Builder without coding. But CARTO.js category dataview (example) or CARTO VL viewportHistogram (example) with weight parameter in combination with Airship category widget component could do the trick.

  • I guess I'm not using the right tools then. I have a table that has a name field and a count field and I just want to create a bar chart for each name and using the count field. I've added a picture of the table in the question. – Matt Feb 19 at 18:09
  • Yes, you need to use category instead of histogram widget. Going to update the answer pointing to the right solution. – ramiroaznar Feb 20 at 8:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.