I'm using chartjs.org in order to display my records from database to line chart. However, i'm novice for Javascript so i'm unable to retrieve the data to the line chart.
This is what i wanted to do:
I have a table called daily_price having (supplying company, date and price) column. Now every time when i entered a new record, i want to update the line chart x and y axis to represent the new date on the x axis and the price on the y axis with out loosing its previous price on the chart.
I have already implemented the table and the chart, but i can't able to change the default js data read from database.
<script src="../administrator/js/chart.min.js"></script>
<script type="text/javascript">
var randomScalingFactor = function(){ return };
var lineChartData = {
labels : ["Jan","Feb","March","April","May","June","July","Aug","Sept","Oct","Nov","Dec"],
datasets : [
{
label: "My Second dataset",
fillColor : "rgba(48, 164, 255, 0.2)",
strokeColor : "rgba(48, 164, 255, 1)",
pointColor : "rgba(48, 164, 255, 1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(48, 164, 255, 1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
window.onload = function(){
var chart1 = document.getElementById("line-chart").getContext("2d");
window.myLine = new Chart(chart1).Line(lineChartData, {
responsive: true
});
};
</script>
So how to change the labels and the data section that will represents the price and the date respectively.
Its really appreciated If any one can help me with this. Thanks!