CODEWITHSUNDEEP
javascriptamcharts
Raj Kumar
Raj Kumar

Reputation: 7136

AmStock Chart based on non date as categoryAxis

I am trying to create a graph using AmStockChart version 2 the only thing which is not working is that I want to use numbers instead of date in category axisenter image description here

For this I have also added the below javascript but still ot working

var catAxis = new AmCharts.CategoryAxis();
catAxis.parseDates = false;
chart.categoryAxis = catAxis;

FULL JAVASCRIPT CODE

var stockPanel1 = new AmCharts.StockPanel();
stockPanel1.showCategoryAxis = true;
stockPanel1.recalculateToPercents = "never";

// Axis /////////////////////////////////////////////
var valAxis1 = new AmCharts.ValueAxis();
valAxis1.position = "left";
valAxis1.inside = false;
valAxis1.gridAlpha = 1;
valAxis1.gridColor = "#ededee";
valAxis1.color = "#808285";

// Graph ///////////////////////////////////////////
var graph = new AmCharts.StockGraph();
graph.valueField = "Value";
graph.valueAxis = valAxis1;
graph.comparable = true;
graph.compareField = "Value";
graph.periodValue = "Open";
graph.lineThickness = 2;
graph.compareGraphLineThickness = 2;
stockPanel1.addStockGraph(graph);
stockPanel1.addValueAxis(valAxis1);
chart.panels = [stockPanel1];

// create stock legend                
var stockLegend1 = new AmCharts.StockLegend();
stockLegend1.valueWidth = 100;
stockLegend1.markerType = "line";
stockPanel1.stockLegend = stockLegend1;

//legend settings
var legendSettings = new AmCharts.LegendSettings();
legendSettings.markerBorderThickness = 6;
legendSettings.markerSize = 29;
legendSettings.color = "#808285";
chart.legendSettings = legendSettings;

// OTHER SETTINGS ////////////////////////////////////
var sbsettings = new AmCharts.ChartScrollbarSettings();
sbsettings.graph = graph;
sbsettings.backgroundColor = "#d5d7d8";
sbsettings.selectedBackgroundColor = "#FFFFFF";
sbsettings.selectedGraphFillColor = "#dcdbb5";
sbsettings.color = "#808285";
sbsettings.enabled = false;
chart.chartScrollbarSettings = sbsettings;

//category settings
var catAxes = new AmCharts.CategoryAxesSettings();
catAxes.dashLength = 15;
catAxes.gridAlpha = 1;
catAxes.gridColor = "#dcddde";
catAxes.color = "#808285";

chart.categoryAxesSettings = catAxes;

chart.panelsSettings.marginRight = 50;
chart.panelsSettings.marginLeft = 50;


var catAxis = new AmCharts.CategoryAxis();
catAxis.parseDates = false;
chart.categoryAxis = catAxis;

//Changes cursor from red to green
var cursorSettings = new AmCharts.ChartCursorSettings();
cursorSettings.cursorColor = "#8e8c35";
cursorSettings.width = 3;
cursorSettings.zoomable = false;
chart.chartCursorSettings = cursorSettings;
chart.write('chartdiv');

Please let me know if you need any more information

Upvotes: 3

Views: 2043

Answers (2)

Raj Kumar
Raj Kumar

Reputation: 7136

Fixed the problem by starting the category axis from year 2000 and then adding 1. In amchart changed the setting to display the last two characters of year

var catAxes = new AmCharts.CategoryAxesSettings();
catAxes.dateFormats = [{ period: 'fff', format: 'JJ:NN:SS' }, { period: 'ss', format: 'JJ:NN:SS' }, { period: 'mm', format: 'JJ:NN' }, { period: 'hh', format: 'JJ:NN' }, { period: 'DD', format: 'DD' }, { period: 'WW', format: 'MMM DD' }, { period: 'MM', format: 'YY' }, { period: 'YYYY', format: 'YY'}];
chart.categoryAxesSettings = catAxes;

Upvotes: 1

zeroin
zeroin

Reputation: 6025

Stock chart can not work with non-date-based category axis. You can use AmXYChart instead.

Upvotes: 1

Related Questions