Skip to content

muan/url-to-chart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

URL to chart

Using chart.js and chartjs-node.

Deploy

Usage

With qs:

Doughnut chart

require('qs').stringify({
  w: 400,
  h: 400,
  type: 'doughnut',
  data: {
    labels: ['VERY', 'USEFUL', 'CHART'],
    datasets: [
      {
        borderWidth: 5,
        borderColor: '#ffffff',
        backgroundColor: ['#ff8a8a', '#fbeb76', '#ffc08a'],
        data: [10, 20, 30]
      }
    ]
  }
})
> w=400&h=400&type=doughnut&data%5Blabels%5D%5B0%5D=VERY&data%5Blabels%5D%5B1%5D=USEFUL&data%5Blabels%5D%5B2%5D=CHART&data%5Bdatasets%5D%5B0%5D%5BborderWidth%5D=5&data%5Bdatasets%5D%5B0%5D%5BborderColor%5D=%23ffffff&data%5Bdatasets%5D%5B0%5D%5BbackgroundColor%5D%5B0%5D=%23ff8a8a&data%5Bdatasets%5D%5B0%5D%5BbackgroundColor%5D%5B1%5D=%23fbeb76&data%5Bdatasets%5D%5B0%5D%5BbackgroundColor%5D%5B2%5D=%23ffc08a&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B0%5D=10&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B1%5D=20&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B2%5D=30

URL: https://url-to-chart.herokuapp.com/?w=400&h=400&type=doughnut&data[labels][0]=VERY&data[labels][1]=USEFUL&data[labels][2]=CHART&data[datasets][0][borderWidth]=5&data[datasets][0][borderColor]=#ffffff&data[datasets][0][backgroundColor][0]=#ff8a8a&data[datasets][0][backgroundColor][1]=#fbeb76&data[datasets][0][backgroundColor][2]=#ffc08a&data[datasets][0][data][0]=10&data[datasets][0][data][1]=20&data[datasets][0][data][2]=30

Image:

Line chart

require('qs').stringify({
  w: 1000,
  h: 400,
  type: 'line',
  data: {
    labels: ['JAN', 'FEB', 'MAR', 'APR', 'AUG', 'SEPT', 'OCT', 'NOV', 'DEC'],
    datasets: [
      {
        label: 'HELLO WORLD',
        data: [25, 21, 23, 24, 22, 24, 24, 30, 29, 28, 31, 30]
      }
    ]
  }
})
> w=1000&h=400&type=line&data%5Blabels%5D%5B0%5D=JAN&data%5Blabels%5D%5B1%5D=FEB&data%5Blabels%5D%5B2%5D=MAR&data%5Blabels%5D%5B3%5D=APR&data%5Blabels%5D%5B4%5D=AUG&data%5Blabels%5D%5B5%5D=SEPT&data%5Blabels%5D%5B6%5D=OCT&data%5Blabels%5D%5B7%5D=NOV&data%5Blabels%5D%5B8%5D=DEC&data%5Bdatasets%5D%5B0%5D%5Blabel%5D=HELLO%20WORLD&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B0%5D=25&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B1%5D=21&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B2%5D=23&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B3%5D=24&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B4%5D=22&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B5%5D=24&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B6%5D=24&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B7%5D=30&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B8%5D=29&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B9%5D=28&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B10%5D=31&data%5Bdatasets%5D%5B0%5D%5Bdata%5D%5B11%5D=30

URL: https://url-to-chart.herokuapp.com?w=1000&h=400&type=line&data[labels][0]=JAN&data[labels][1]=FEB&data[labels][2]=MAR&data[labels][3]=APR&data[labels][4]=AUG&data[labels][5]=SEPT&data[labels][6]=OCT&data[labels][7]=NOV&data[labels][8]=DEC&data[datasets][0][label]=HELLO WORLD&data[datasets][0][data][0]=25&data[datasets][0][data][1]=21&data[datasets][0][data][2]=23&data[datasets][0][data][3]=24&data[datasets][0][data][4]=22&data[datasets][0][data][5]=24&data[datasets][0][data][6]=24&data[datasets][0][data][7]=30&data[datasets][0][data][8]=29&data[datasets][0][data][9]=28&data[datasets][0][data][10]=31&data[datasets][0][data][11]=30

Image: