Hi Raghavendra,
Here is an example that shows how to render chart using PHP & MySQL.
Once you have a chart rendered, you can use mouseover property on the pie chart to detect the hovered dataPoint update your table accordingly.
Please let me know if either it is works for you or if you face any problem.
Thanks
Hi Tomi,
In CanvasJs, an axis property (interval) is available by which you can set the interval of the values appeared on label. Here is the example can help you jsfiddle.net/anjalij/W3KR6/1/.
Please let me know if either it is works for you or if you face any problem.
Thanks.
Hi Alphonsus,
I can help you to draw a graph using table values as datapoints,can you create a Jsfiddle for the same so that i can see exactly where you are getting problem.
Thanks
Hi Junjie,
You can calculate with in a loop so that each time you have no need to put a long calculation in dataPoints. Here is a example can help you http://jsfiddle.net/anjalij/QDkdH/2/
Please let me know if either it is works for you or if you face any problem.
In CanvasJS stripLines is an array in which you can pass multiple objects which create multiple strip line on same axis. You can check here for Example: http://jsfiddle.net/anjalij/P5wVq/12/
Please let me know if either it is works for you or if you face any problem.
[Update]
Now we have a Tutorial on Creating Charts from CSV Data in our documentation.
Hi Wallander,
For making a graph of your daily updated CSV file, you can use JQuery to get CSV file from server and can parse that CSV File into java script and can draw a chart using canvasJS. For Ex:
<!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">
$(document).ready(function () {
$.ajax({
type: "GET",
url: "Data.csv",
dataType: "text",
success: function (data) { processData(data); }
});
function processData(allText) {
var allLinesArray = allText.split('\n');
if (allLinesArray.length > 0) {
var dataPoints = [];
for (var i = 0; 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="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
Please Let me know if you need any further assistance.
Thanks,
Anjali