score:0
try this. declare label and data as
var labels = result['labels'].split(","); // return array of strings of labels
var data = json.parse("[" + result['data'] + "]");// return array of data
chage
labels: [labels],
data: [data],
to
labels: labels,
data: data,
because it already in array
score:1
for the first time you can fill the chart with your own value, but when it is coming for dynamically appending data then you should remove the canvas
element and regenerate it. so that your data will get appended dynamically on chart.
you can try something like this.
<canvas id="chartbtc" class="canvaschart"></canvas>
<script>
dynamicdataappendonchart(labels, data); // on page loading you will be having your own data so you can pass them, or if you want that to be happen with ajax when page loading itself you can trigger the click event.
$('#btnclick').trigger('click');
// you will be calling the function with click event...
$('#btnclick').on('click', function () {
var data = '', labels = '';
$.ajax({
url: url,
type: "post",
data: data,
async: isasync,
success: function (result) {
result = json.parse(result);
labels = result['labels'];
data = result['data'];
}
});
dynamicdataappendonchart(labels, data); // now you can call the function by passing labels and data
});
function dynamicdataappendonchart() {
$('#chartbtc').remove();
$('#appendthecanvaselement').append('<canvas id="chartbtc" class="canvaschart"><canvas>'); // this would create new canvas element every time and removes the older one.
var ctx = document.getelementbyid("chartbtc");
var mychart = new chart(ctx, {
type: 'line',
data: {
labels: [labels],
datasets: [{
label: 'market price (usd)',
data: [data],
backgroundcolor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
bordercolor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderwidth: 1
}]
},
options: {
responsive: true,
maintainaspectratio: false,
scales: {
yaxes: [{
ticks: {
beginatzero: false
}
}]
}
}
});
}
</script>
score:2
since you have provided your ajax result, this will not work with the chart generation. in your case result["labels"]
is a string and you are just making a list with 1 element which is the whole string(which is not valid for the labels
property and will not work). what you should do is split the string, format it correctly and then supply it as a list to the labels
property. easiest way would be to use the split()
function, and in your case you could split by ", "
. although i would recommend to implement a better response if its possible (have it something like so: {"labels": ["13-nov-2017", "14-nov-2017", ...]}
).
hope this helps!
Source: stackoverflow.com
Related Query
- Chart.js passing value data dynamic
- getting additional value fields from data source for dx.chartjs doughnut chart
- Chart JS display Data Value on the top of the Bar
- ChartJS bar chart fixed width for dynamic data sets
- chart js with angular2 loading dynamic data only after zoomin
- Angular chart how to show the legend data value by default along with legend name
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- Charts js and laravel: Render chart after passing in json data
- Make chartjs pie chart wiyh dynamic data
- How to show tooltip value of all data falling on the same axis in chart js?
- Dynamic data in bar chart not rendering React js
- Issue While Passing Dynamic Datas in React Chart Js 2
- get JSON data from function to give value to Chart JS
- Chart JS not working with Dynamic Data
- Chart JS change pointBackgroundColor based on data value
- ChartJS dynamic line chart ghosting back to old data when hovered on
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- Set Start Value as '0' With Dynamic Data In Chart.js
- how to insert dynamic data from sql into chartjs stacked bar chart javascript
- How do I destroy/update Chart Data in this chart.js code example?
- Chart.js chart by passing data through the controller MVC
- Passing data to a chart javascript object and array
- Unable to change y-axis value dynamically based on data for Stacked bar chart in reactjs
- How can I assign dynamic data from service via subscribe to doughnut chart in angular?
- Not being able to display value from json data into chart js
- Dynamic Chart Data
- Unable to get chartjs to draw a chart with dynamic data (variable not hardcoded)
- Chart js: generate dynamic labels according to the data
- Chart bundle js is not showing dynamic data
- how to show data value on bar chart body rather than using tooltip?
More Query from same tag
- Chartjs populate data with Axios response
- How to change chart js data on button click
- How to set labels align left in Horizontal Bar using chart.js?
- Update Chart.js plugin
- Print chart in Chrome build by Chart jS using javascript
- Chart.js v2, remove padding/margin from radar chart
- How to add text inside the doughnut chart using Chart.js version 3.2.1
- Is it possible to create context menu with chart.js?
- Property 'elements' does not exist on type 'typeof Chart'
- I have a chart but it is not updating the chart with react chart-js-2
- Chartjs bar order adjustment after bar chart is drawn
- copy object in Chart.js
- Chart js multiple pie chart on one page
- how to hide tick labels on chartjs/vue-chartjs
- Chart.update is not a function typeError
- Bootstrap Card Render Problem in Google Chrome
- I am trying to use the Chartjs-plugin-watermark but it is not working
- Getting String array from node js to ejs
- How to create dataset in chart.js dynamically using array?
- Multiple Graphs on one page
- Chart.js - Mixed Chart: Bar Graph with Diagonal Line
- Call ChartJS details in main Javascript file
- Format Bar Chart's yAxis labels in Chart.js
- Place two canvases side by side in a div
- how to show only each 15th x-labels in line chart chart.js in angular 6?
- vue-chartjs load data from parent component
- ng2-chart tooltip position change option?
- How do you set up a chart.js scatter line chart through angular-chart.js?
- How to create single value Doughnut or Pie chart using Chart.js?
- Chartjs: Double x axis not having the same gridline