Raj,
Please refer this thread.
_________ Indranil Deo Team CanvasJS
ElToredo,
Placing a tick on the axis is not possible as of now. However you can achieve something similar using this work-around.
_______ Indranil Deo, Team CanvasJS
In JavaScript Month starts from 0 (January) and ends at 11(December). So while displaying they are incremented by 1.
Thanks for reporting the issue regarding the miscalculation of the axisY on zooming. We are looking into the issue. We will get back to you at the earliest.
________ Indranil Deo, Team CanvasJS
You can set the minimum of both the axes to the value of the first dataPoint to start the graph from origin.
The axisY can be formatted to percentage by using labelFormatter(). And to change the date manually formateDate() can be used.
Spline chart can be used for achieving smooth line.
You can refer to this thread to populate data using database and PHP.
The markers can be showed only on hover by seting markerSize: 0 at dataSeries or dataPoint level.
markerSize: 0
Please take a look at this following example.
Timothy,
The lines are aligned but due to change in color it seems as if the lines are not aligned.
————- Indranil Deo Team CanvasJS
@mehul_5005,
Using chart.axisY[0].convertValueToPixel(e.dataPoint.y[1]) you can get the pixel coordinate of the last index value of y. Then adding it to the width() of the textBox would make the textBox render to the end of the bar.
chart.axisY[0].convertValueToPixel(e.dataPoint.y[1])
width()
Please take a look at this fiddle. ————- Indranil Deo Team CanvasJS
@AsmaaM,
You seem to be facing issue because of the scope of variable – dps. The variable dps has been declared both globally and locally, please remove the local variable and the chart would work fine. Kindly take a look at the below code snippet –
<!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> <script type="text/javascript"> window.onload = function () { var dps = [{x: new Date(2017, 04, 20, 07, 20, 00 ), y: 30}]; //dataPoints. var chart = new CanvasJS.Chart("chartContainer",{ title:{ text: " Cooling Machine Status " }, axisX:{ valueFormatString: "DD-MM-YY HH:mm:ss" , labelAngle: -50 }, axisY:{ title: "Cooling Temperature (F)" }, data: [{ type: "line", showInLegend: true, name: "Temperature", dataPoints : dps }] }); chart.render(); var updateChart = function () { var rawFile = new XMLHttpRequest(); rawFile.open("GET","/analyticResults/coolingMachine.csv", true); rawFile.onreadystatechange = function () { if(rawFile.readyState === 4) { if(rawFile.status === 200 || rawFile.status == 0) { var csvLines = points = []; csvLines = rawFile.responseText.split(/[\r?\n|\r|\n]+/); for (var i = 0; i < csvLines.length; i++) if (csvLines[i].length > 0) { points = csvLines[i].split(","); var dateTime = points[0].split(" ");//dateTime[0] = date, dateTime[1] = time var date = dateTime[0].split("-"); var time = dateTime[1].split(":"); dps.push({ x: new Date(date[2], date[1], date[0], time[0], time[1], time[2]), y: parseFloat(points[1]) }); } } } }; rawFile.send(null); if (dps.length > 10 ) { dps.shift(); } chart.render(); }; setInterval(function(){updateChart()}, 1000); } </script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </head> <body> <div id="chartContainer" style="height: 300px; width: 70%;"> </div> </body> </html>
___________ Indranil Deo Team CanvasJS
Daesung,
We are looking into the issue and will get back to you at the earliest.
—- Indranil Deo, Team CanvasJS
Please refer to this thread link.
Placing the indexLabel at arbitrary position is not possible as of now. However you can achieve something similar using this work-around.
Parag,
Can you please provide a pictorial representation for the query, so that we can understand your requirement better.
———— Indranil Deo Team CanvasJS
Vaibhavgodambe,
Please take a look at this updated jsfiddle.
@ayy,
You can use rangeChanging or rangeChanged event to get viewportMinimum and viewportMaximum after zooming / panning. And you can use formatDate() to modify the date as per your requirement.
Kathy,
Primary and secondary y-axes will show-up only when separate dataSeries are attached to both independently. It seems like you are attaching dataSeries only to secondary y-axis. Inserting an empty object(dataSeries) inside data should work fine in your case.
Please take a look at this jsfiddle.