[Vishwas R]

@Penindini,

You can set dataPoint color based on the the dataPoint value, whether its rising or falling. Please check this jsfiddle for an example.

function changeBorderColor(chart){
  var dataSeries;
  for( var i = 0; i < chart.options.data.length; i++){
    dataSeries = chart.options.data[i];
    for(var j = 0; j < dataSeries.dataPoints.length; j++){
      dataSeries.dataPoints[j].color = (dataSeries.dataPoints[j].y[0] <= dataSeries.dataPoints[j].y[3]) ? (dataSeries.risingColor ? dataSeries.risingColor : dataSeries.color) : (dataSeries.fallingColor ? dataSeries.fallingColor : dataSeries.color);
    }
  }
}

—
Vishwas R
Team CanvasJS

[Vishwas R]

@rick2,

As x-value stored in CSV is data-time, it should be parsed to date object than to float x: parseFloat(points[0]),. Changing it to x: new Date(points[0]), should work fine in your case. Please take a look at this documentation page for step-to-step tutorial on rendering chart with data from CSV.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Ravneet,

Labels / Quarters depends on the dataPoints. If the dataPoint values starts from 4th quarter 2016, labels also start showing from Q4’16 whereas if dataPoint starts from Jan 2017, labels also starts from Q1’17. Please check this updated jsfiddle.

—-
Vishwas R
Team CanvasJS

[Vishwas R]

Ravneet,

Rendering chart after updating chart-options should work fine in your case. Please check this updated jsfiddle for adding stripLines by updating chart-options and without using addTo method.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Ravneet,

Can you kindly create jsfiddle along with sample data, so that we can understand your scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

Tobi,

Gridlines / Ticks will appear only at y-values that are integral multiples of the interval, irrespective of the minimum and maximum set.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@bruce_markey,

There is some mismatch in the div-id being used (chart-container & chartContainer). Changing that should work fine in your case. Please take a look at this JSFiddle.

If you are still facing any issue, kindly create JSFiddle along with sample data, reproducing the issue so that we can look into it and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@blacktek,

Yes, we were able to reproduce the issue. We will fix it in future releases.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@blacktek,

Thanks for reporting the issue. We are looking into it and will fix the same in future releases.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@Carmen,

You just need to have separate charts for each dropdowns as shown in the code snippet below –

var dataPoints1 = [];
var chart1 = new CanvasJS.Chart("chartContainer1", {
	animationEnabled: true,
	axisX: {
		interval: 1,
		labelMaxWidth: 1000,
		labelFontSize:11,
		reversed: true
	},
	axisY2:{
		interlacedColor: "rgba(1,77,101,.2)",
		gridColor: "rgba(1,77,101,.1)",
		title: ""
	},

	data: [{
		type: 'bar',
		color: "#014D65",
		//xValueFormatString:"D MM h:mm",
		name: "series1",
		dataPoints: dataPoints1 // this should contain only specific serial number data

	}]
});

$( "#dd" ).change(function() {
	chart1.options.data[0].dataPoints = [];
	var e = document.getElementById("dd");
	var selected = e.options[e.selectedIndex].value;
	dps = jsonData1[selected];
	for(var i in dps) {
		chart1.options.data[0].dataPoints.push({label: dps[i].label, y: dps[i].y});
	}
	chart1.render();
});

var dataPoints2 = [];
var chart2 = new CanvasJS.Chart("chartContainer2", {
	animationEnabled: true,
	axisX: {
		interval: 1,
		labelMaxWidth: 1000,
		labelFontSize:11,
		reversed: true
	},
	axisY2:{
		interlacedColor: "rgba(1,77,101,.2)",
		gridColor: "rgba(1,77,101,.1)",
		title: ""
	},

	data: [{
		type: 'bar',
		color: "#53B17B",
		//xValueFormatString:"D MM h:mm",
		name: "series1",
		dataPoints: dataPoints2 // this should contain only specific serial number data

	}]
});

$( "#second" ).change(function() {
	chart2.options.data[0].dataPoints = [];
	var e = document.getElementById("second");
	var selected = e.options[e.selectedIndex].value;
	console.log(selected)
	dps = jsonData2[selected][0];
	for(var i in dps) {
		chart2.options.data[0].dataPoints.push({label: dps[i].label, y: dps[i].y});
	}
	chart2.render();
});

Please take a look at this updated jsfiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@Carmen,

The json in the fiddle that you have shared has label and y-value, where as while parsing the json you are trying to read x-value and y-vlaue out of it. Replacing x-value with label while parsing should work fine in your case.

chart.options.data[0].dataPoints.push({label: dps[i].label, y: dps[i].y});

Please take a look at the updated jsfiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@sayk,

The horizontal bars at the top right corner is shown when exportEnabled property is set to true, that is used to export chart as image. Setting exportEnabled to false will remove those horizontal bars.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@nsshinde88,

Trial Version is for evaluation purposes for up to 30 days. Please contact sales@canvasjs.com for license & sales related queries.

—
Vishwas R
Team CanvasJS

[Vishwas R]

James,

You can achieve this by changing axis minimum and maximum based on selected range like weeks or months etc. Please take a look at this jsfiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@surajit,

Thanks for your interest in CanvasJS. For all sales related queries, please contact sales@canvasjs.com.

—
Vishwas R
Team CanvasJS