nagix / chartjs-plugin-colorschemes

Predefined color schemes for Chart.js
MIT License
270 stars 59 forks source link

chartjs-plugin-colorschemes not working. #21

Open shashwat4348 opened 4 years ago

shashwat4348 commented 4 years ago

Hi, I am new at programming and I just started a Flask project related to Stock Market. In the chart under "_function Stock_PerformanceChart2()" I am using the plugin but it doesn't seem to work (All the different lines of the chart posses the same color i.e. Grey). Can you please help me regarding this. I will be very thankful if you do so.

`function initialize(){ var active = "Active"; $.ajax({ url : '/api/initialize/user_check?JsStatus=' + active, success: function (data) { var user = data['user'];
var firsttime = "yes";
var olduser = "no";
var modified = "error";
if (user == firsttime){
window.location.replace("http://127.0.0.1:5000/First_Login"); }else if (user == olduser){ window.location.replace("http://127.0.0.1:5000/Scratch_start_1"); } }

});

}

$('#quickstart').click(function() { window.location.replace("http://127.0.0.1:5000/quick_start_form"); });

function QuickStartSave(){

$.ajax({ url: '/api/quick_start_form?First_Name=' + document.getElementById('First_Name').value + '&Last_Name=' + document.getElementById('Last_Name').value + '&Tickers=' + document.getElementById('Tickers').value + '&Start_Date=' + document.getElementById('Start_Date').value + '&End_Date=' + document.getElementById('End_Date').value + '&Total_Investment_Amount=' + document.getElementById('Total_Investment_Amount').value + '&Amount_Allocation_raw=' + document.getElementById('Amount_Allocation_raw').value, 
success: function(data){window.location.replace("http://127.0.0.1:5000/quick_start_analytics")}
});

}

function Quick_Start_Analytics(){ var temp = "x"; $.ajax({ url : '/api/quick_start_form/analysis_and_optimistaion?x=' + temp, success: function (data) { $('#Portfolio_Annual_Return_Percent').html(data['Portfolio_Return_Percent'] ); $('#Current_Portfolio_Value').html('$' + data['Current_Portfolio_Value']); $('#Sharp_Ratio').html(data['Sharp_Ratio']); $('#Portfolio_Volatility').html(data['Portfolio_Volatility_Data']); $('#Portfolio_Varience').html(data['Portfolio_Varience_Data']); $('#Annual_Sharp_Ratio').html(data['Annual_Sharp_Ratio']); $('#Cumulative_Return').html(data['Cumulative_Return']); $('#Profit_Amount').html('$' +data['Profit_Amount']); Portfolio_Performance_Chart1(); Stock_Performance_Chart2();

    }
});

}

function Portfolio_Performance_Chart1(){ $.ajax({ url : '/api/quick_start_form/analysis_and_optimistaion', success: function (data) {

  var ctx = document.getElementById('Chart-1')
  var chart = new Chart(ctx, {
  type: 'line',
  data: {
      labels: data.Portfolio_Performance_Yaxis_Data,
  datasets: [{
      label: 'Portfolio Performance',
      borderColor: '#4B4B4B',
      data: data.Portfolio_Performance_Xaxis_Data,
  }]
   },
  options: {
      responsive: true,
      maintainAspectRatio: false,

      elements: {
          point:{
              radius: 2
            }
          }
      }
  });
}

});

}

function Stock_Performance_Chart2(){

var TITLE = 'Individual Stock Performance';

var X_AXIS = 'Time Period'; // x-axis label and label in tooltip var Y_AXIS = 'Price Normalized to 100'; // y-axis label and label in tooltip

var BEGIN_AT_ZERO = false; // Should x-axis start from 0? true or false

var SHOW_GRID = true; // true to show the grid, false to hide var SHOW_LEGEND = true; // true to show the legend, false to hide

$(document).ready(function() {

// Read data file and create a chart
$.get('/return-files', function(csvString) {

  var data = Papa.parse(csvString).data;
  var timeLabels = data.slice(1).map(function(row) { return row[0]; });

  var datasets = [];
  for (var i = 1; i < data[0].length; i++) {
    datasets.push(
      {
        label: data[0][i], // column name
        data: data.slice(1).map(function(row) {return row[i]}), // data in that column
        fill: false // `true` for area charts, `false` for regular line charts
      }
    )
  }

  // Get container for the chart
  var ctx = document.getElementById('chart-container').getContext('2d');

  new Chart(ctx, {
    type: 'line',

    data: {
      labels: timeLabels,
      datasets: datasets,
    },

    options: {
      title: {
        display: true,
        text: TITLE,
        fontSize: 14,
      },
      legend: {
        display: SHOW_LEGEND,
      },
      maintainAspectRatio: false,
      scales: {
        xAxes: [{
          scaleLabel: {
            display: X_AXIS !== '',
            labelString: X_AXIS
          },
          gridLines: {
            display: SHOW_GRID,
          },
          ticks: {
            callback: function(value, index, values) {
              return value.toLocaleString();
            }
          }
        }],
        yAxes: [{
          beginAtZero: true,
          scaleLabel: {
            display: Y_AXIS !== '',
            labelString: Y_AXIS
          },
          gridLines: {
            display: SHOW_GRID,
          },
          ticks: {
            beginAtZero: BEGIN_AT_ZERO,
            callback: function(value, index, values) {
              return value.toLocaleString()
            }
          }
        }]
      },
      tooltips: {
        displayColors: false,
        callbacks: {
          label: function(tooltipItem, all) {
            return all.datasets[tooltipItem.datasetIndex].label
              + ': ' + tooltipItem.yLabel.toLocaleString();
          }
        }
      },
      plugins: {

        colorschemes: {

          scheme: 'brewer.PuRd4'

        }

      }
    }
  });

});

});

} `

KDGundermann commented 2 years ago

Hi shashwat, that is too much code, please try to start with a simple example with static demo data