score:-1
got it! had to make chart inside ajax call.
<script type="text/javascript">
$(document).ready(function(){
var dps = [{x: 1, y: 10}];
$.ajax({
url : "stackedcanvasjson.json",
success : function(result) {
var datafromjson = json.parse(result);
dps.splice(0, dps.length);
$.each(datafromjson, function (index, value) {
dps.push(value);
});
var chart = new canvasjs.chart("chartcontainer", {
title:{
text:"olympic medals of all times (till 2012 olympics)"
},
animationenabled: true,
legend: {
cursor:"pointer",
itemclick : function(e) {
if (typeof (e.dataseries.visible) === "undefined" || e.dataseries.visible) {
e.dataseries.visible = false;
}
else {
e.dataseries.visible = true;
}
chart.render();
}
},
axisy: {
title: "medals"
},
tooltip: {
shared: true,
content: function(e){
var str = '';
var total = 0 ;
var str3;
var str2 ;
for (var i = 0; i < e.entries.length; i++){
console.log(e.entries[i].datapoint.y);
var str1 = "<span style= 'color:"+e.entries[i].dataseries.color + "'> " + e.entries[i].dataseries.name + "</span>: <strong>"+ e.entries[i].datapoint.y + "</strong> <br/>" ;
total = e.entries[i].datapoint.y + total;
str = str.concat(str1);
}
str2 = "<span style = 'color:dodgerblue; '><strong>"+e.entries[0].datapoint.label + "</strong></span><br/>";
str3 = "<span style = 'color:tomato '>total: </span><strong>" + total + "</strong><br/>";
return (str2.concat(str)).concat(str3);
}
},
data: [
{
type: "bar",
showinlegend: true,
name: "cr",
color: "#1f77b4",
datapoints:dps[0]
},
{
type: "bar",
showinlegend: true,
name: "tr",
color: "#2ca02c",
datapoints:dps[1]
},
{
type: "bar",
showinlegend: true,
name: "ir",
color: "#f52887",
datapoints:dps[2]
},
{
type: "bar",
showinlegend: true,
name: "ptr",
color: "#5afffa",
datapoints:dps[3]
},
{
type: "bar",
showinlegend: true,
name: "wo",
color: "#9b14e7",
datapoints:dps[4]
}
]
});
chart.render();
}
});
});
</script>
Source: stackoverflow.com
Related Query
- Canvas JS using ajax call
- ChartJS using AJAX call to retrieve data isn't rendering visualization
- How to run Chart.js samples using source code
- How to pass Arrays from backing bean to JavaScript to draw a chart using Chart.js in an Ajax call
- Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
- How to add images as labels to Canvas Charts using chart.js
- unable to add background color to the canvas using jspdf and chartjs
- Creating dropdown options with Chart.js using select tag and multiple canvas
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- How to make aspecific API call from within a Line Chart class in ReactJS using react-chartjs-2?
- Chart only prints out first value using jquery ajax php
- how to add a background that display "no data" on Canvas using ChartJS?
- How to generate color code dynamically by swapping 2 characters within a string using PHP
- Placing canvas (chart.js line chart) inside an SVG using d3.js
- Using Chart.js onClick function, can you execute code from an undefined or null result?
- Ionic using multiple chart.js canvas in the same page
- How to destroy a canvas using Id and add new canvas to the same id
- How to get the data attribute of the canvas chart created using chartjs
- using ajax populate dynamic piechart from chartjs
- Real-time line chart with ChartJS using Ajax data
- Draw a Chart.js with data retrieved through ajax call
- Writing blank on canvas using fillText
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- Many Flots using ChartJS and Ajax get data values
- "Maximum call stack size" Error When Adding Data to Chartjs Using Props With Fetch (Vue/Chartjs)
- Execute chartjs after an ajax call with PHP
- How to check if HTML5 canvas element contains something in given coordinate region using javascript
- Chart is not populating when getting the data from AJAX call
- Cleart Chart data upon ajax call
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
More Query from same tag
- Tooltip does not appear
- Chart.js and PHP
- Specific grid line in X axis in ChartJs
- Chart.js chart.update() method is not doing anything
- Chart.js Tooltip Information
- Dynamically add x-axis in React using ChartJS
- ChartJS - Customize Ticks/Labels on Y Axis
- part 2 - how to group duplicate labels in order to create a label without duplicates in chart.js
- Chart.js: Set different options to datasets
- ChartJS: Grouped Stacked Bar Chart not Grouping
- JavaScript function based on counter
- Beginner in JS,Stuck with ChartJS and multiple filters and ways to display
- Configure Pie Chart Colors Using Chart.js and PHP
- Angular-Chart not rendering anything
- Getting x,y values from chart click event
- Removing ChartJS 2 border and shadow from point style legend
- Chart js. How to change font styles for "labels" array?
- chart.js chart distorted with fixed width
- Display data at ends of floating bar graph (created using chart js)
- Chartjs v3 overlap stacked bar chart with groups
- How can I keep the vertical lines under the horizontal ruler line is chartjs?
- Chart looks only grey, does not show the color - Chartjs,discordjs
- Angular6 and ng2-charts does not display any charts when i fill data from webservice
- How to set minimum value to Radar Chart in chart js
- ChartJS multiple dataset issue. second dataset gets over 1st instead of overlaying
- Chart.js Line chart fixed tooltip
- Make 2 charts using chart js
- colors are not updated when updating chart
- Add dynamically function to Chart.js
- How can I display desired/particular chart in App.vue from Charts.vue which contains different charts in Vuejs