Raman Raman - 1 month ago 10
Javascript Question

convert axisX date to text in Html5 5 line chart

convert x-axis date to text in Html5 5 line chart, currently on x-axis 'jan,feb....' appearing . want to display text like subject name .Here is the refrence site is http://canvasjs.com/html5-javascript-line-chart/

$(function () {
var chart = new CanvasJS.Chart("chartContainer",
{
theme: "theme2",
title:{
text: "Line Chart"
},
animationEnabled: true,
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "month"

},
axisY:{
includeZero: false

},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: [
{ x: new Date(2012, 00, 1), y: 450 },
{ x: new Date(2012, 01, 1), y: 414},
{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
{ x: new Date(2012, 03, 1), y: 460 },
{ x: new Date(2012, 04, 1), y: 450 },
{ x: new Date(2012, 05, 1), y: 500 },
{ x: new Date(2012, 06, 1), y: 480 },
{ x: new Date(2012, 07, 1), y: 480 },
{ x: new Date(2012, 08, 1), y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
{ x: new Date(2012, 09, 1), y: 500 },
{ x: new Date(2012, 10, 1), y: 480 },
{ x: new Date(2012, 11, 1), y: 510 }

]
}


]
});

chart.render();
});

Answer

You need to put the label key with value to the objects. Here is a jsFiddle.

dataPoints: [{
      x: new Date(2012, 00, 1),
      y: 450,
      label: '2012-00-01'
    }, {
      x: new Date(2012, 01, 1),
      y: 414,
      label: '2012-01-01'
    }, {
      x: new Date(2012, 02, 1),
      y: 520,
      label: '2012-02-01',
      indexLabel: "highest",
      markerColor: "red",
      markerType: "triangle"
    }, {
      x: new Date(2012, 08, 1),
      y: 410,
      label: '2012-08-01',
      indexLabel: "lowest",
      markerColor: "DarkSlateGrey",
      markerType: "cross"
    }, {
      x: new Date(2012, 09, 1),
      y: 500,
      label: '2012-09-01'
    },