Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chartjs-plugin-colorschemes not working. #21

Open
shashwat4348 opened this issue Aug 27, 2020 · 1 comment
Open

chartjs-plugin-colorschemes not working. #21

shashwat4348 opened this issue Aug 27, 2020 · 1 comment

Comments

@shashwat4348
Copy link

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'
  
        }
  
      }
    }
  });

});

});

} `

@KDGundermann
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants