Thanks Luka, for reporting the issue.
We have resolved this bug just a few days back. Here is an internal build with the issue fixed. Please let me know if this worked at your end.
You have to replace the link with your PHP file. I have updated updateChart. Finally your code should look like…..
$(document).ready(function() { var chart; $.getJSON("ratingsdata.php", function(result) { chart = new CanvasJS.Chart("chartContainer", { title: { text: "Product Ratings" }, animationEnabled: true, data: [{ dataPoints: result }] }); chart.render(); }); //Function to render the chart on button click var updateChart = function() { $.getJSON("selected_product.php", function(result) { var data = { dataPoints: result }; chart.options.data.push(data); chart.render(); }); }; //Function for button click event document.getElementById("viewratings").onclick = function() { updateChart(); } });
Hi,
As of now axisY supports only number format but using labelFormatter you can map axisY labels. Here is an example.
hitmanbaby2007,
I am expecting DOMContentLoaded is fired before window.onload. So, here something might go wrong. Please refer http://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events
cool1,
Replacing your updateChart with below would render the chart.
var updateChart = function() { $.getJSON("selected_product.php", function(result) { var data = { dataPoints: result }; chart.options.data.push(data); chart.render(); }); };
Arcticio,
Thanks for your feed-back. Are you looking for axisY/Y2 margin?
Hi cool1,
Can you post your sample JSON data. So that we can help you out.
@ask123,
Parsing your CSV data according to the format accepted by CanvasJS should work fine in your case. Please find the code-snippet related to parsing data from your CSV format. dataPoints.push({ x: parseInt(rowData[1]), y: parseInt(rowData[2]), name:rowData[0] });
dataPoints.push({ x: parseInt(rowData[1]), y: parseInt(rowData[2]), name:rowData[0] });
— Sanjoy
himanbaby2007
It is tough to guess the issue without knowing your data format. Can you provide your sample data? For now I can suggest you to
1) In line 5 instead of k+ use k++ 2) Move your document.addEventListener( 'DOMContentLoaded', function (){..code..} in place of updateChart(dataLength). 3) Check the url in EventSource.
document.addEventListener( 'DOMContentLoaded', function (){..code..}
In this case you have to change updateChart function as
var updateChart = function (yVal) { xVal ++; dps[xVal % dataLength].y = yVal; dps[(xVal+gap) % dataLength].y = null; chart.render(); };
And in your eventListner function you have to call updateChart(e.data); I hope this will help you to implement required chart.
updateChart(e.data);
Baekmark,
For showing certain number of lines from the end you can modify the processData function as below for iterating over number of lines.
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $.ajax({ type: "GET", url: "Data.csv", dataType: "text", success: function (data) { processData(data); } }); function processData(allText) { var numberOfLinesFromEnd = 10; var allLinesArray = allText.split('\n'); if (allLinesArray.length > 0) { var dataPoints = []; for (var i = Math.max(0, allLinesArray.length - numberOfLinesFromEnd) ; i <= allLinesArray.length - 1; i++) { var rowData = allLinesArray[i].split(','); if(rowData && rowData.length > 1) dataPoints.push({ label: rowData[0], y: parseInt(rowData[1]) }); } chart.options.data[0].dataPoints = dataPoints; chart.render(); } } var chart = new CanvasJS.Chart("chartContainer", { theme: "theme2", title: { text: "Basic Column Chart – CanvasJS" }, data: [ { type: "column", dataPoints: [] } ] }); }); </script> <script type="text/javascript" src="canvasjs.min.js"></script> </head> <body> <div id="chartContainer" style="height: 300px; width: 100%;"></div> </body> </html>
If you want to update on Click of button instead of setInterval you can use
document.getElementById("updateButtonId").onclick = function(){ updateChart(5); }
I hope this example will help you to implement the same as your link.
Thanks for sharing your view. Binary Interval is not in out roadmap yet. But we will consider it in future.
Setting indexLabelPlacement to “outside” and viewportMaximum/viewportMinimum you can surely show all the indexLabels outside the bar.