psm_chart_normal.html


    <!DOCTYPE html>
    <html>
    <head>
      <title>Price Sensitivity Meter</title>
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    </head>
    <body>
      <canvas id="psmChart" width="800" height="400"></canvas>
      <script>
        const ctx = document.getElementById('psmChart').getContext('2d');
        new Chart(ctx, {
          type: 'line',
          data: {"labels":[50,100,150,200,250,300,350,400,450,500,550,600],"datasets":[{"label":"Too Expensive","data":[0,0,0,5.6,5.6,25,38.9,69.4,69.4,91.7,94.4,100],"borderColor":"blue","fill":false},{"label":"Expensive","data":[0,0,2.8,5.6,16.7,41.7,61.1,88.9,91.7,100,100,100],"borderColor":"red","fill":false},{"label":"Cheap","data":[100,100,94.4,77.8,50,16.7,5.6,0,0,0,0,0],"borderColor":"orange","fill":false},{"label":"Too Cheap","data":[100,97.2,72.2,47.2,13.9,5.6,2.8,0,0,0,0,0],"borderColor":"yellow","fill":false}]},
          options: {
            responsive: true,
            title: {
              display: true,
              text: 'Price Sensitivity Meter'
            },
            scales: {
              x: {
                title: {
                  display: true,
                  text: 'Price'
                }
              },
              y: {
                title: {
                  display: true,
                  text: 'Cumulative Percentage'
                },
                min: 0,
                max: 100
              }
            }
          }
        });
      </script>
    </body>
    </html>
  