Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 

356 rindas
16 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Frappe Charts</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="keywords" content="open source javascript js charts library svg zero-dependency interactive data visualization beautiful drag resize">
  8. <meta name="description" content="A simple, responsive, modern charts library for the web.">
  9. <link rel="stylesheet" type="text/css" href="assets/css/normalize.css" media="screen">
  10. <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
  11. <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
  12. <link rel="stylesheet" type="text/css" href="assets/css/frappe_theme.css" media="screen">
  13. <link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
  14. <link rel="stylesheet" type="text/css" href="assets/css/default.css" media="screen">
  15. <script src="assets/js/highlight.pack.js"></script>
  16. <script>hljs.initHighlightingOnLoad();</script>
  17. <link rel="shortcut icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
  18. <link rel="icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
  19. <script async defer src="https://buttons.github.io/buttons.js"></script>
  20. </head>
  21. <body>
  22. <div class="container">
  23. <div class="row hero" style="padding-top: 30px; padding-bottom: 0px;">
  24. <div class="jumbotron" style="background: transparent;">
  25. <h1>Frappe Charts</h1>
  26. <p class="mt-2">GitHub-inspired simple and modern SVG charts for the web</p>
  27. <p class="mt-2">with zero dependencies.</p>
  28. </div>
  29. <div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
  30. <div id="chart-composite-1" class="border"><svg height=225></svg></div>
  31. <p class="mt-1">Click or use arrow keys to navigate data points</p>
  32. </div>
  33. <div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
  34. <div id="chart-composite-2" class="border"><svg height=225></svg></div>
  35. </div>
  36. </div>
  37. <div class="group later">
  38. <div class="row section">
  39. <div class="col-sm-10 push-sm-1">
  40. <div class="dashboard-section">
  41. <h6 class="margin-vertical-rem">Create a chart</h6>
  42. <pre><code class="hljs html"> &lt!--HTML--&gt;
  43. &lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
  44. <pre><code class="hljs javascript"> // Javascript
  45. let chart = new Chart( "#chart", { // or DOM element
  46. data: {
  47. labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
  48. "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
  49. datasets: [
  50. {
  51. label: "Some Data", chartType: 'bar',
  52. values: [25, 40, 30, 35, 8, 52, 17, -4]
  53. },
  54. {
  55. label: "Another Set", chartType: 'bar',
  56. values: [25, 50, -10, 15, 18, 32, 27, 14]
  57. },
  58. {
  59. label: "Yet Another", chartType: 'line',
  60. values: [15, 20, -3, -15, 58, 12, -17, 37]
  61. }
  62. ],
  63. yMarkers: [{ label: "Marker", value: 70 }],
  64. yRegions: [{ label: "Region", start: -10, end: 50 }]
  65. },
  66. title: "My Awesome Chart",
  67. type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
  68. height: 300,
  69. colors: ['purple', '#ffa3ef', 'red']
  70. });
  71. chart.export();
  72. </code></pre>
  73. <!-- <div id="chart-types" class="border" style="margin-bottom: 15px"></div> -->
  74. <!-- <div >
  75. <div class="btn-group x-axis-buttons margin-vertical-px" role="group">
  76. <button type="button" class="btn btn-sm btn-secondary active" data-type='span'>X span</button>
  77. <button type="button" class="btn btn-sm btn-secondary" data-type='tick'>X tick</button>
  78. </div>
  79. <div class="btn-group y-axis-buttons margin-vertical-px" role="group">
  80. <button type="button" class="btn btn-sm btn-secondary active" data-type='span'>Y span</button>
  81. <button type="button" class="btn btn-sm btn-secondary" data-type='tick'>Y tick</button>
  82. </div>
  83. <div class="input-group input-group-sm">
  84. <span class="input-group-addon">.00</span>
  85. <input type="text" class="form-control" aria-label="Amount (rounded to the nearest dollar)">
  86. </div>
  87. </div> -->
  88. <div id="chart-aggr" class="border"></div>
  89. <div class="btn-group aggr-type-buttons margin-vertical-px mx-auto" role="group">
  90. <button type="button" class="btn btn-sm btn-secondary active" data-type='axis-mixed'>Mixed</button>
  91. <button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
  92. <button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
  93. </div>
  94. <div class="btn-group export-buttons margin-vertical-px mx-auto" role="group">
  95. <button type="button" class="btn btn-sm btn-secondary export-aggr">Export ...</button>
  96. </div>
  97. <!-- <p class="text-muted">
  98. <a target="_blank" href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts">Why Percentage?</a>
  99. </p> -->
  100. </div>
  101. </div>
  102. <div class="col-sm-10 push-sm-1">
  103. <div class="dashboard-section">
  104. <h6 class="margin-vertical-rem">
  105. Update Values
  106. </h6>
  107. <div id="chart-update" class="border"></div>
  108. <div class="chart-update-buttons mt-1 mx-auto" role="group">
  109. <button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
  110. <button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
  111. <button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
  112. <button type="button" class="btn btn-sm btn-secondary export-update">Export ...</button>
  113. </div>
  114. </div>
  115. </div>
  116. <div class="col-sm-10 push-sm-1">
  117. <div class="dashboard-section">
  118. <h6 class="margin-vertical-rem">
  119. Plot Trends
  120. </h6>
  121. <div id="chart-trends" class="border"></div>
  122. <div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group">
  123. <button type="button" class="btn btn-sm btn-secondary" data-type="hideDots">Line</button>
  124. <button type="button" class="btn btn-sm btn-secondary" data-type="hideLine">Dots</button>
  125. <button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
  126. <button type="button" class="btn btn-sm btn-secondary" data-type="regionFill">Region</button>
  127. </div>
  128. <div class="btn-group export-buttons mt-1 mx-auto" role="group">
  129. <button type="button" class="btn btn-sm btn-secondary export-trends">Export ...</button>
  130. </div>
  131. <!-- <pre><code class="hljs javascript margin-vertical-px"> ...
  132. lineOptions: 'line', // Line Chart specific properties:
  133. hideDots: 1, // Hide data points on the line; default 0
  134. heatline: 1, // Show a value-wise line gradient; default 0
  135. regionFill: 1, // Fill the area under the graph; default 0
  136. ...</code></pre> -->
  137. </div>
  138. </div>
  139. <div class="col-sm-10 push-sm-1">
  140. <div class="dashboard-section">
  141. <h6 class="margin-vertical-rem">
  142. Listen to state change
  143. </h6>
  144. <div class="row">
  145. <div class="col-sm-8">
  146. <div id="chart-events" class="border"></div>
  147. </div>
  148. <div class="col-sm-4">
  149. <div class="chart-events-data" class="border data-container">
  150. <div class="image-container border">
  151. <img class="moon-image" src="./assets/img/europa.jpg">
  152. </div>
  153. <div class="data margin-vertical-px">
  154. <h6 class="moon-name">Europa</h6>
  155. <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
  156. <p>Mass: <span class="mass">4800000</span> x 10^16 kg</p>
  157. <p>Diameter: <span class="diameter">3121.6</span> km</p>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. <pre><code class="hljs javascript margin-vertical-px"> ...
  163. isNavigable: 1, // Navigate across data points; default 0
  164. ...
  165. chart.parent.addEventListener('data-select', (e) => {
  166. update_moon_data(e.index); // e contains index and value of current datapoint
  167. });</code></pre>
  168. </div>
  169. </div>
  170. <div class="col-sm-10 push-sm-1">
  171. <div class="dashboard-section">
  172. <h6 class="margin-vertical-rem">
  173. And a Month-wise Heatmap
  174. </h6>
  175. <div id="chart-heatmap" class="border"
  176. style="overflow: scroll;"></div>
  177. <div class="heatmap-mode-buttons btn-group mt-1 mx-auto" role="group">
  178. <button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button>
  179. <button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
  180. </div>
  181. <div class="heatmap-color-buttons btn-group mt-1 mx-auto" role="group">
  182. <button type="button" class="btn btn-sm btn-secondary" data-color="default">Green (Default)</button>
  183. <button type="button" class="btn btn-sm btn-secondary active" data-color="blue">Blue</button>
  184. <button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
  185. </div>
  186. <div class="btn-group export-buttons mt-1 mx-auto" role="group">
  187. <button type="button" class="btn btn-sm btn-secondary export-heatmap">Export ...</button>
  188. </div>
  189. <pre><code class="hljs javascript margin-vertical-px"> let heatmap = new Chart("#heatmap", {
  190. type: 'heatmap',
  191. title: "Monthly Distribution",
  192. data: {
  193. dataPoints: {'1524064033': 8, /* ... */},
  194. // object with timestamp-value pairs
  195. start: startDate
  196. end: endDate // Date objects
  197. },
  198. countLabel: 'Level',
  199. discreteDomains: 0 // default: 1
  200. colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
  201. // Set of five incremental colors,
  202. // preferably with a low-saturation color for zero data;
  203. // def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
  204. });</code></pre>
  205. </div>
  206. </div>
  207. <div class="col-sm-10 push-sm-1">
  208. <div class="dashboard-section">
  209. <h6 class="margin-vertical-rem">Available options:</h6>
  210. <pre><code class="hljs javascript">
  211. ...
  212. {
  213. data: {
  214. labels: [],
  215. datasets: [],
  216. yRegions: [],
  217. yMarkers: []
  218. }
  219. title: '',
  220. colors: [],
  221. height: 200,
  222. tooltipOptions: {
  223. formatTooltipX: d => (d + '').toUpperCase(),
  224. formatTooltipY: d => d + ' pts',
  225. }
  226. // Axis charts
  227. isNavigable: 1, // default: 0
  228. valuesOverPoints: 1, // default: 0
  229. barOptions: {
  230. stacked: 1 // default: 0
  231. }
  232. lineOptions: {
  233. dotSize: 6, // default: 4
  234. hideLine: 0, // default: 0
  235. hideDots: 1, // default: 0
  236. heatline: 1, // default: 0
  237. regionFill: 1 // default: 0
  238. }
  239. axisOptions: {
  240. yAxisMode: 'span', // Axis lines, default
  241. xAxisMode: 'tick', // No axis lines, only short ticks
  242. xIsSeries: 1 // Allow skipping x values for space
  243. // default: 0
  244. },
  245. // Pie/Percentage charts
  246. maxLegendPoints: 6, // default: 20
  247. maxSlices: 10, // default: 20
  248. // Heatmap
  249. discreteDomains: 1, // default: 1
  250. start: startDate, // Date object
  251. colors: []
  252. }
  253. ...
  254. // Updating values
  255. chart.update(data);
  256. // Axis charts:
  257. chart.addDataPoint(label, valueFromEachDataset, index)
  258. chart.removeDataPoint(index)
  259. chart.updateDataset(datasetValues, index)
  260. // Exporting
  261. chart.export();
  262. </code></pre>
  263. </div>
  264. </div>
  265. <div class="col-sm-10 push-sm-1">
  266. <div class="dashboard-section">
  267. <h6 class="margin-vertical-rem">Install</h6>
  268. <p class="step-explain">Install via npm</p>
  269. <pre><code class="hljs console"> npm install frappe-charts</code></pre>
  270. <p class="step-explain">And include it in your project</p>
  271. <pre><code class="hljs javascript"> import { Chart } from "frappe-charts"</code></pre>
  272. <p class="step-explain">... or include it directly in your HTML</p>
  273. <pre><code class="hljs html"> &lt;script src="https://unpkg.com/frappe-charts@1.0.0"&gt;&lt;/script&gt;</code></pre>
  274. </div>
  275. </div>
  276. <div class="col-sm-10 push-sm-1">
  277. <div class="dashboard-section">
  278. <!-- Closing -->
  279. <div class="text-center" style="margin-top: 70px">
  280. <a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button">Download</button></a>
  281. <p style="margin-top: 3rem;margin-bottom: 1.5rem;"><a href="https://github.com/frappe/charts" target="_blank">View on GitHub</a></p>
  282. <p style="margin-top: 1rem;">
  283. <a class="github-button" href="https://github.com/frappe/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star frappe/charts on GitHub">Star</a>
  284. </p>
  285. <p>License: MIT</p>
  286. </div>
  287. </div>
  288. </div>
  289. </div>
  290. </div>
  291. </div>
  292. <div class="built-with-frappe text-center" style="margin-top: -20px">
  293. <img style="padding: 5px; width: 40px; background: #fff" class="frappe-bird" src="./assets/img/frappe-bird.png">
  294. <p style="margin: 24px 0 0px 0; font-size: 15px">
  295. Project maintained by <a href="https://frappe.io" target="_blank">Frappe</a>.
  296. Used in <a href="https://erpnext.com" target="_blank">ERPNext</a>.
  297. Read the <a href="https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97" target="_blank">blog post</a>.
  298. </p>
  299. <p style="margin: 24px 0 80px 0; font-size: 12px">
  300. Data from the <a href="https://www.amsmeteors.org" target="_blank">American Meteor Society</a>,
  301. <a href="http://www.sidc.be/silso" target="_blank">SILSO</a> and
  302. <a href="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a>
  303. </p>
  304. </div>
  305. <a href="https://github.com/frappe/charts" target="_blank" class="github-corner" aria-label="View source on Github">
  306. <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9a9a9a; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
  307. <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
  308. <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
  309. <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
  310. </svg>
  311. </a>
  312. <script src="assets/js/frappe-charts.min.js"></script>
  313. <script src="assets/js/index.min.js"></script>
  314. </body>
  315. </html>