javascriptjquerycanvasjs

Modify this jsfiddle to work with diferent data type

I found this jsfiddle of canvasJs to make charts:

http://jsfiddle.net/canvasjs/bn029p1o/

I'm having problems to implement this with a date in the X axis.

In the example it says:

x: new date(...

But I want to show date like this: "11-jun" I try to make a string format like the "11-jun" but the doesn't work with 'new date' or without 'new date'

Solution

  • If you read up in the documentation http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/labels-index-labels/ you'll find that you have to update the chart configuration and add an

    axisX: { valueFormatString: "DD-MMM" }

    to achieve the desired formatting.

    var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "MultiSeries Chart from JSON"
  },
  toolTip: {
    animationEnabled: true,
    shared: true
  },
  data: dataSeries,
  // This is what you need to add:
  axisX: {
    valueFormatString: "DD-MMM" 
  }
});

    An updated fiddle is here (it looks strange because your data is all for the same day): http://jsfiddle.net/62t2fxjh/