I'm trying to figure out how to recreate this Chart as close as possible using ChartJS.
https://www.chartjs.org/
The biggest issue I'm having is surrounding is how to plot the data X axis. Each point on the graph represents a second.
Sample Json:
{"type":"line","data":{"datasets":[{"type":"line","fill":false,"data":[59.0,57.0,57.0,58.0,57.0,56.0,57.0,55.0,62.0,63.0,62.0,62.0,69.0,63.0,62.0,61.0,62.0,62.0,66.0,69.0,72.0,72.0,75.0,82.0,84.0,85.0,84.0,81.0,91.0,90.0,87.0,87.0,89.0,90.0,90.0,86.0,86.0,86.0,86.0,83.0,83.0,82.0,81.0,85.0,89.0,85.0,83.0,87.0,81.0,81.0,81.0,91.0,90.0,81.0,87.0,83.0,98.0,90.0,81.0,88.0,88.0,88.0,88.0,90.0,90.0,90.0,92.0,90.0,91.0,90.0,88.0,81.0,83.0,91.0,88.0,87.0,87.0,87.0,87.0,87.0,87.0,87.0,88.0,90.0,87.0,88.0,91.0,88.0,86.0,86.0,87.0,86.0,91.0,90.0,91.0,92.0,91.0,91.0,88.0,87.0,88.0,95.0,94.0,92.0,92.0,91.0,88.0,88.0,90.0,88.0,90.0,87.0,87.0,88.0,88.0,91.0,88.0,91.0,94.0,90.0,90.0,88.0,88.0,87.0,88.0,87.0,88.0,86.0,86.0,87.0,87.0,88.0,90.0,88.0,79.0,74.0,83.0,85.0,83.0,85.0,85.0,85.0,85.0,85.0,83.0,90.0,85.0,85.0,85.0,85.0,85.0,86.0,87.0,87.0,91.0,90.0,90.0,90.0,90.0,90.0,86.0,85.0,85.0,86.0,86.0,86.0,86.0,85.0,85.0,86.0,86.0,85.0,85.0,83.0,85.0,87.0,85.0,86.0,88.0,88.0,88.0,86.0,91.0,92.0,88.0,85.0,87.0,86.0,86.0,85.0,86.0,86.0,87.0,87.0,88.0,87.0,92.0,88.0,83.0,85.0,87.0,87.0,90.0,85.0,87.0,87.0,86.0,85.0,85.0,87.0,87.0,88.0,90.0,91.0,86.0,87.0,87.0,86.0,90.0,87.0,90.0,90.0,94.0,92.0,91.0,87.0,87.0,88.0,90.0,91.0,92.0,90.0,86.0,88.0,87.0,87.0,88.0,87.0,88.0,88.0,87.0,88.0,87.0,87.0,87.0,88.0,88.0,91.0,90.0,90.0,91.0,91.0,87.0,90.0,92.0,87.0,86.0,88.0,88.0,88.0,88.0,92.0,92.0,81.0,78.0,79.0,83.0,86.0,87.0,88.0,87.0,87.0,85.0,85.0,87.0,87.0,87.0,87.0,86.0,86.0,85.0,86.0,86.0,85.0,85.0,87.0,86.0,88.0,90.0,91.0,90.0,95.0,97.0,98.0,95.0,97.0,97.0,97.0,97.0,98.0,95.0,95.0,108.0,95.0,95.0,95.0,91.0,78.0,83.0,82.0,92.0,89.0,88.0,85.0,86.0,94.0,94.0,97.0,99.0,99.0,97.0,95.0,91.0,92.0,94.0,95.0,92.0,94.0,94.0,95.0,92.0,94.0,94.0,95.0,95.0,92.0,94.0,97.0,95.0,95.0,94.0,102.0,104.0,99.0,98.0,95.0,94.0,91.0,94.0,94.0,91.0,92.0,91.0,92.0,97.0,94.0,92.0,91.0,97.0,95.0,109.0,112.0,112.0,112.0,110.0,112.0,112.0,109.0,110.0,112.0,109.0,105.0,104.0,102.0,100.0,105.0,102.0,102.0,105.0,107.0,105.0,105.0,104.0,104.0,105.0,107.0,102.0,104.0,104.0,102.0,105.0,105.0,104.0,104.0,107.0,104.0,102.0,105.0,105.0,105.0,105.0,105.0,105.0,107.0,105.0,102.0,104.0,104.0,104.0,105.0,107.0,105.0,109.0,109.0,109.0,109.0,105.0,107.0,107.0,107.0,105.0,105.0,110.0,112.0,107.0,107.0,105.0,105.0,109.0,107.0,107.0,107.0,109.0,105.0,109.0,110.0,109.0,110.0,107.0,112.0,117.0,110.0,109.0,116.0,114.0,112.0,112.0,110.0,110.0,109.0,104.0,112.0,116.0,114.0,116.0,112.0,112.0,112.0,112.0,112.0,110.0,109.0,105.0,112.0,114.0,110.0,110.0,114.0,116.0,112.0,107.0,112.0,107.0,110.0,109.0,110.0,107.0,109.0,110.0,114.0,110.0,110.0,114.0,112.0,112.0,116.0,117.0,117.0,117.0,114.0,114.0,109.0,109.0,110.0,107.0,109.0,110.0,109.0,109.0,107.0,112.0,112.0,112.0,112.0,114.0,110.0,107.0,109.0,110.0,109.0,110.0,114.0,112.0,109.0,114.0,110.0,112.0,114.0,116.0,110.0,112.0,112.0,119.0,121.0,119.0,117.0,114.0,110.0,114.0,107.0,107.0,107.0,109.0,105.0,104.0,105.0,105.0,104.0,104.0,102.0,104.0,105.0,102.0,105.0,102.0,107.0,104.0,109.0,109.0,109.0,109.0,109.0,109.0,107.0,107.0,109.0,109.0,112.0,110.0,110.0,110.0,112.0,109.0,110.0,107.0,107.0,112.0,110.0,109.0,109.0,109.0,114.0,112.0,109.0,107.0,112.0,109.0,110.0,107.0,110.0,112.0,112.0,109.0,105.0,105.0,105.0,109.0,107.0,110.0,109.0,109.0,107.0,107.0,107.0,112.0,114.0,109.0,109.0,107.0,107.0,105.0,107.0,107.0,105.0,105.0,104.0,107.0,116.0,114.0,112.0,112.0,112.0,110.0,110.0,107.0,95.0,94.0,80.0,83.0,85.0,92.0,98.0,100.0,98.0,98.0,97.0,100.0,104.0,107.0,105.0,102.0,100.0,100.0,100.0,102.0,102.0,100.0,104.0,107.0,105.0,107.0,104.0,102.0,104.0,102.0,102.0,102.0,104.0,117.0,98.0,102.0,104.0,104.0,102.0,100.0,100.0,104.0,107.0,107.0,104.0,104.0,104.0,104.0,102.0,104.0,104.0,104.0,107.0,110.0,112.0,112.0,109.0,105.0,119.0,104.0,91.0,88.0,95.0,105.0,104.0,104.0,104.0,102.0,109.0,105.0,100.0,102.0,104.0,104.0,105.0,104.0,105.0,102.0,104.0,104.0,102.0,102.0,100.0,104.0,104.0,109.0,105.0,104.0,114.0,116.0,112.0,110.0,110.0,112.0,107.0,112.0,109.0,107.0,107.0,107.0,107.0,105.0,104.0,104.0,102.0,102.0,107.0,105.0,105.0,107.0,102.0,105.0,107.0,109.0,112.0,109.0,107.0,104.0,105.0,105.0,107.0,105.0,107.0,105.0,105.0,109.0,107.0,107.0,107.0,105.0,105.0,110.0,110.0,109.0,105.0,105.0,104.0,107.0,104.0,104.0,104.0,102.0,104.0,104.0,107.0,105.0,102.0,102.0,104.0,105.0,102.0,107.0,105.0,107.0,104.0,107.0,105.0,102.0,104.0,102.0,105.0,105.0,107.0,107.0,109.0,107.0,109.0,107.0,109.0,109.0,109.0,110.0,109.0,107.0,105.0,105.0,107.0,110.0,107.0,109.0,105.0,109.0,107.0,109.0,109.0,110.0,109.0,104.0,104.0,110.0,112.0,112.0,114.0,117.0,112.0,114.0,112.0,112.0,110.0,121.0,117.0,117.0,112.0,114.0,116.0,110.0,109.0,112.0,110.0,110.0,107.0,105.0,105.0,105.0,105.0,100.0,107.0,105.0,105.0,105.0,109.0,105.0,107.0,102.0,102.0,107.0,104.0,105.0,104.0,100.0,102.0,102.0,102.0,107.0,107.0,105.0,102.0,98.0,102.0,105.0,105.0,107.0,109.0,107.0,100.0,100.0,98.0,100.0,100.0,102.0,102.0,102.0,102.0,104.0,107.0,104.0,107.0,105.0,102.0,105.0,107.0,112.0,107.0,107.0,107.0,105.0,105.0,105.0,109.0,109.0,107.0,109.0,110.0,109.0,107.0,107.0,102.0,102.0,107.0,112.0,112.0,112.0,112.0,109.0,105.0,109.0,109.0,109.0,116.0,110.0,107.0,107.0,116.0,110.0,104.0,107.0,107.0,110.0,116.0,116.0,119.0,112.0,112.0,109.0,109.0,107.0,110.0,114.0,112.0,110.0,116.0,109.0,110.0,110.0,116.0,110.0,109.0,110.0,107.0,107.0,105.0,107.0,114.0,109.0,109.0,105.0,105.0,102.0,109.0,109.0,105.0,107.0,105.0,104.0,105.0,109.0,107.0,105.0,112.0,114.0,112.0,114.0,116.0,118.0,115.0,115.0,115.0,116.0,122.0,118.0,116.0,115.0,113.0,113.0,113.0,116.0,118.0,118.0,120.0,118.0,115.0,109.0,111.0,116.0,113.0,111.0,113.0,120.0,118.0,115.0,115.0,113.0,115.0,111.0,111.0,107.0,107.0,106.0,107.0,106.0,107.0,111.0,116.0,115.0,109.0,111.0,111.0,109.0,109.0,113.0,111.0,113.0,111.0,109.0,107.0,107.0,109.0,107.0,109.0,109.0,107.0,107.0,109.0,107.0,106.0,106.0,106.0,107.0,106.0,104.0,104.0,111.0,107.0,104.0,104.0,104.0,106.0,106.0,104.0,107.0,107.0,104.0,109.0,124.0,120.0,115.0,115.0,113.0,111.0,113.0,113.0,118.0,115.0,116.0,115.0,115.0,115.0,115.0,113.0,115.0,113.0,99.0,96.0,104.0,109.0,107.0,107.0,111.0,111.0,111.0,113.0,113.0,118.0,116.0,115.0,111.0,109.0,109.0,107.0,109.0,115.0,111.0,111.0,113.0,115.0,111.0,107.0,107.0,109.0,111.0,115.0,115.0,111.0,109.0,113.0,116.0,115.0,115.0,120.0,116.0,120.0,115.0,111.0,113.0,111.0,113.0,109.0,107.0,111.0,106.0,107.0,113.0,111.0,115.0,111.0,107.0,107.0,111.0,113.0,109.0,106.0,107.0,109.0,109.0,109.0,107.0,106.0,107.0,109.0,111.0,107.0,107.0,111.0,113.0,107.0,109.0,115.0,109.0,111.0,107.0,107.0,111.0,109.0,111.0,111.0,111.0,109.0,111.0,113.0,115.0,111.0,116.0,111.0,106.0,111.0,107.0,109.0,106.0,106.0,107.0,104.0,104.0,109.0,109.0,107.0,106.0,106.0,107.0,111.0,109.0,113.0,111.0,107.0,111.0,111.0,109.0,109.0,111.0,115.0,113.0,111.0,115.0,115.0,113.0,111.0,116.0,115.0,115.0,113.0,113.0,113.0,113.0,113.0,115.0,116.0,116.0,116.0,113.0,113.0,109.0,109.0,115.0,109.0,100.0,96.0,89.0,107.0,104.0,104.0,109.0,106.0,111.0,109.0,104.0,107.0,109.0,107.0,107.0,104.0,107.0,109.0,109.0,109.0,115.0,113.0,109.0,113.0,109.0,107.0,106.0,106.0,109.0,106.0,104.0,106.0,106.0,107.0,107.0,106.0,109.0,111.0,109.0,111.0,111.0,107.0,111.0,109.0,111.0,109.0,106.0,102.0,106.0,104.0,102.0,102.0,102.0,104.0,109.0,109.0,106.0,107.0,109.0,113.0,115.0,107.0,107.0,109.0,102.0,104.0,106.0,106.0,107.0,106.0,111.0,111.0,107.0,106.0,104.0,107.0,106.0,104.0,109.0,111.0,111.0,113.0,107.0,104.0,106.0,107.0,109.0,113.0,109.0,111.0,116.0,116.0,115.0,107.0,107.0,113.0,109.0,106.0,102.0,104.0,109.0,107.0,107.0,106.0,104.0,102.0,107.0,106.0,104.0,102.0,104.0,104.0,102.0,104.0,111.0,113.0,113.0,107.0,109.0,109.0,109.0,104.0,106.0,106.0,109.0,115.0,113.0,113.0,111.0,111.0,111.0,106.0,109.0,106.0,106.0,102.0,102.0,102.0,102.0,100.0,102.0,100.0,100.0,99.0,97.0,99.0,100.0,100.0,99.0,100.0,99.0,102.0,104.0,102.0,99.0,99.0,102.0,102.0,100.0,97.0,97.0,97.0,97.0,100.0,99.0,111.0,111.0,109.0,107.0,104.0,115.0,111.0,111.0,113.0,115.0,113.0,115.0,109.0,109.0,111.0,109.0,107.0,107.0,104.0,106.0,116.0,115.0,111.0,111.0,106.0,106.0,111.0,107.0,111.0,111.0,109.0,106.0,106.0,104.0,102.0,104.0,104.0,106.0,104.0,104.0,102.0,100.0,104.0,102.0,100.0,99.0,99.0,100.0,99.0,100.0,100.0,100.0,99.0,100.0,97.0,99.0,97.0,102.0,100.0,100.0,100.0,99.0,99.0,97.0,99.0,97.0,99.0,96.0,97.0,96.0,97.0,96.0,100.0,104.0,100.0,104.0,102.0,106.0,106.0,104.0,104.0,102.0,99.0,113.0,115.0,109.0,107.0,111.0,111.0,113.0,109.0,109.0,109.0,115.0,124.0,124.0,115.0,118.0,116.0,115.0,113.0,122.0,120.0,116.0,122.0,118.0,118.0,120.0,109.0,113.0,115.0,111.0,113.0,113.0,115.0,116.0,113.0,115.0,118.0,115.0,113.0,113.0,109.0,107.0,113.0,109.0,107.0,107.0,107.0,109.0,106.0,107.0,113.0,118.0,122.0,122.0,118.0,118.0,122.0,120.0,118.0,113.0,115.0,115.0,111.0,120.0,60.0,116.0,115.0,115.0,115.0,113.0,113.0,113.0,115.0,111.0,113.0,109.0,113.0,111.0,109.0,99.0,100.0,96.0,99.0,102.0,109.0,102.0,104.0,111.0,107.0,107.0,104.0,107.0,109.0,107.0,102.0,104.0,107.0,109.0,107.0,106.0,107.0,107.0,107.0,107.0,106.0,111.0,106.0,104.0,107.0,111.0,111.0,107.0,113.0,109.0,111.0,109.0,104.0,106.0,107.0,107.0,109.0,111.0,113.0,109.0,107.0,107.0,109.0,111.0,113.0,111.0,107.0,109.0,109.0,106.0,113.0,109.0,111.0,109.0,106.0,109.0,111.0,107.0,106.0,107.0,111.0,113.0,111.0,109.0,107.0,109.0,109.0,109.0,115.0,115.0,109.0,116.0,113.0,109.0,111.0,116.0,120.0,113.0,111.0,113.0,113.0,111.0,113.0,111.0,109.0,107.0,115.0,115.0,111.0,113.0,107.0,107.0,109.0,109.0,111.0,111.0,111.0,111.0,111.0,113.0,111.0,113.0,115.0,111.0,115.0,111.0,111.0,111.0,111.0,109.0,113.0,115.0,111.0,109.0,106.0,109.0,106.0,109.0,106.0,111.0,111.0,113.0,111.0,111.0,113.0,111.0,111.0,109.0,111.0,109.0,107.0,107.0,107.0,111.0,109.0,113.0,115.0,111.0,109.0,109.0,109.0,116.0,116.0,115.0,115.0,113.0,109.0,106.0,107.0,107.0,107.0,106.0,104.0,104.0,107.0,107.0,106.0,104.0,102.0,102.0,104.0,102.0,102.0,106.0,106.0,104.0,102.0,100.0,111.0,109.0,115.0,128.0,128.0,120.0,120.0,120.0,115.0,116.0,115.0,115.0,118.0,120.0,120.0,124.0,115.0,118.0,113.0,111.0,115.0,113.0,113.0,113.0,109.0,107.0,113.0,111.0,113.0,109.0,111.0,107.0,106.0,107.0,111.0,111.0,109.0,111.0,111.0,109.0,106.0,106.0,104.0,104.0,106.0,107.0,111.0,109.0,106.0,106.0,109.0,107.0,106.0,111.0,115.0,111.0,109.0,113.0,115.0,115.0,109.0,109.0,111.0,111.0,109.0,120.0,115.0,113.0,115.0,116.0,111.0,109.0,113.0,116.0,118.0,106.0,99.0,89.0,97.0,99.0,100.0,107.0,104.0],"label":"Output"}]},"options":{}}
Closes I can come for you is this:
let data = [59.0, 57.0, 57.0, 58.0, 57.0, 56.0, 57.0, 55.0, 62.0, 63.0, 62.0, 62.0, 69.0, 63.0, 62.0, 61.0, 62.0, 62.0, 66.0, 69.0, 72.0, 72.0, 75.0, 82.0, 84.0, 85.0, 84.0, 81.0, 91.0, 90.0, 87.0, 87.0, 89.0, 90.0, 90.0, 86.0, 86.0, 86.0, 86.0, 83.0, 83.0, 82.0, 81.0, 85.0, 89.0, 85.0, 83.0, 87.0, 81.0, 81.0, 81.0, 91.0, 90.0, 81.0, 87.0, 83.0, 98.0, 90.0, 81.0, 88.0, 88.0, 88.0, 88.0, 90.0, 90.0, 90.0, 92.0, 90.0, 91.0, 90.0, 88.0, 81.0, 83.0, 91.0, 88.0, 87.0, 87.0, 87.0, 87.0, 87.0, 87.0, 87.0, 88.0, 90.0, 87.0, 88.0, 91.0, 88.0, 86.0, 86.0, 87.0, 86.0, 91.0, 90.0, 91.0, 92.0, 91.0, 91.0, 88.0, 87.0, 88.0, 95.0, 94.0, 92.0, 92.0, 91.0, 88.0, 88.0, 90.0, 88.0, 90.0, 87.0, 87.0, 88.0, 88.0, 91.0, 88.0, 91.0, 94.0, 90.0, 90.0, 88.0, 88.0, 87.0, 88.0, 87.0, 88.0, 86.0, 86.0, 87.0, 87.0, 88.0, 90.0, 88.0, 79.0, 74.0, 83.0, 85.0, 83.0, 85.0, 85.0, 85.0, 85.0, 85.0, 83.0, 90.0, 85.0, 85.0, 85.0, 85.0, 85.0, 86.0, 87.0, 87.0, 91.0, 90.0, 90.0, 90.0, 90.0, 90.0, 86.0, 85.0, 85.0, 86.0, 86.0, 86.0, 86.0, 85.0, 85.0, 86.0, 86.0, 85.0, 85.0, 83.0, 85.0, 87.0, 85.0, 86.0, 88.0, 88.0, 88.0, 86.0, 91.0, 92.0, 88.0, 85.0, 87.0, 86.0, 86.0, 85.0, 86.0, 86.0, 87.0, 87.0, 88.0, 87.0, 92.0, 88.0, 83.0, 85.0, 87.0, 87.0, 90.0, 85.0, 87.0, 87.0, 86.0, 85.0, 85.0, 87.0, 87.0, 88.0, 90.0, 91.0, 86.0, 87.0, 87.0, 86.0, 90.0, 87.0, 90.0, 90.0, 94.0, 92.0, 91.0, 87.0, 87.0, 88.0, 90.0, 91.0, 92.0, 90.0, 86.0, 88.0, 87.0, 87.0, 88.0, 87.0, 88.0, 88.0, 87.0, 88.0, 87.0, 87.0, 87.0, 88.0, 88.0, 91.0, 90.0, 90.0, 91.0, 91.0, 87.0, 90.0, 92.0, 87.0, 86.0, 88.0, 88.0, 88.0, 88.0, 92.0, 92.0, 81.0, 78.0, 79.0, 83.0, 86.0, 87.0, 88.0, 87.0, 87.0, 85.0, 85.0, 87.0, 87.0, 87.0, 87.0, 86.0, 86.0, 85.0, 86.0, 86.0, 85.0, 85.0, 87.0, 86.0, 88.0, 90.0, 91.0, 90.0, 95.0, 97.0, 98.0, 95.0, 97.0, 97.0, 97.0, 97.0, 98.0, 95.0, 95.0, 108.0, 95.0, 95.0, 95.0, 91.0, 78.0, 83.0, 82.0, 92.0, 89.0, 88.0, 85.0, 86.0, 94.0, 94.0, 97.0, 99.0, 99.0, 97.0, 95.0, 91.0, 92.0, 94.0, 95.0, 92.0, 94.0, 94.0, 95.0, 92.0, 94.0, 94.0, 95.0, 95.0, 92.0, 94.0, 97.0, 95.0, 95.0, 94.0, 102.0, 104.0, 99.0, 98.0, 95.0, 94.0, 91.0, 94.0, 94.0, 91.0, 92.0, 91.0, 92.0, 97.0, 94.0, 92.0, 91.0, 97.0, 95.0, 109.0, 112.0, 112.0, 112.0, 110.0, 112.0, 112.0, 109.0, 110.0, 112.0, 109.0, 105.0, 104.0, 102.0, 100.0, 105.0, 102.0, 102.0, 105.0, 107.0, 105.0, 105.0, 104.0, 104.0, 105.0, 107.0, 102.0, 104.0, 104.0, 102.0, 105.0, 105.0, 104.0, 104.0, 107.0, 104.0, 102.0, 105.0, 105.0, 105.0, 105.0, 105.0, 105.0, 107.0, 105.0, 102.0, 104.0, 104.0, 104.0, 105.0, 107.0, 105.0, 109.0, 109.0, 109.0, 109.0, 105.0, 107.0, 107.0, 107.0, 105.0, 105.0, 110.0, 112.0, 107.0, 107.0, 105.0, 105.0, 109.0, 107.0, 107.0, 107.0, 109.0, 105.0, 109.0, 110.0, 109.0, 110.0, 107.0, 112.0, 117.0, 110.0, 109.0, 116.0, 114.0, 112.0, 112.0, 110.0, 110.0, 109.0, 104.0, 112.0, 116.0, 114.0, 116.0, 112.0, 112.0, 112.0, 112.0, 112.0, 110.0, 109.0, 105.0, 112.0, 114.0, 110.0, 110.0, 114.0, 116.0, 112.0, 107.0, 112.0, 107.0, 110.0, 109.0, 110.0, 107.0, 109.0, 110.0, 114.0, 110.0, 110.0, 114.0, 112.0, 112.0, 116.0, 117.0, 117.0, 117.0, 114.0, 114.0, 109.0, 109.0, 110.0, 107.0, 109.0, 110.0, 109.0, 109.0, 107.0, 112.0, 112.0, 112.0, 112.0, 114.0, 110.0, 107.0, 109.0, 110.0, 109.0, 110.0, 114.0, 112.0, 109.0, 114.0, 110.0, 112.0, 114.0, 116.0, 110.0, 112.0, 112.0, 119.0, 121.0, 119.0, 117.0, 114.0, 110.0, 114.0, 107.0, 107.0, 107.0, 109.0, 105.0, 104.0, 105.0, 105.0, 104.0, 104.0, 102.0, 104.0, 105.0, 102.0, 105.0, 102.0, 107.0, 104.0, 109.0, 109.0, 109.0, 109.0, 109.0, 109.0, 107.0, 107.0, 109.0, 109.0, 112.0, 110.0, 110.0, 110.0, 112.0, 109.0, 110.0, 107.0, 107.0, 112.0, 110.0, 109.0, 109.0, 109.0, 114.0, 112.0, 109.0, 107.0, 112.0, 109.0, 110.0, 107.0, 110.0, 112.0, 112.0, 109.0, 105.0, 105.0, 105.0, 109.0, 107.0, 110.0, 109.0, 109.0, 107.0, 107.0, 107.0, 112.0, 114.0, 109.0, 109.0, 107.0, 107.0, 105.0, 107.0, 107.0, 105.0, 105.0, 104.0, 107.0, 116.0, 114.0, 112.0, 112.0, 112.0, 110.0, 110.0, 107.0, 95.0, 94.0, 80.0, 83.0, 85.0, 92.0, 98.0, 100.0, 98.0, 98.0, 97.0, 100.0, 104.0, 107.0, 105.0, 102.0, 100.0, 100.0, 100.0, 102.0, 102.0, 100.0, 104.0, 107.0, 105.0, 107.0, 104.0, 102.0, 104.0, 102.0, 102.0, 102.0, 104.0, 117.0, 98.0, 102.0, 104.0, 104.0, 102.0, 100.0, 100.0, 104.0, 107.0, 107.0, 104.0, 104.0, 104.0, 104.0, 102.0, 104.0, 104.0, 104.0, 107.0, 110.0, 112.0, 112.0, 109.0, 105.0, 119.0, 104.0, 91.0, 88.0, 95.0, 105.0, 104.0, 104.0, 104.0, 102.0, 109.0, 105.0, 100.0, 102.0, 104.0, 104.0, 105.0, 104.0, 105.0, 102.0, 104.0, 104.0, 102.0, 102.0, 100.0, 104.0, 104.0, 109.0, 105.0, 104.0, 114.0, 116.0, 112.0, 110.0, 110.0, 112.0, 107.0, 112.0, 109.0, 107.0, 107.0, 107.0, 107.0, 105.0, 104.0, 104.0, 102.0, 102.0, 107.0, 105.0, 105.0, 107.0, 102.0, 105.0, 107.0, 109.0, 112.0, 109.0, 107.0, 104.0, 105.0, 105.0, 107.0, 105.0, 107.0, 105.0, 105.0, 109.0, 107.0, 107.0, 107.0, 105.0, 105.0, 110.0, 110.0, 109.0, 105.0, 105.0, 104.0, 107.0, 104.0, 104.0, 104.0, 102.0, 104.0, 104.0, 107.0, 105.0, 102.0, 102.0, 104.0, 105.0, 102.0, 107.0, 105.0, 107.0, 104.0, 107.0, 105.0, 102.0, 104.0, 102.0, 105.0, 105.0, 107.0, 107.0, 109.0, 107.0, 109.0, 107.0, 109.0, 109.0, 109.0, 110.0, 109.0, 107.0, 105.0, 105.0, 107.0, 110.0, 107.0, 109.0, 105.0, 109.0, 107.0, 109.0, 109.0, 110.0, 109.0, 104.0, 104.0, 110.0, 112.0, 112.0, 114.0, 117.0, 112.0, 114.0, 112.0, 112.0, 110.0, 121.0, 117.0, 117.0, 112.0, 114.0, 116.0, 110.0, 109.0, 112.0, 110.0, 110.0, 107.0, 105.0, 105.0, 105.0, 105.0, 100.0, 107.0, 105.0, 105.0, 105.0, 109.0, 105.0, 107.0, 102.0, 102.0, 107.0, 104.0, 105.0, 104.0, 100.0, 102.0, 102.0, 102.0, 107.0, 107.0, 105.0, 102.0, 98.0, 102.0, 105.0, 105.0, 107.0, 109.0, 107.0, 100.0, 100.0, 98.0, 100.0, 100.0, 102.0, 102.0, 102.0, 102.0, 104.0, 107.0, 104.0, 107.0, 105.0, 102.0, 105.0, 107.0, 112.0, 107.0, 107.0, 107.0, 105.0, 105.0, 105.0, 109.0, 109.0, 107.0, 109.0, 110.0, 109.0, 107.0, 107.0, 102.0, 102.0, 107.0, 112.0, 112.0, 112.0, 112.0, 109.0, 105.0, 109.0, 109.0, 109.0, 116.0, 110.0, 107.0, 107.0, 116.0, 110.0, 104.0, 107.0, 107.0, 110.0, 116.0, 116.0, 119.0, 112.0, 112.0, 109.0, 109.0, 107.0, 110.0, 114.0, 112.0, 110.0, 116.0, 109.0, 110.0, 110.0, 116.0, 110.0, 109.0, 110.0, 107.0, 107.0, 105.0, 107.0, 114.0, 109.0, 109.0, 105.0, 105.0, 102.0, 109.0, 109.0, 105.0, 107.0, 105.0, 104.0, 105.0, 109.0, 107.0, 105.0, 112.0, 114.0, 112.0, 114.0, 116.0, 118.0, 115.0, 115.0, 115.0, 116.0, 122.0, 118.0, 116.0, 115.0, 113.0, 113.0, 113.0, 116.0, 118.0, 118.0, 120.0, 118.0, 115.0, 109.0, 111.0, 116.0, 113.0, 111.0, 113.0, 120.0, 118.0, 115.0, 115.0, 113.0, 115.0, 111.0, 111.0, 107.0, 107.0, 106.0, 107.0, 106.0, 107.0, 111.0, 116.0, 115.0, 109.0, 111.0, 111.0, 109.0, 109.0, 113.0, 111.0, 113.0, 111.0, 109.0, 107.0, 107.0, 109.0, 107.0, 109.0, 109.0, 107.0, 107.0, 109.0, 107.0, 106.0, 106.0, 106.0, 107.0, 106.0, 104.0, 104.0, 111.0, 107.0, 104.0, 104.0, 104.0, 106.0, 106.0, 104.0, 107.0, 107.0, 104.0, 109.0, 124.0, 120.0, 115.0, 115.0, 113.0, 111.0, 113.0, 113.0, 118.0, 115.0, 116.0, 115.0, 115.0, 115.0, 115.0, 113.0, 115.0, 113.0, 99.0, 96.0, 104.0, 109.0, 107.0, 107.0, 111.0, 111.0, 111.0, 113.0, 113.0, 118.0, 116.0, 115.0, 111.0, 109.0, 109.0, 107.0, 109.0, 115.0, 111.0, 111.0, 113.0, 115.0, 111.0, 107.0, 107.0, 109.0, 111.0, 115.0, 115.0, 111.0, 109.0, 113.0, 116.0, 115.0, 115.0, 120.0, 116.0, 120.0, 115.0, 111.0, 113.0, 111.0, 113.0, 109.0, 107.0, 111.0, 106.0, 107.0, 113.0, 111.0, 115.0, 111.0, 107.0, 107.0, 111.0, 113.0, 109.0, 106.0, 107.0, 109.0, 109.0, 109.0, 107.0, 106.0, 107.0, 109.0, 111.0, 107.0, 107.0, 111.0, 113.0, 107.0, 109.0, 115.0, 109.0, 111.0, 107.0, 107.0, 111.0, 109.0, 111.0, 111.0, 111.0, 109.0, 111.0, 113.0, 115.0, 111.0, 116.0, 111.0, 106.0, 111.0, 107.0, 109.0, 106.0, 106.0, 107.0, 104.0, 104.0, 109.0, 109.0, 107.0, 106.0, 106.0, 107.0, 111.0, 109.0, 113.0, 111.0, 107.0, 111.0, 111.0, 109.0, 109.0, 111.0, 115.0, 113.0, 111.0, 115.0, 115.0, 113.0, 111.0, 116.0, 115.0, 115.0, 113.0, 113.0, 113.0, 113.0, 113.0, 115.0, 116.0, 116.0, 116.0, 113.0, 113.0, 109.0, 109.0, 115.0, 109.0, 100.0, 96.0, 89.0, 107.0, 104.0, 104.0, 109.0, 106.0, 111.0, 109.0, 104.0, 107.0, 109.0, 107.0, 107.0, 104.0, 107.0, 109.0, 109.0, 109.0, 115.0, 113.0, 109.0, 113.0, 109.0, 107.0, 106.0, 106.0, 109.0, 106.0, 104.0, 106.0, 106.0, 107.0, 107.0, 106.0, 109.0, 111.0, 109.0, 111.0, 111.0, 107.0, 111.0, 109.0, 111.0, 109.0, 106.0, 102.0, 106.0, 104.0, 102.0, 102.0, 102.0, 104.0, 109.0, 109.0, 106.0, 107.0, 109.0, 113.0, 115.0, 107.0, 107.0, 109.0, 102.0, 104.0, 106.0, 106.0, 107.0, 106.0, 111.0, 111.0, 107.0, 106.0, 104.0, 107.0, 106.0, 104.0, 109.0, 111.0, 111.0, 113.0, 107.0, 104.0, 106.0, 107.0, 109.0, 113.0, 109.0, 111.0, 116.0, 116.0, 115.0, 107.0, 107.0, 113.0, 109.0, 106.0, 102.0, 104.0, 109.0, 107.0, 107.0, 106.0, 104.0, 102.0, 107.0, 106.0, 104.0, 102.0, 104.0, 104.0, 102.0, 104.0, 111.0, 113.0, 113.0, 107.0, 109.0, 109.0, 109.0, 104.0, 106.0, 106.0, 109.0, 115.0, 113.0, 113.0, 111.0, 111.0, 111.0, 106.0, 109.0, 106.0, 106.0, 102.0, 102.0, 102.0, 102.0, 100.0, 102.0, 100.0, 100.0, 99.0, 97.0, 99.0, 100.0, 100.0, 99.0, 100.0, 99.0, 102.0, 104.0, 102.0, 99.0, 99.0, 102.0, 102.0, 100.0, 97.0, 97.0, 97.0, 97.0, 100.0, 99.0, 111.0, 111.0, 109.0, 107.0, 104.0, 115.0, 111.0, 111.0, 113.0, 115.0, 113.0, 115.0, 109.0, 109.0, 111.0, 109.0, 107.0, 107.0, 104.0, 106.0, 116.0, 115.0, 111.0, 111.0, 106.0, 106.0, 111.0, 107.0, 111.0, 111.0, 109.0, 106.0, 106.0, 104.0, 102.0, 104.0, 104.0, 106.0, 104.0, 104.0, 102.0, 100.0, 104.0, 102.0, 100.0, 99.0, 99.0, 100.0, 99.0, 100.0, 100.0, 100.0, 99.0, 100.0, 97.0, 99.0, 97.0, 102.0, 100.0, 100.0, 100.0, 99.0, 99.0, 97.0, 99.0, 97.0, 99.0, 96.0, 97.0, 96.0, 97.0, 96.0, 100.0, 104.0, 100.0, 104.0, 102.0, 106.0, 106.0, 104.0, 104.0, 102.0, 99.0, 113.0, 115.0, 109.0, 107.0, 111.0, 111.0, 113.0, 109.0, 109.0, 109.0, 115.0, 124.0, 124.0, 115.0, 118.0, 116.0, 115.0, 113.0, 122.0, 120.0, 116.0, 122.0, 118.0, 118.0, 120.0, 109.0, 113.0, 115.0, 111.0, 113.0, 113.0, 115.0, 116.0, 113.0, 115.0, 118.0, 115.0, 113.0, 113.0, 109.0, 107.0, 113.0, 109.0, 107.0, 107.0, 107.0, 109.0, 106.0, 107.0, 113.0, 118.0, 122.0, 122.0, 118.0, 118.0, 122.0, 120.0, 118.0, 113.0, 115.0, 115.0, 111.0, 120.0, 60.0, 116.0, 115.0, 115.0, 115.0, 113.0, 113.0, 113.0, 115.0, 111.0, 113.0, 109.0, 113.0, 111.0, 109.0, 99.0, 100.0, 96.0, 99.0, 102.0, 109.0, 102.0, 104.0, 111.0, 107.0, 107.0, 104.0, 107.0, 109.0, 107.0, 102.0, 104.0, 107.0, 109.0, 107.0, 106.0, 107.0, 107.0, 107.0, 107.0, 106.0, 111.0, 106.0, 104.0, 107.0, 111.0, 111.0, 107.0, 113.0, 109.0, 111.0, 109.0, 104.0, 106.0, 107.0, 107.0, 109.0, 111.0, 113.0, 109.0, 107.0, 107.0, 109.0, 111.0, 113.0, 111.0, 107.0, 109.0, 109.0, 106.0, 113.0, 109.0, 111.0, 109.0, 106.0, 109.0, 111.0, 107.0, 106.0, 107.0, 111.0, 113.0, 111.0, 109.0, 107.0, 109.0, 109.0, 109.0, 115.0, 115.0, 109.0, 116.0, 113.0, 109.0, 111.0, 116.0, 120.0, 113.0, 111.0, 113.0, 113.0, 111.0, 113.0, 111.0, 109.0, 107.0, 115.0, 115.0, 111.0, 113.0, 107.0, 107.0, 109.0, 109.0, 111.0, 111.0, 111.0, 111.0, 111.0, 113.0, 111.0, 113.0, 115.0, 111.0, 115.0, 111.0, 111.0, 111.0, 111.0, 109.0, 113.0, 115.0, 111.0, 109.0, 106.0, 109.0, 106.0, 109.0, 106.0, 111.0, 111.0, 113.0, 111.0, 111.0, 113.0, 111.0, 111.0, 109.0, 111.0, 109.0, 107.0, 107.0, 107.0, 111.0, 109.0, 113.0, 115.0, 111.0, 109.0, 109.0, 109.0, 116.0, 116.0, 115.0, 115.0, 113.0, 109.0, 106.0, 107.0, 107.0, 107.0, 106.0, 104.0, 104.0, 107.0, 107.0, 106.0, 104.0, 102.0, 102.0, 104.0, 102.0, 102.0, 106.0, 106.0, 104.0, 102.0, 100.0, 111.0, 109.0, 115.0, 128.0, 128.0, 120.0, 120.0, 120.0, 115.0, 116.0, 115.0, 115.0, 118.0, 120.0, 120.0, 124.0, 115.0, 118.0, 113.0, 111.0, 115.0, 113.0, 113.0, 113.0, 109.0, 107.0, 113.0, 111.0, 113.0, 109.0, 111.0, 107.0, 106.0, 107.0, 111.0, 111.0, 109.0, 111.0, 111.0, 109.0, 106.0, 106.0, 104.0, 104.0, 106.0, 107.0, 111.0, 109.0, 106.0, 106.0, 109.0, 107.0, 106.0, 111.0, 115.0, 111.0, 109.0, 113.0, 115.0, 115.0, 109.0, 109.0, 111.0, 111.0, 109.0, 120.0, 115.0, 113.0, 115.0, 116.0, 111.0, 109.0, 113.0, 116.0, 118.0, 106.0, 99.0, 89.0, 97.0, 99.0, 100.0, 107.0, 104.0]
let labels = data.map((el, i) => (Math.round(30 / data.length * i).toString()))
const options = {
type: "line",
data: {
labels,
datasets: [{
data,
label: "Output",
fill: false,
pointRadius: 0,
borderColor: 'orange',
backgroundColor: 'orange'
}]
},
options: {
tooltips: {
intersect: false
},
scales: {
yAxes: [{
gridLines: {
display: false
}
}],
xAxes: [{
ticks: {
callback: (label, index) => (label % 5 === 0 ? label : '')
},
gridLines: {
display: false
},
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
background-color: #eee;
}
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
Might want to filter out the duplicates for the labels array and replace them with something not devidebly by 5 to make it a bit better
Related
I have a stacked bar chart in Chart.js 2.9.4.
On hovering, the tooltip's tip is positioned at the top-center of each bar, but the tooltip itself is rendered to the right and blocks the view of other bars.
I'd like to draw the tooltip above the bar. Is there a way to do this?
See the JSFiddle here.
(Here's the raw code as required by StackOverflow)
// Get the past 14 days for the x-axis
var allDates = [
moment('2021-04-04T00:00:00'),
moment('2021-04-05T00:00:00'),
moment('2021-04-06T00:00:00'),
moment('2021-04-07T00:00:00'),
moment('2021-04-08T00:00:00'),
moment('2021-04-09T00:00:00'),
moment('2021-04-10T00:00:00'),
moment('2021-04-11T00:00:00'),
moment('2021-04-12T00:00:00'),
moment('2021-04-13T00:00:00'),
moment('2021-04-14T00:00:00'),
moment('2021-04-15T00:00:00'),
moment('2021-04-16T00:00:00'),
moment('2021-04-17T00:00:00'),
moment('2021-04-18T00:00:00'),
];
// Simulated distribution per day
var distributionPerDay = [
[0.13, 0.05, 0.12, 0.07, 0.11, 0.14, 0.22, 0.06, 0. , 0.1 ],
[0.1 , 0.08, 0.1 , 0.09, 0.13, 0.12, 0.18, 0.11, 0.03, 0.06],
[0.08, 0.1 , 0.1 , 0.09, 0.15, 0.1 , 0.2 , 0.09, 0.03, 0.06],
[0.09, 0.09, 0.12, 0.07, 0.13, 0.12, 0.15, 0.14, 0.01, 0.08],
[0.05, 0.05, 0.16, 0.13, 0.1 , 0.1 , 0.1 , 0.1 , 0.11, 0.1 ],
[0.05, 0.05, 0.16, 0.13, 0.1 , 0.13, 0.1 , 0.12, 0.07, 0.09],
[0.08, 0.05, 0.15, 0.1 , 0.13, 0.1 , 0.12, 0.13, 0.08, 0.06],
[0.1 , 0.08, 0.13, 0.07, 0.1 , 0.13, 0.15, 0.1 , 0.05, 0.09],
[0.08, 0.1 , 0.12, 0.08, 0.13, 0.1 , 0.13, 0.07, 0.07, 0.12],
[0.12, 0.08, 0.1 , 0.04, 0.1 , 0.14, 0.11, 0.12, 0.09, 0.1 ],
[0.08, 0.06, 0.16, 0.07, 0.07, 0.19, 0.07, 0.14, 0.11, 0.05],
[0.08, 0.1 , 0.1 , 0.09, 0.1 , 0.16, 0.12, 0.12, 0.06, 0.07],
[0.12, 0.09, 0.14, 0.04, 0.16, 0.08, 0.12, 0.1 , 0.12, 0.03],
[0.09, 0.16, 0.1 , 0.07, 0.13, 0.1 , 0.1 , 0.11, 0.08, 0.06],
[0.13, 0.12, 0.13, 0.04, 0.15, 0.11, 0.06, 0.12, 0.06, 0.08]
]
// Define colors for each bar (10 bars)
var colors = ['#9e0142', '#d53e4f', '#f46d43', '#fdae61', '#fee08b', '#e6f598', '#abdda4', '#66c2a5', '#3288bd', '#5e4fa2']; // cb-Spectral
// Convert distribution into Chart.js datasets
var classNames = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var datasets = [];
classNames.forEach(function(className, i) {
// Gather the data {x: date, y: percentage} for this class
var data = [];
distributionPerDay.forEach(function(dist, j) {
data.push({x: allDates[j], y: dist[i]});
});
// Add data and config to the datasets array
datasets.push({
label: className,
data: data,
backgroundColor: colors[i],
borderWidth: 0,
borderColor: 'black',
hoverBorderWidth: 1, // Show a 1px black border on hover
borderSkipped: false, // Draw all four borders around the bar
minBarLength: 1 // So even a bar for 0 has 1px height
});
});
var myChart = new Chart('my-chart', {
type: 'bar',
data: { datasets: datasets },
options: {
hover: {
mode: 'dataset', // Highlight an entire row on hover
animationDuration: 0 // Otherwise there is flickering when sliding over the bars quickly
},
tooltips: {
mode: 'nearest', // Only show tooltip data of one bar on hover
},
scales: {
xAxes: [{
stacked: true,
type: 'time',
time: {
unit: 'day',
},
offset: true, // Otherwise the left and right bars are cut off
ticks: { source: 'data' } // Use one tick per point in allDates
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
max: 1.0
}
}]
}
}
});
You can set yAlign: 'bottom' in tooltip options, see the JSFiddle here
Relevant part of the code:
var myChart = new Chart('my-chart', {
type: 'bar',
data: { datasets: datasets },
options: {
hover: {
mode: 'dataset',
animationDuration: 0
},
tooltips: {
mode: 'nearest',
yAlign: 'bottom' //use this to control the placement of the tooltip relative to its point
},
scales: {
xAxes: [{
stacked: true,
type: 'time',
time: {
unit: 'day',
},
offset: true,
ticks: { source: 'data' }
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
max: 1.0
}
}]
}
}
});
It isn't mentioned in the official documentation, but works for Chart.js 2.9.4
(you can have a look at the source code where that option is used to override the automatic alignment calculation based on tooltip and chart size)
I am trying to implement testing for my quasar project with jest.
But I have some issues to not import modules.
When I run testing project, It can not import modules.
How to fix it?
I am beginner so please share about this correctly and deeply.
I am very thanks to help me to fix it.
These my errors.
E:\workplace\unittesting\webboid\node_modules\#babel\runtime-corejs2\helpers\esm\asyncToGenerator.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _Promise from "../../core-js/promise";
^^^^^^^^
SyntaxError: Unexpected identifier
17 | q-icon.on-right(name="show_chart")
18 | q-btn( v-if="local" flat style="margin-right:10px;" #click="ipcRenderer.send('openURL','https://app.boid.com')")
> 19 | q-icon(name="home")
| ^
20 | q-btn( v-else flat style="margin-right:10px;" #click="$router.push('/')")
21 | q-icon(name="home")
22 | q-btn.text-black(#click='' flat v-if="authenticated", color='light')
at ScriptTransformer._transformAndBuildScript (node_modules/#jest/transform/build/ScriptTransformer.js:471:17)
at ScriptTransformer.transform (node_modules/#jest/transform/build/ScriptTransformer.js:513:25)
at src/App.vue:19:49
at Object.<anonymous> (src/App.vue:535:3)
My jest.config.js File is following.
module.exports = {
globals: {
__DEV__: true,
},
verbose: false, // false since we want to see console.logs inside tests
bail: false,
testURL: 'http://localhost/',
testEnvironment: 'jsdom',
testRegex: './src/__unit__/.*.js$',
rootDir: '.',
testPathIgnorePatterns: [
'<rootDir>/components/coverage/',
'<rootDir>/test/cypress/',
'<rootDir>/test/coverage/',
'<rootDir>/dist/',
'<rootDir>/node_modules/',
],
moduleFileExtensions: ['js', 'json', 'vue'],
moduleNameMapper: {
'^vue$': 'vue/dist/vue.common.js',
'quasar': 'quasar-framework/dist/umd/quasar.mat.umd.js',
},
resolver: null,
transformIgnorePatterns: [
'node_modules/core-js',
'node_modules/babel-runtime',
'node_modules/vue',
],
transform: {
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
}
}
My package.json is following.
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"autoprefixer": "^6.4.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^24.8.0",
"babel-loader": "^8.0.0",
"babel-plugin-add-module-exports": "^1.0.0",
"colors": "^1.1.2",
"connect-history-api-fallback": "^1.1.0",
"css-loader": "^0.28.7",
"es6-promise": "^4.1.1",
"eslint": "^4.8.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"glob": "^7.1.2",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.0",
"jest": "^24.8.0",
"json-loader": "^0.5.7",
"opn": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"postcss-loader": "^1.0.0",
"progress-bar-webpack-plugin": "^1.10.0",
"purify-css": "^1.2.6",
"shelljs": "^0.7.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"url-loader": "^0.5.7",
"vue-jest": "^3.0.4",
"vue-loader": "^13.0.5",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.0",
"webpack": "^3.10.0",
"webpack-bundle-analyzer": "^3.1.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-merge": "^4.1.0"
I have implemented Charts JS library in one of my web apps and am having an issue. Right now i need to add multiple y values to one single x-axis point. however did not come to solution.
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
var config = {
type: 'line',
data: {
labels: [['01', '11' ,'2018'],
['01', '11' ,'2018'],
['01', '11' ,'2018'],
['01','11','2018'], '02','02','02','02','02','05','05','05','05','06','06','06','06','07','07','07','07','07','07','07','07','08','08','08','08','08','08','08','08','09','09','09','09',['20','02','2019'],['20','02','2019'],'21','21','21','21',['06','03'],['06','03'] ,'','','','' ,
],
datasets: [{
label: "My First dataset",
data: [35.48 ,35.50 ,35.5 ,35.49 ,35.49 ,35.50 ,35.50 ,35.49 ,35.45 ,35.38 ,35.42 ,35.4 ,35.49 ,35.50 ,35.49 ,35.49 ,35.49 ,35.49 ,35.50 ,35.50 ,35.48 ,35.47 ,35.48 ,35.47 ,35.49 ,35.50 ,35.50 ,35.49 ,35.48 ,35.47 ,35.48 ,35.47 ,35.50 ,35.49 ,35.49 ,35.50 ,37 ,37 ,38 ,39 ,40 ,51 ,28 ,29 ],
}]
},
options: {
scales: {
xAxes:[{
ticks: {
autoSkip: false,
}
}],
},
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<canvas id="myChart"></canvas>
You can add multiple datasets which will plot a separate line on the graph.
Here is your example.
function newDate() {
return moment().add(days, 'd');
}
var config = {
type: 'line',
data: {
labels: [
["01", "11", "2018"],
['01', '11', '2018'],
['01', '11', '2018'],
['01', '11', '2018'], , '02', '02', '02', '02', '05', '05', '05', '05', '06', '06', '06', '06', '07', '07', '07', '07', '07', '07', '07', '07', '08', '08', '08', '08', '08', '08', '08', '08', '09', '09', '09', '09', ['20', '02', '2019'],
['20', '02', '2019'], '21', '21', '21', '21', ['06', '03'],
['06', '03'], '', '', '', '', '', '', '', '', '', '', '', '', '', ''
],
datasets: [{
label: "My First dataset",
data: [35.48, 35.50, 35.5, 35.49, 35.49, 35.50, 35.50, 35.49, 35.45, 35.38, 35.42, 35.4, 35.49, 35.50, 35.49, 35.49, 35.49, 35.49, 35.50, 35.50, 35.48, 35.47, 35.48, 35.47, 35.49, 35.50, 35.50, 35.49, 35.48, 35.47, 35.48, 35.47, 35.50, 35.49, 35.49, 35.50, 37, 37, 38, 39, 40, 51, 28, 29],
},
{
label: "My second dataset",
data: [35.48, 35.50, 35.5, 35.49, 35.49, 35.50, 35.50, 35.49, 35.45, 35.38, 35.42, 35.4, 35.49, 35.50, 35.49, 35.49, 35.49, 35.49, 35.50, 35.50, 35.48, 35.47, 35.48, 35.47, 35.49, 35.50, 35.50, 35.49, 35.48, 35.47, 35.48, 35.47, 35.50, 35.49, 35.49, 35.50, 37, 37, 38, 39, 40, 51, 28, 29].map(a => a + 20),
}
]
},
options: {
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}],
},
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<canvas id="myChart"></canvas>
I am working on google chart API. I have a column chart where i want to show a small line near every label shown near h-axis as shown in the sample image below.
What modifications need to be done to show the small line near each label shown on h-axis.
Demo : https://jsfiddle.net/8tvm9qk5/
js code:
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Departamentos');
data.addColumn('number', 'Entregados');
data.addColumn('number', 'En Stock');
data.addRows([
['abdasdasa', 925, 786],
['bbdasdas', 652, 156],
['cbdasdas', 300, 200],
['ddasdasb', 925, 786],
['edasdb', 652, 156],
['fasdasb', 300, 200],
['gdasdasdb', 925, 786],
['abdasdasa', 925, 786],
['bbdasdas', 652, 156],
['cbdasdas', 300, 200],
['ddasdasb', 925, 786],
['edasdb', 652, 156],
['fasdasb', 300, 200],
['gdasdasdb', 925, 786]
]);
var options = {
title: 'Motivation and Energy Level Throughout the Day',
isStacked: true,
height:600,
chartArea: {
height:300,
top:100,
},
hAxis: {
title: 'Departamentos',
titleTextStyle: {
color: '#FF0000',
},
slantedText:true,
slantedTextAngle:45,
},
vAxis: {
title: 'Kits'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
--EDITED--
I tried as shown below, but could not get the expected result.
sample code:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Departamentos');
data.addColumn('number', 'Entregados');
data.addColumn('number', 'En Stock');
data.addColumn('number', 'dumy');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
['abdasdasa', 925, 786,0, ''],
['bbdasdas', 652, 156,0, ''],
['cbdasdas', 300, 200,0, ''],
.....]);
PS: I tried by interchanging the column sequence too:
...
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number', 'dumy');
Demo:https://jsfiddle.net/1xq2nj16/
the dummy series needs to be first when --> isStacked: true
or change the series to a different type to break from the stack...
(see series option in following snippet)
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Departamentos');
data.addColumn('number', 'dumy');
data.addColumn({type:'string', role:'annotation'}); // interval role col.
data.addColumn('number', 'Entregados');
data.addColumn('number', 'En Stock');
data.addRows([
['abdasdasa', 0, '', 925, 786],
['bbdasdas', 0, '', 652, 156],
['cbdasdas', 0, '', 300, 200],
['ddasdasb', 0, '', 925, 786],
['edasdb', 0, '', 652, 156],
['fasdasb', 0, '', 300, 200],
['gdasdasdb', 0, '', 925, 786],
['abdasdasa', 0, '', 925, 786],
['bbdasdas', 0, '', 652, 156],
['cbdasdas', 0, '', 300, 200],
['ddasdasb', 0, '', 925, 786],
['edasdb', 0, '', 652, 156],
['fasdasb', 0, '', 300, 200],
['gdasdasdb', 0, '', 925, 786]
]);
var options = {
annotations: {
stem: {
color: '#000000'
},
style: 'line',
textStyle: {
fontSize: 10
},
},
title: 'Motivation and Energy Level Throughout the Day',
isStacked: true,
height: 600,
chartArea: {
height: 300,
top: 100
},
hAxis: {
title: 'Departamentos',
pointSize: 0,
titleTextStyle: {
color: '#ff0000',
},
slantedText: true,
slantedTextAngle: 45
},
series: {
0: {
color: 'transparent',
type: 'line',
visibleInLegend: false,
enableInteractivity: false
}
},
vAxis: {
title: 'Kits'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
further adjustments can be made to get the tick mark below the x-axis,
use a negative dummy value, and tweak the y-axis to allow room for negative values...
(see vAxis options in the following snippet)
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Departamentos');
data.addColumn('number', 'dumy');
data.addColumn({type:'string', role:'annotation'}); // interval role col.
data.addColumn('number', 'Entregados');
data.addColumn('number', 'En Stock');
data.addRows([
['abdasdasa', -32, '', 925, 786],
['bbdasdas', -32, '', 652, 156],
['cbdasdas', -32, '', 300, 200],
['ddasdasb', -32, '', 925, 786],
['edasdb', -32, '', 652, 156],
['fasdasb', -32, '', 300, 200],
['gdasdasdb', -32, '', 925, 786],
['abdasdasa', -32, '', 925, 786],
['bbdasdas', -32, '', 652, 156],
['cbdasdas', -32, '', 300, 200],
['ddasdasb', -32, '', 925, 786],
['edasdb', -32, '', 652, 156],
['fasdasb', -32, '', 300, 200],
['gdasdasdb', -32, '', 925, 786]
]);
var options = {
annotations: {
stem: {
color: '#000000'
},
style: 'line',
textStyle: {
fontSize: 10
},
},
title: 'Motivation and Energy Level Throughout the Day',
isStacked: true,
height: 600,
chartArea: {
height: 300,
top: 100
},
hAxis: {
title: 'Departamentos',
pointSize: 0,
titleTextStyle: {
color: '#ff0000',
},
slantedText: true,
slantedTextAngle: 45
},
series: {
0: {
color: 'transparent',
type: 'line',
visibleInLegend: false,
enableInteractivity: false
}
},
vAxis: {
ticks: [0, 500, 1000, 1500, 2000],
title: 'Kits',
viewWindow: {
min: -64
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm trying to understand Clojure more and more, i have the following list:
{merchant-data {order-id 72144305, unit-price-dollars 110.0, merchant-discount-dollars 20.5, my-discount-dollars 10.2, session-type CONTROL}, my-data {order-id 72144305, unit-price-dollars 110.5, merchant-discount-dollars 10.0, my-discount-dollars 20.2, session-type control}}
{merchant-data {order-id 72144777, unit-price-dollars 200.0, merchant-discount-dollars 30.0, my-discount-dollars 0.0, session-type TEST}, my-data {order-id 72144777, unit-price-dollars 200.0, merchant-discount-dollars 0.0, my-discount-dollars 30.0, session-type test}}
{merchant-data {order-id 72145239, unit-price-dollars 50.0, merchant-discount-dollars 14.8, my-discount-dollars 2.0, session-type UNMANAGED}, my-data {order-id 72145239, unit-price-dollars 50.0, merchant-discount-dollars 5.0, my-discount-dollars 15.0, session-type unmanaged}}
I'm trying to sort this list based on specific field for example (unit-price-dollars):
(sort-by :unit-price-dollars sorted-result)
for some reason I'm not getting the sorted list, Please help! if this is not the right way, please suggest the right one!
Firstly it always helps if the data structure you are trying to sort is valid Clojure. Secondly you need to specify the full path to the value you want to sort by.
user> (def prices [{:merchant-data {:order-id 72144305, :unit-price-dollars 110.0, :merchant-discount-dollars 20.5, :my-discount-dollars 10.2, :session-type "CONTROL"}, :my-data {:order-id 72144305, :unit-price-dollars 110.5, :merchant-discount-dollars 10.0, :my-discount-dollars 20.2, :session-type "control"}}
{:merchant-data {:order-id 72144777, :unit-price-dollars 200.0, :merchant-discount-dollars 30.0, :my-discount-dollars 0.0, :session-type "TEST"}, :my-data {:order-id 72144777, :unit-price-dollars 200.0, :merchant-discount-dollars 0.0, :my-discount-dollars 30.0, :session-type "test"}}
{:merchant-data {:order-id 72145239, :unit-price-dollars 50.0, :merchant-discount-dollars 14.8, :my-discount-dollars 2.0, :session-type "UNMANAGED"}, :my-data {:order-id 72145239, :unit-price-dollars 50.0, :merchant-discount-dollars 5.0, :my-discount-dollars 15.0, :session-type "unmanaged"}}])
user> (clojure.pprint/pprint (sort-by #(get-in % [:merchant-data :unit-price-dollars]) prices))
({:my-data
{:my-discount-dollars 15.0,
:unit-price-dollars 50.0,
:session-type "unmanaged",
:order-id 72145239,
:merchant-discount-dollars 5.0},
:merchant-data
{:my-discount-dollars 2.0,
:unit-price-dollars 50.0,
:session-type "UNMANAGED",
:order-id 72145239,
:merchant-discount-dollars 14.8}}
{:my-data
{:my-discount-dollars 20.2,
:unit-price-dollars 110.5,
:session-type "control",
:order-id 72144305,
:merchant-discount-dollars 10.0},
:merchant-data
{:my-discount-dollars 10.2,
:unit-price-dollars 110.0,
:session-type "CONTROL",
:order-id 72144305,
:merchant-discount-dollars 20.5}}
{:my-data
{:my-discount-dollars 30.0,
:unit-price-dollars 200.0,
:session-type "test",
:order-id 72144777,
:merchant-discount-dollars 0.0},
:merchant-data
{:my-discount-dollars 0.0,
:unit-price-dollars 200.0,
:session-type "TEST",
:order-id 72144777,
:merchant-discount-dollars 30.0}})
nil
The question itself throws up issues. For example the maps above do not contain unit-price-dollars but their two submaps do. Do you want to sort by the merchant-data one, the my-data one or some combination of both?
Attempting the simpler case, sorting by one of the values (randomly picked merchant-data), converting all the symbol keys to keywords, and putting the individual maps into a collection gives:
(def test-data
[{:merchant-data {:order-id 72144305, :unit-price-dollars 110.0, :merchant-discount-dollars 20.5, :my-discount-dollars 10.2, :session-type :CONTROL}, :my-data {:order-id 72144305, :unit-price-dollars 110.5, :merchant-discount-dollars 10.0, :my-discount-dollars 20.2, :session-type :control}}
{:merchant-data {:order-id 72144777, :unit-price-dollars 200.0, :merchant-discount-dollars 30.0, :my-discount-dollars 0.0, :session-type :TEST}, :my-data {:order-id 72144777, :unit-price-dollars 200.0, :merchant-discount-dollars 0.0, :my-discount-dollars 30.0, :session-type :test}}
{:merchant-data {:order-id 72145239, :unit-price-dollars 50.0, :merchant-discount-dollars 14.8, :my-discount-dollars 2.0, :session-type :UNMANAGED}, :my-data {:order-id 72145239, :unit-price-dollars 50.0, :merchant-discount-dollars 5.0, :my-discount-dollars 15.0, :session-type :unmanaged}}])
(sort-by (comp :merchant-data :unit-price-dollars) test-data)
; =>
;({:merchant-data {:order-id 72145239, :unit-price-dollars 50.0, :merchant-discount-dollars 14.8, :my-discount-dollars 2.0, :session-type :UNMANAGED}, :my-data {:order-id 72145239, :unit-price-dollars 50.0, :merchant-discount-dollars 5.0, :my-discount-dollars 15.0, :session-type :unmanaged}}
; {:merchant-data {:order-id 72144305, :unit-price-dollars 110.0, :merchant-discount-dollars 20.5, :my-discount-dollars 10.2, :session-type :CONTROL}, :my-data {:order-id 72144305, :unit-price-dollars 110.5, :merchant-discount-dollars 10.0, :my-discount-dollars 20.2, :session-type :control}}
; {:merchant-data {:order-id 72144777, :unit-price-dollars 200.0, :merchant-discount-dollars 30.0, :my-discount-dollars 0.0, :session-type :TEST}, :my-data {:order-id 72144777, :unit-price-dollars 200.0, :merchant-discount-dollars 0.0, :my-discount-dollars 30.0, :session-type :test}})
If this isn't what you are after, then you're going to have to make your question clearer.