@sajeeshe,
Please take a look at these fiddles. 1.Fiddle1 2.Fiddle2
if you look at this, the other charts are not showing. Please help me to fix this issue.
The values of other dataPoints are very less as compared to the maximum y value in dps array. Hence, the other dataPoints will stick to the axis.
Also if you look at the other link, you will see the blue part and the yellow part. For the higher value that is also not showing
The blue, yellow parts(stacked charts) are not been shown up as their threshold values are very less as compared to the maximum y value of the dps array. You can set the threshold value for the blue, yellow and red stacked charts based on your requirement. Please check calculateThreshold() in provided fiddles to set the threshold value for the stacked charts.
__ Priyanka M S Team CanvasJS
@samira.2018
You can eliminate the past dataPoint values by comparing timestamps of individual dataPoints against the current time.
Kindly take a look at the code snippet below,
function addDps(chart){ var currentTime = new Date().getTime(); for (var i = 0; i < dps.length; i++) { if((dps[i][4] >= 1527835332000)){ dataPoints1.push({ x: new Date(dps[i][4]), y: parseFloat(dps[i][0]) }); dataPoints2.push({ x: new Date(dps[i][4]), y: parseFloat(dps[i][1]) }); dataPoints3.push({ x: new Date(dps[i][4]), y: parseFloat(dps[i][2]) }); dataPoints4.push({ x: new Date(dps[i][4]), y: parseFloat(dps[i][3]) }); } } }
Please take a look at this JSfiddle for an example with complete code on displaying chart after removing all previous days data from current time.
Please take a look at Pyramid charts. Pyramid charts cannot be rendered with axis. However, if you want to place text beneath the chart, you can use subtitles and set verticalAlign:”bottom” , horizontalAlign:”center” properties. Please take a look at this fiddle
@patricia.a.lopes1,
You can’t make AJAX requests to the local filesystem due to security issue. As a workaround, you can store the file on a local webserver and make an AJAX call to it or you can store the JSON in CORS enabled JSON hosting service like myjson.com. Please take a look at this tutorial on rendering charts from JSON API using AJAX.
@liyen,
You can achieve Multi-Series Stacked Column Chart(grouped stacked chart) by attaching dataSeries to different axes. Please take a look at this jsfiddle.
hari,
Are you looking for something like this? If not, please share a pictorial representation of your requirement, so that we can understand it better and help you out.
stack multiple graphs on each other and have synchronized zoom, pan and scroll
It is possible to synchronize zoom and pan for multiple charts. Please take a look at this fiddle and also refer the tutorial for the same.
is there a way to position the X-axis at the top of the graph
You can position X-axis on top (secondary axis) by setting axisXType property to ‘secondary’.
@yong-min-lee,
According to tutorials from different sources, its suggested to refresh the page automatically every n-seconds. Please take a look at this updated sample project. 1. Auto-Reloading part of webpage every 5 seconds. 2. Auto-Refresh
You can further try to improve it to refresh the page whenever there is change in data.
@mhdajmalik,
Is there any alternatives? can I access the X-axis datapoint position from outside chart?
You can get the position of dataPoint by using convertValueToPixel() method.
Can I apply labelFontColor from datapoint instead of axisX
Labels are properties of axis, labelFontColor can only be used inside axis. However you can have indexLabel for every dataPoint and customize it’s color using indexLabelFontColor.
Thanks for sharing the sample project. We will look into the issue and get back to you at the earliest. Meanwhile you can refer following tutorials on auto-refresh/reloading a part of webpage. 1. Auto-Reloading part of webpage every 5 seconds. 2. Auto-Refresh 3. Auto refresh page on data change – Stackoverflow
@samira.2018,
It is possible to display multiple charts in the same page with the same chart options and different dataPoints.
You will have to create multiple chartContainers with separate id for each, and create multiple charts which you can assign to specific chartContainers and call the corresponding chart render method. Please take a look at the code snippet below,
var chart1 = new CanvasJS.Chart("chartContainer1",{ title :{ text: "Live Data" }, data: [{ type: "line", dataPoints : [ { label: "apple", y: 10 }, { label: "orange", y: 15 }, { label: "banana", y: 25 }, { label: "mango", y: 30 }, { label: "grape", y: 28 } ] }] }); var chart2 = new CanvasJS.Chart("chartContainer2",{ title :{ text: "Live Data" }, data: [{ type: "column", dataPoints : [ { label: "apple", y: 10 }, { label: "orange", y: 15 }, { label: "banana", y: 25 }, { label: "mango", y: 30 }, { label: "grape", y: 28 } ] }] }); chart1.render(); chart2.render();
Also, kindly take a look at our documentation page for a step-by-step tutorial on how to render multiple charts in a page.
@tcodeuser
Chart animates only on first chart render as of now. We will reconsider this behavior to animate chart every-time it renders for future releases.
@tmcdonagh,
It is possible to show current data in dynamic graph, by using shift method to remove the previous data. Please take a look at this tutorial on creating dynamic charts.
@mhdajmalik
Sorry, this feature is not available as of now.
@psergey,