Skip to content

chartjs-plugin-colorschemes not working. #21

@shashwat4348

Description

@shashwat4348

Hi, I am new at programming and I just started a Flask project related to Stock Market. In the chart under "function Stock_Performance_Chart2()" 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'
  
        }
  
      }
    }
  });

});

});

} `

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions