score:2
i also ran into this problem where i wanted to chart.js charts as an image. i built a web service that takes a chart.js config and returns a png image.
the service is called quickchart and it's open source.
take a chart.js config like this:
{
type: 'bar',
data: {
labels: ['january', 'february', 'march', 'april', 'may'],
datasets: [{
label: 'dogs',
data: [ 50, 60, 70, 180, 190 ]
}, {
label: 'cats',
data: [ 100, 200, 300, 400, 500 ]
}]
}
}
and put it into a url:
the /chart
endpoint returns this png:
don't forget to url encode the chart config. to use this in php, use the urlencode function to encode the chart definition:
$chart = "{
type: 'bar',
data: {
labels: ['january', 'february', 'march', 'april', 'may'],
datasets: [{
label: 'dogs',
data: [ 50, 60, 70, 180, 190 ]
}, {
label: 'cats',
data: [ 100, 200, 300, 400, 500 ]
}]
}
}";
$encoded = urlencode($chart);
$imageurl = "https://quickchart.io/chart?c=" . $encoded;
// embed $imageurl in your email
Source: stackoverflow.com
Related Query
- Email a chartjs graph in laravel
- Laravel PDF generation with Graph and send it with Email
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- ChartJs canvas showing previous graph when changing Graph types
- ChartJS won't draw graph inside bootstrap tab until window resize
- Create a rounded bar graph with Angular and chartJS
- Gradient color for each bar in a bar graph using ChartJS
- Chartjs line graph dataset with offset
- Chartjs Graph is not showing in colorbox
- Chartjs real time graph x axis movement
- Chartjs drill down issue with multiple Y-Axis Bar/Line graph
- ChartJS / MomentJS - Unable to remove deprecation warning. Graph not showing in firefox/opera
- How to add ChartJS code in Html2Pdf to view image
- Vertical spacing in horizontal ChartJS Bar Graph
- Chartjs (Non Vue) Not Rendering Graph Chart inside V-if/V-show
- How to create a stacked graph using ChartJS
- Graph streaming real-time data with react and chartjs
- dynamically update the scale type of chartjs graph
- How to install chartjs on laravel 6 via npm
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- How to cut line graph in ChartJS
- Chartjs not working with d3 from csv source
- How to display chart using Chartjs with JSON data in Laravel
- Drawing images on top of graph doesn't work with ChartJS
- Bootstrap modal not working with chartjs line graph
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- How to set the chartjs bar graph scale to the highest value in the result data
- Display Bar chart values in the graph - ChartJS
- ChartJS tooltip when having multiple lines on a time graph
More Query from same tag
- When updating Chart.js chart the data is updated but canvas is emptied
- Grouped bar chart having each group with different data using chart.js
- Why is the data from my API not displaying on my chart.js chart in React?
- Dynamic id with canvas on html and angular
- Is there an option in chart.js to hide values in the graph legend
- How to use a string returned from php by ajax as data for a chart.js chart?
- chartjs-plugin-annotation won't draw anything
- Is it possible to maintain two different font size in Chart.JS based on screen size?
- How to display specific time label in x-axis by Chart.js?
- Create a arc like doughnut chart with Chart js plugins
- Chart.js - 2 does not display Axes labels
- It is possible to always show all tooltip in Chartjs 3.1
- Error trying to switch between different charts
- How to generate color code dynamically by swapping 2 characters within a string using PHP
- ChartJS 2.7.0 updating and exporting as png
- Grouping the object by key for Chartjs bar chart
- Extend bar chart on Chart JS 2 into a new type of Chart
- Want to multiple charts on same page with different data
- dataset not accepted in declaration of scatterChartData for Chartjs
- Chart.js xAxis linear scale : strange behavior
- How to parse data to graph in MVC
- Multiple y-axis in horizontalBar chart js
- Chart.js mixed chart : Lines not starting at zero
- ChartJs php array into 'labels' and 'datasets'
- Chartjs multiple barcharts , the first data will offset over view
- Who knows why I can't plot my chart properly?
- ChartJS in Datatable cell performance
- How can I set different colours for each bar in angular-chart.js v1.0.0?
- Angular2 ng2-chart customizations?
- polymer, using attribute data binding in the constructor functions