0

We're trying to give colleagues the ability to share ChartJS graphs with each other. Most of our current graphs are dynamic and users can apply filters (dates, add/remove data etc). The plan is to have a button that, on click, will get the data and properties (labels, line colours, borderWidth, chart type etc) and pass this data via a url. The user can then send that link to someone else. They can open it up to view that chart captured as it was seen by the original user, like a screenshot, but with all the interactive features enabled.

E.g. 

stackoverflow.com/shared_chart.php?conf=%7B%22responsive%22:true,%22responsiveA

When a chart is created by myChart = new Chart(ctx, config); ChartJs adds a lot of new properties to the chart object (e.g $plugin, _meta) that I don't need. And, when I JSON.stringify(myChart.config) I get an error 

"Uncaught TypeError: Converting circular structure to JSON"
.

I've added the code needed to create a sample bar chart below:

// HTML needs a canvas element
<-- <canvas id="myChart"></canvas> -->
const ctx = $('#myChart');
let config;
let myChart;


// config would look something like this
config = {
    type: 'bar',

    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: 'rgba(92,184,92,0.5)',
            borderColor: 'rgba(92,184,92,1.000)',
            borderWidth: 2,
            data: [
                1,2,3,4,3,2,1
            ]
        }, {
            label: 'Dataset 2',
            backgroundColor: 'rgba(66,139,202,0.5)',
            borderColor: 'rgba(66,139,202,1)',
            borderWidth: 2,
            data: [
                7,2,3,1,5,2,1
            ]
        }]
    },

    options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Chart.js Bar Chart'
        }
    }
}    

myChart = new Chart(ctx,config);

On the page they are directed to, I'd like to grab the GET data and construct a new Chart.

ross9998
  • 1
  • 1

1 Answers1

1

You can exclude the extra properties that Chart.js adds. E.g.:

JSON.stringify(myChart.config, function(key, value) {
    if (key === '_meta') return undefined;
    else return value;
}
Ben McCann
  • 18,548
  • 25
  • 83
  • 101