👍:0 I have found the solution myself. Strangely enough, what made it work was moving the code that instantiates the chart object to the same Smarty template where I am calling the dialog. In that case, the canvas does have a size, and the chart is drawn correctly. It is also displayed correctly inside the … Read more
👍:0 You can use Chart.Mvc which is a .NET wrapper on chart.js library: http://www.martinobordin.it/Chart.Mvc/Home/QuickStart This should solve your problem. Of course you can look to source code (https://github.com/martinobordin/Chart.Mvc) and do it your own way 🙂 How to set Json data to chart.js bar ChartJS – adding scroll to horizontal legend in Line chart
👍:0 You can build the correct structure in javascript itself, like so // it’s not good to rely on reverse() because we are using an ASSOCIATIVE array // so we get the object’s keys and sort them var labels = Object.keys(input).sort(function (a, b) { // the substring removes the ‘SEASON ‘ part // i.e. we … Read more
👍:0 my problem is that after the loop finishes when i am checking the value of datasetValue[0].data i am getting the same value which sholud be of datasetValue[1].data Your issue is that you are setting the data of both chart datasets to the same array object (distdata). When you update the array, both dataset’s data … Read more
0👍 ✅ Solved. Apparently it is due to the fact that ng-if actually removes the canvas from the html so, when updating the graph with new data, it somewhat does not update the size. I created a style with visibility:hidden; in it and used the ng-class construct to actually just hide the canvas without actually … Read more
0👍 ✅ Solved with a workaround: each time user switches to the tab in which graphs are contained I manually fire a “resize” window event. This event is listened by the graph library which automatically resizes graphs. $scope.tabChanged = function(tab){ if(tab.title == “A”){ $timeout(function() { var evt = $window.document.createEvent(‘UIEvents’); evt.initUIEvent(‘resize’, true, false, $window, 0); $window.dispatchEvent(evt); … Read more
👍:0 You can extend the Chart.js bar chart (~ step area chart) to do this, like so Chart.types.Bar.extend({ name: “BarAlt”, initialize: function (data) { Chart.types.Bar.prototype.initialize.apply(this, arguments); this.datasets .filter(function (dataset) { // only do this for the arrays return typeof (dataset.fillColor) === “object”; }) .forEach(function (dataset) { dataset.bars.forEach(function (bar) { dataset.fillColor.forEach(function (range) { if (bar.value >= … Read more
0👍 ✅ Iterate over your data coming from json response and push the data in an Array var piedata = []; $.each(yourJson,function(i,val){ piedata.push({value:val.value,color:val.color,label:val.label,labelColor:val.labelColor }); }); and then set new Chart(ctx).Pie(piedata); Chart.js not displaying in box
👍:0 Potatopeelings sugested i change the L in var lineChart = new Chart(lineChartCanvas).line(areaChartData,lineChartOptions); and that gave me an error message: ReferenceError: Chart is not defined. With that I managed to find the problem. When i included the Char.js i used <script src=”../../Chart.js-master/Chart.min.js”></script> but it started working once i removed the ../../ in the begining of … Read more
0👍 ✅ If this is the only chart you have (i.e. because the following code changes some of the global chart.js elements), you can use the following bit of code var originalMultiTooltip = Chart.MultiTooltip; Chart.MultiTooltip = function () { var argument = arguments[0]; // locate the series using the active point var activeDatasetLabel = myChart.activeElements[0].datasetLabel; … Read more