@kris,
Can you please create and share a JSFiddle reproducing the issue, so that we can look into your code, understand it better and help you out.
___________ Indranil Deo, Team CanvasJS
@lolaona12,
Thanks for the solution. We will fix this issue in our next release.
You can achieve the above requirement by passing dataPoint x-value as Date Object and the corresponding y-value as numeric. Please take a look at this documentation page to render a chart with Date & Time axis.
@neromorto,
We will fix this issue in our next release. For time being please declare the variable i within the for loop as shown here ( var i = 0; i < allDOMEventHandlers.length; i++ ).
( var i = 0; i < allDOMEventHandlers.length; i++ )
Please refer to this forum post for more information.
@jinn,
Sorry, controlling the first label on the Axes is not available as of now.
@murcie96,
Can you kindly share a sample project with sample JSON data over google-drive or onedrive so that we can understand it better and help you out?
Can you please let me know if you are trying to set the Axis minimum value or only the first label on the Axis?
@mobilebloke,
Setting the includeZero to false should work fine in your case. In case it doesn’t suit your requirement kindly create a jsfiddle reproducing the issue so that we can look into the code, understand your requirement better and help you out.
@tyrrellnick,
Glad you were able to resolve the issue. Thanks for choosing CanvasJS.. :)
The commercial version of CanvasJS doesn’t carry any watermark or credit link. Since you have already replaced the trial version of CanvasJS with the commercial version, please clear the browser cache and try again.
@subhashe,
chart.print() is only available for the specific chart on which it is called. You can call chart.print() on individual charts separately or you can use a third party plugin html2canvas to capture a combined image of the available charts and print it using window.print(). Please refer the below code –
$("#exportButton").click(function(){ html2canvas(document.querySelector("#chartsContainer")).then(canvas => { var dataURL = canvas.toDataURL(); var pdf = new jsPDF(); pdf.addImage(dataURL, 'JPEG', 20, 20, 170, 120); //addImage(image, format, x-coordinate, y-coordinate, width, height) pdf.save("CanvasJS Charts.pdf"); }); });
Also, kindly check this JSFiddle to combine multiple charts using html2canvas.
___________ Indranil Deo Team CanvasJS
@michael-pigott,
Please take a look at this jsfiddle. The dataSeries under the chart type “stepArea” are used for plotting the Stacked Step Area Chart.
@tapu,
Can you kindly create a sample project with sample dataPoints and share it over Google-Drive or Onedrive, so that we can look into your code, understand the issue properly and help you out?
____________ Indranil Deo, Team CanvasJS
@rajshree,
You can use jQuery ScrollBar to add scrolling functionality to the chart. To sync the ScrollBar with the axis you need to update the axis viewport with the ScrollBar value as shown in the code snippet below –
chart.options.axisX.viewportMinimum = $(".scroll-bar").slider("option", "value"); chart.options.axisX.viewportMaximum = chart.options.axisX.viewportMinimum + viewportSize;
Please take a look at this JSFiddle to add ScrollBar on X Axis with dynamic data.
You can use directive to add the required HTML elements and use the same as a container(DIV) for the charts to render on button click. Please check the below code snippet –
HTML
<div ng-controller="chartContainerController"> <div> <button id="renderChart" ng-click="clickMe()">Click to Render Charts</button> <div add-containers id="addContainers"></div> </div> </div>
JS
angular.module('myapp', []) .controller('chartContainerController', ['$scope', function($scope) { $scope.chartContainers = [ { id: 'chartContainer1', type: 'line', country: 'India' }, { id: 'chartContainer2', type: 'column', country: 'Australia' }, { id: 'chartContainer3', type: 'spline', country: 'Canada' }, { id: 'chartContainer4', type: 'scatter', country: 'USA' }]; }]) .directive("addContainers", function($compile){ return{ scope:false, link:function(scope,element,attributes){ scope.clickMe= function() { $.when( angular.element(document.getElementById('addContainers')).append($compile(('<div class="panel panel-primary" ng-repeat="chartContainer in chartContainers"> <div class="panel-heading">{{ chartContainer.country }}: {{chartContainer.type}} </div><div class="panel-body"><div id="{{ chartContainer.id }}" class="container"></div></div></div>'))(scope))).then(function() { angular.forEach(scope.chartContainers, function (value, index) { var chart = new CanvasJS.Chart(scope.chartContainers[index].id, { title: { text: scope.chartContainers[index].type +" chart" }, data: [ { type: scope.chartContainers[index].type, dataPoints: [ { x: 10, y: 71 }, { x: 20, y: 55 }, { x: 30, y: 50 }, { x: 40, y: 65 }, { x: 50, y: 95 }, { x: 60, y: 68 }, { x: 70, y: 28 }, { x: 80, y: 34 }, { x: 90, y: 14 } ] } ] }); chart.render(); }); document.getElementById("renderChart").disabled = true; } )}; } } });
Also, kindly take a look at this JSFiddle to render chart on button click in AngularJS.