@meenasiva,
You can use vuetify slider component to control the data to be viewed in all the charts. Please take a look at this updated sample project[Link removed] for the same.
—- Manoj Mohan Team CanvasJS
We are looking into your query and get back to you at the earliest.
@canvasjs/vue-charts supports from Vue 3+ as of now. However, you can use CanvasJS Vue Component(CanvasJSVueComponent.vue) to integrate CanvasJS Chart in Vue 2 applications. Please take a look at this sample project for an example on integration in Vue 2.
—– Manoj Mohan Team CanvasJS
@pimohdaimaoh,
As addressed in the previous reply, you can use either Fetch API or ajax request to get the content of text file hosted in your server. Please take a look at the code snippet below for an example on the same using Fetch API.
fetch(url).then(res => res.text()).then(textContent => renderChart(textContent));
If you are still facing the issue, kindly create sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data so that we can look into your code, run it locally at our end to understand the scenario better and help you out.
@rr4v,
We have released v3.7.11 GA with improvements for chromium based browsers, please check out release blog for more information. Please download the latest version from our download page and let us know your feedback.
@gabpayne,
@canvascharterx,
It seems like you are rendering the chart before getting the data. Moving this.chartOptions.data = series;this.chart.render(); inside the subscribe callback function should work fine in your case.
this.chartOptions.data = series;this.chart.render();
subscribe
@ankitlwt,
Since you are setting interval individually for all the chart, the datapoints in the chart are not matching with each other. Instead you can render all the charts at the same time by looping around all the charts and pushing the datapoints with similar x-value to all chart.
function updateChart() { for(var i=0; i<charts.length; i++) { if(mapChartDataPoints[i] != null) { var dps = mapChartDataPoints[i]; charts[i].options.data[0].dataPoints.push({x: new Date(dps[CounterDps].BATCH_TIME), y: parseFloat(dps[CounterDps].VALUE)}); charts[i].data[0].dataPoints.shift(); charts[i].render(); } } CounterDps++; }
Please take a look at this updated sample project for complete working code.
You can host text file in your server and using ajax request or Fetch API, you can get the content of text file and render the chart with it.
@supportprojectionsmart-com,
You can set viewportMinimum & viewportMaximum properties across all the charts to show same y-axis range between them. Please take a look at this JSFiddle for an example on the same.
@yo3dgjhcms-ro,
It seems like you are passing string as y-value. CanvasJS accepts number as y-value as of now. Passing it as number by parsing it should work fine in your case. Also, updating the url to fetch data from database (replace ajax/data.php with data.php) seems to be working fine.
dps.push({ "label":result[i].label, "y":parseFloat(result[i].y) });
1.I am unable to find the solution that when select the parameter’s from dropdown box it cant render individually i.e., when I change the parameter of 1st chart after that after that i used changed the parameter of rest of the charts .
You can bind id insted of class of the dropdown to detect the change in dropdown values and update the respective chart based on selected value of dropdown.
2. After that when parameter have been changed the synchronization of time will be miss match so that when i hover on chart it will show the data of that chart only rest of the chart data cannot be displayed on hovering.
Since you are using snapToDataPoint to true, the crosshair will be shown for nearest datapoint if datapoint is not present at the specified value. By setting snapToDataPoint to false seems to be working fine in your case.
Please take a look at this updated sample project for working code.
It seems like the text file you are passing contains multiple space between values in a line. To overcome this you can split each line with the help of regex like /\s+/ instead of just giving space " ". Also you need skip the lines from the text files which doesn’t contain data for the chart. For e.g. in above text file, you should start parsing it from 5th line for(var i = 4; i < dpsList.length; i++).
/\s+/
" "
for(var i = 4; i < dpsList.length; i++)
var separateData = dpsList[i].split(/\s+/);
It seems like you are pushing wrong values to dps. You need to use result[i].label and result[i].y instead of result[i].Time and result[i].Ampere respectively.
dps
result[i].Time
result[i].Ampere
dps.push({"label":result[i].label, "y":result[i].y});
If this doesn’t solve your issue, kindly share sample data you are getting from database so that we can reproduce the issue you are facing at our end and help you with an appropriate solution.
Is there a way I can attach pictures of what I mean?
You can upload image in imgur.com and share the link with us to show your requirements.