You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

46 lines
1.4KB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <script src="https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js"></script>
  8. <script type="text/javascript" src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
  9. <script src="https://www.gstatic.com/charts/loader.js"></script>
  10. <script src="https://unpkg.com/chartkick@2.3.3"></script>
  11. <script src="https://unpkg.com/vue-chartkick@0.2.1/dist/vue-chartkick.js"></script>
  12. <style type="text/css">
  13. </style>
  14. <title>vuepie</title>
  15. </head>
  16. <body>
  17. <div id="app">
  18. <column-chart :data="chartData" :download="true" legend="bottom" label="Value"></line-chart>
  19. </div>
  20. <script>
  21. new Vue({
  22. el: '#app',
  23. data: {
  24. chartData: [{ "name": "Workout", "data": { "bla": 3, "blub": 4 } }, { "name": "ja", "data": { "linux": 5, "aws": 3 } }]
  25. },
  26. beforeMount(){
  27. const dataRegexp = /data=(.*)/
  28. let match = dataRegexp.exec(document.URL)
  29. if (match) {
  30. if (match.length === 2) {
  31. try {
  32. match = match[1].replace(/%22/g,'"')
  33. this.chartData = JSON.parse(match)
  34. } catch(e) {
  35. console.error(match[1])
  36. console.error('failed to treat input string as a json object')
  37. }
  38. }
  39. }
  40. }
  41. })
  42. </script>
  43. </body>
  44. </html>