[Priyanka M S]

@kavyadhannana,

https://imgur.com/43iDSj8

Maps are not available as of now.

https://imgur.com/ps7oBbQ

You can achieve this using column charts. Please take a look at this jsfiddle.

https://imgur.com/rbkIB5h

You can render multiple bar charts placed one next to other to achieve something similar to the image that you have shared. Please take a look at this jsfiddle.

https://imgur.com/L659nvg

You can use Pie Chart and Column Chart next to each other to achieve this.

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

@lguillermobp,

You can use indexLabelFormatter to format indexLabels the way you want. Please take a look at this updated jsfiddle.

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

@Gnutzmann,

Kindly share a sample project that reproduces the issue you are facing(along with sample database) over onedrive or google-drive, so that we can understand your scenario better and help you out.

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

@mgkrishna,

You can use SheetJS to read the excel file and parse the data that you received to the format accepted by CanvasJS. Here is an example for the same (you can try it with this sample excel file).

You can achieve any level of drilldown in CanvasJS Charts by updating chart options dynamically. Please refer this example for the same.

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

@Hemel619619,

Considering this to be duplicate. Hence closing this thread.

If you still face any issues, kindly create and share jsfiddle reproducing the issue.

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

@Hemel619619,

Please take a look at this updated jsfiddle.

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

@Hemel619619,

chart looking so clumsy in here. How can I reduce it?

You can shift the dataPoints. If you need only the current dataPoints, use shift() method. Please take a look at this example in our documentation.

ALso wanna know in the coding where did u make the changes so the time slots are visible in x-axis?

You should assign the labels along x-axis with values obtained from JSON.

I have one more question! could you please explain how did u create this? https://api.myjson.com/bins/a98dm

You can create JSON data in http://myjson.com/ and get the link that has your JSON data.

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

@lguillermobp,

You can use indexLabel to achieve the same. Please take a look at this jsfiddle.

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

@khennaa,

Can you kindly create and share a jsfiddle(with sample data) reproducing your issue, so that we can understand your scenario better and help you out?

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

@JohnSnowGum,

When you use JSON data as an array of arrays, you need to slightly modify the above fiddle. Below is the code snippet.

for (var i = 0; i < dateArray.length; i++) {
  if (dateArray[i][0] != currentXValue) {
    if (count > 0)
      dps.push({x: new Date(currentXValue), y: count});
    currentXValue = dateArray[i];
    count = 1;
  } else {
    count++;
  }
}

Please take a look at this updated JSFiddle for complete code.

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

@Mourf,

This feature is not available as of now.

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

Samuel,

The fiddle which we had provided before works for any number of dataPoints, provided that the x values of “upperValue” sync with the x values of “lowerValue”. Please take a look at this jsfiddle.

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

@Gnutzmann,

While you are updating the indexLabel of dataPoints with y-value 0 or null, you can also set the indexLabelLineThickness to 0 so that they are not displayed on the pie chart. The code snippet below shows how you can achieve the same:

function hideIndexLabel() {
  var length = chart.options.data[0].dataPoints.length;
  for(var i = 0; i < length; i++ ) {		  
    if( chart.options.data[0].dataPoints[i].y === 0  || chart.options.data[0].dataPoints[i].y === null ) {
      chart.options.data[0].dataPoints[i].indexLabel = " ";
      chart.options.data[0].dataPoints[i].indexLabelLineThickness = 0;
    }
    else
      chart.options.data[0].dataPoints[i].indexLabel = chart.options.data[0].dataPoints[i].indexLabel;
  }      
}

Please take a look at this updated sample project for a working example with sample code.

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

JohnSnowGum,

The JSON data we have provided is an array of objects. In your case, it’s an array of arrays.

__
Priyanka M S
Team CanvasJS

[Priyanka M S]

@Hemel619619,

You need to have data-source that updates dynamically like JSON or CSV which you can read, parse it to the format accepted by CanvasJS and pass it to the chart.
Please take a look into this jsfiddle. In the jsfiddle, chart gets updated every second with the dataPoints from an external JSON.

__
Priyanka M S
Team CanvasJS