amcharts / amstock3

JavaScript Stock Chart V3
Other
53 stars 31 forks source link

data grouping function #6

Open cas1993per opened 6 years ago

cas1993per commented 6 years ago

Hello, i'm having an issue with amcharts javascript stock charts partically with data grouping function because i have big dat sets to display in chart and i need it to be enabled and use the default "Close value" of each groupped data points but I want it to ensure displaying the first and last data point from the PeriodSelector in the chart cause i need them to be available for postProsess calculation later on. here is a link of my current project: http://aminostudio.com/amchart/ and here is the amchart setup code var chart = AmCharts.makeChart("chartdiv", { type: "stock", theme: "light", dataSets: [{ title: "^GSPC", compared: true, fieldMappings: [{ fromField: "Close", toField: "close" }], categoryField: "Date", dataLoader: { url: "CSV/^GSPC.csv", format: "csv", showCurtain: true, showErrors: true, async: true, reverse: false, delimiter: ",", useColumnNames: true }
}], dataDateFormat: "YYYY-MM-DD", categoryAxesSettings: { groupToPeriods:["DD", "WW", "MM"], minPeriod: "DD" }, panels: [{ showCategoryAxis: true, title: "", percentHeight: 100, stockGraphs: [{ id: "g1", valueField: "close", comparable: true, compareField: "close", lineThickness: 2, balloonText: "[[title]]:[[value]]", compareGraphBalloonText: "[[title]]:[[value]]", compareGraphLineThickness: 2, }], valueAxes: [{ id: "v1", gridColor: "#FFFFFF", position: "right" } ], categoryAxis: { gridPosition: "start", /parseDates: true, equalSpacing: true, autoGridCount: false, minPeriod: "MM", categoryBalloonDateFormat: "YYYY-MM"/ }, stockLegend: { periodValueTextComparing: "[[percents.value.close]]%", periodValueTextRegular: "[[value.close]]"
} }], chartScrollbarSettings: { graph: "g1", enabled: false, updateOnReleaseOnly:false }, panelsSettings: { creditsPosition: "bottom-left" },

            chartCursorSettings: {
                valueBalloonsEnabled: true,
                valueLineEnabled:true,
                valueLineBalloonEnabled:true
            },
            periodSelector: {
                fromText: "From (DD/MM/YYYY) : ",
                toText: "To (DD/MM/YYYY) : ",
                periodsText: "",
                position: "bottom",
                periods: [{
                    period: "MAX",
                    label: "MAX DATA"
                }]
            },

            dataSetSelector: {
                position: "top"
            },
            responsive: {
                enabled: true
             },
            export: {
                enabled: true
            }, 

});

thank you in advance.

amcharts commented 6 years ago

New comment from Zendesk by Martynas Majeris on ticket 33786. (replying here will automatically notify amCharts support agent)

Hi there,

When chart groups data points, it uses aggregate value as per you settings, in this case close value.

However, the aggregate data point is placed on the first time period in the date scale. For example if you have daily data, and chart is grouping into weeks, the actual data point will be shown on Monday, even if the value is for Sunday.

You may set extendToFullPeriod: true so that full period is shown for the first and last grouped period:

http://docs.amcharts.com/3/javascriptstockchart/AmStockChart#extendToFullPeriod

Let us know if this helps.

Yours sincerely,

Martynas Majeris amCharts

cas1993per commented 6 years ago

isn't the extendToFullPeriod property by default set to true ,i also add this to my code but nothing change, thank you for your replay.

cas1993per commented 6 years ago

am i making something that interfere with this property of amChart `var chart = AmCharts.makeChart("chartdiv", { type: "stock", theme: "light", dataSets: [{ title: "^GSPC", compared: true, fieldMappings: [{ fromField: "Close", toField: "close" }], categoryField: "Date", dataLoader: { url: "CSV/^GSPC.csv", format: "csv", showCurtain: true, showErrors: true, async: true, reverse: false, delimiter: ",", useColumnNames: true }
},{ title: "^GSPTSE", compared: true, fieldMappings: [{ fromField: "Close", toField: "close" }], categoryField: "Date", dataLoader: { url: "CSV/^GSPTSE.csv", format: "csv", showCurtain: true, showErrors: true, async: true, reverse: false, delimiter: ",", useColumnNames: true }
},{ title: "^DJI", compared: true, fieldMappings: [{ fromField: "Close", toField: "close" }], categoryField: "Date", dataLoader: { url: "CSV/^DJI.csv", format: "csv", showCurtain: true, showErrors: true, async: true, reverse: false, delimiter: ",", useColumnNames: true }
},{ title: "^IXIC", compared: true, fieldMappings: [{ fromField: "Close", toField: "close" }], categoryField: "Date", dataLoader: { url: "CSV/^IXIC.csv", format: "csv", showCurtain: true, showErrors: true, async: true, reverse: false, delimiter: ",", useColumnNames: true }
},{ title: "^RUA", compared: true, fieldMappings: [{ fromField: "Close", toField: "close" }], categoryField: "Date", dataLoader: { url: "CSV/^RUA.csv", format: "csv", showCurtain: true, showErrors: true, async: true, reverse: false, delimiter: ",", useColumnNames: true }
}], dataDateFormat: "YYYY-MM-DD", categoryAxesSettings: { groupToPeriods:["DD", "WW", "MM"], minPeriod: "WW" }, panels: [{ showCategoryAxis: true, title: "", percentHeight: 100, stockGraphs: [{ id: "g1", valueField: "close", comparable: true, compareField: "close", lineThickness: 2, balloonText: "[[title]]:[[value]]", compareGraphBalloonText: "[[title]]:[[value]]", compareGraphLineThickness: 2, }], valueAxes: [{ id: "v1", gridColor: "#FFFFFF", position: "right" } ], categoryAxis: { gridPosition: "start", parseDates: true, equalSpacing: true, autoGridCount: true, minPeriod: "MM", categoryBalloonDateFormat: "YYYY-MM" }, stockLegend: { periodValueTextComparing: "[[percents.value.close]]%", periodValueTextRegular: "[[value.close]]"
} }], chartScrollbarSettings: { graph: "g1", enabled: false, updateOnReleaseOnly:false }, panelsSettings: { creditsPosition: "bottom-left" },

            chartCursorSettings: {
                valueBalloonsEnabled: true,
                valueLineEnabled:true,
                valueLineBalloonEnabled:true
            },
            periodSelector: {
                fromText: "From (DD/MM/YYYY) : ",
                toText: "To (DD/MM/YYYY) : ",
                periodsText: "",
                position: "bottom",
                periods: [{
                    period: "MAX",
                    label: "MAX DATA"
                }]
            },

            dataSetSelector: {
                position: "top"
            },
            responsive: {
                enabled: true
             },
            export: {
                enabled: true
            }, 
            extendToFullPeriod: true,
        });`