CODEWITHSUNDEEP
javascriptamcharts
DarkCid
DarkCid

Reputation: 227

Amcharts' stockchart : lines in javascript too simple versus old flash version

I have to update an old amcharts' stockchart in the flash version to the javascript version. I made it, but the result is too different for my client.

The flash version : The old graph

The new javascript version : The new graph

As you can see, the graph's lines on the new version are really too simple compare to the old version, there isn't enough details.

This is the code of the new graph :

var chart = new AmCharts.AmStockChart();
chart.dataSets = dataSets;

var stockPanel = new AmCharts.StockPanel();
stockPanel.showCategoryAxis = true;
stockPanel.numberFormatter = {precision:2, decimalSeparator:',', thousandsSeparator:' '};
stockPanel.percentFormatter = {precision:2, decimalSeparator:',', thousandsSeparator:' '};


var graph = new AmCharts.StockGraph();
graph.valueField = 'value';
graph.openField = 'open';

graph.closeField = 'close';
graph.comparable = true;
graph.type = 'line';
graph.minDistance = 0;
graph.noStepRisers = true;
graph.clustered = false;

stockPanel.addStockGraph(graph);

var stockLegend = new AmCharts.StockLegend();
stockLegend.markerType = 'bubble';
stockLegend.markerSize = 8;
stockLegend.periodValueText = '[[value.close]]';
stockLegend.valueTextComparing = '[[value]] | [[percents.value]]%';
stockLegend.periodValueTextComparing = '[[value.close]] | [[percents.value.close]]%';
stockLegend.horizontalGap = 1;
stockLegend.spacing = 100;

stockPanel.stockLegend = stockLegend;


chart.panels = [ stockPanel ];

var categoryAxesSettings = new AmCharts.CategoryAxesSettings();

chart.categoryAxesSettings  = categoryAxesSettings;


var scrollbarSettings = new AmCharts.ChartScrollbarSettings();
scrollbarSettings.color = '#000';
scrollbarSettings.gridColor = '#fff';
scrollbarSettings.backgroundColor = '#fff';
scrollbarSettings.gridColor = '#fff';
scrollbarSettings.graphFillColor = '#F5F5F5'; //jsonData.funds.color;
scrollbarSettings.selectedGraphFillColor = '#CCDDE9';
scrollbarSettings.selectedBackgroundColor = '#fff'
scrollbarSettings.graph = graph;
scrollbarSettings.graphType = 'line';
scrollbarSettings.usePeriod = "MM";


chart.chartScrollbarSettings = scrollbarSettings;

var periodSelector = new AmCharts.PeriodSelector();
periodSelector.position = 'top';
periodSelector.fromText = '';
periodSelector.toText = ' - ';
periodSelector.periodsText = '';
periodSelector.dateFormat = 'DD/MM/YYYY';
periodSelector.periods = [
    { period: 'MM', count: 1, label: '1M' },
    { period: 'MM', count: 3, label: '3M' },
    { period: 'YYYY', count: 1, label: '1Y' },
    { period: 'YYYY', count: 3, label: '3Y' },
    { period: 'YYYY', count: 5, label: '5Y' },
    { period: 'YTD', label: 'YTD' },
    { period: 'MAX', label: 'MAX' }
];
chart.periodSelector = periodSelector;

chart.write('fund_historic');

Which parameter do I have to add or change ? Thanks

Upvotes: 1

Views: 175

Answers (1)

DarkCid
DarkCid

Reputation: 227

OK I found it. When I compared the flash settings file, I see the max_series parameter fixed to 300, the double of the default value of the javascript version.

So this is the solution :

var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
categoryAxesSettings.maxSeries = 300;
chart.categoryAxesSettings  = categoryAxesSettings;

Upvotes: 1

Related Questions