amcharts / amstock3 Goto Github PK

View Code? Open in Web Editor NEW

53.0 11.0 31.0 9.59 MB

JavaScript Stock Chart V3

License: Other

JavaScript 96.24% HTML 2.97% CSS 0.78%

amstock3's Introduction

amstock3

An official repository for amCharts JavaScript Stock Chart V3 (free version).

Getting support

Important! For questions regarding usage of this product, please email at [email protected]

The issue tracker on GitHub is not being continuously monitored by amCharts support staff, so your questions might take longer to respond to here.

Installing

Using npm

npm install amstock3

Using bower

bower install amstock3

Usage

Include amcharts.js, serial.js, and amstock.js on your web site:

<script src="/bower_components/amstock3/amcharts/amcharts.js"></script>
<script src="/bower_components/amstock3/amcharts/serial.js"></script>
<script src="/bower_components/amstock3/amcharts/amstock.js"></script>

License

This amCharts software is free under a linkware license.

This means you may not remove or hide in any other way link to amCharts web site - www.amcharts.com.

If you wish to remove the link, you should purchase commercial license.

You may not redistribute, sublicense or sell this program without written permission of Antanas Marcelionis, the author of amcharts software.

This software is provided without warranty.

Commercial license

To purchase a commercial license for the current version of this library, visit amCharts Online Store

More info

Visit amCharts website for more information and documentation.

Contact us

Email: [email protected]
Web: http://www.amcharts.com/
Facebook: https://www.facebook.com/amcharts
Twitter: https://twitter.com/amcharts

amstock3's People

Contributors

Stargazers

Watchers

amstock3's Issues

Zoom selection getting removed

Zoom selection getting removed after new datasets validate for new line

Unable to create new AM CHART instance once it clear

I am clearing am chart as per requirement and after it get cleared ,unable to create it again.it throws as error
`
refreshButtonClickEvent() {
this.priceChart.clear();
}
plotGraph() {
if(!this.priceChart) {
console.log("new graph");
console.log( this.priceChart);
this.graphconfig.dataSets[0].dataProvider=data;
let ele=document.getElementById("chartdiv");
this.priceChart=this.AmCharts.makeChart(ele,this.graphconfig);
}
else {
this.AmCharts.updateChart(this.priceChart, () => {

      this.priceChart.dataSets[0].dataProvider= this.priceChart.dataSets[0].dataProvider.concat(data);
      this.priceChart.ignoreZoom = true;
      this.priceChart.validateData();             
     console.log("update graph");
   
   
    });

}

}
when i reinitialized am chart following error comes

How to know which period is selected currently?

I am using stock chart to plot market data. Iam using php and ajax to get chart data to plot candle chart. The chart refreshes every 10 seconds. I want to pass the current zoom level and get corresponding values for plotting chart. I want to know the last clicked period selector button and its label. Is that possible?

Below is my current chart. Also I want to change group of buttons into a select ?

Extra ballons in compare mode

I have 4 stock graphs that I want to compare together. When I try to set a ballon properties for them I always get some redundant one.

My first idea was to specify only one StockGraph object but this lead to one extra ballon object.

 let chart = window.AmCharts.makeChart("chartdiv", {
          "path": AmCharts_path,
          "type": "stock",
          "theme": "light",

          "dataSets": portfolioData.map(function (port) {
            return {
              "title": port.name,
              "fieldMappings": [{
                "fromField": "value",
                "toField": "value"
              }],
              "dataProvider": port.data,
              "compared": true,
              "categoryField": "date"
            }
          }),

          "panels": [{
            "showCategoryAxis": false,
            "title": "Value",
            "percentHeight": 70,
            "stockGraphs": [
              {
                "id": "g1",
                "valueField": "value",
                "comparable": true,
                "compareField": "value",
                "balloonText": "Smart Gloabal A-[[title]]:<b>[[value]]</b>",
              }
             ]
          }],

          "chartScrollbarSettings": {
            "graph": "g1"
          },

          "chartCursorSettings": {
            "valueBalloonsEnabled": true,
            "fullWidth": true,
            "cursorAlpha": 0.1,
            "valueLineBalloonEnabled": true,
            "valueLineEnabled": true,
            "valueLineAlpha": 0.5
          },

          "listeners": [{
            "event": "zoomed",
            "method": this.calulateMetrics
          }],

Then I decided to remove ballonText property. But still this extra object exist.

        "stockGraphs": [
          {
            "id": "g1",
            "valueField": "value",
            "comparable": true,
            "compareField": "value",
            //"balloonText": "A-[[title]]:<b>[[value]]</b>",
            "compareGraphBalloonText": "B [[title]]:<b>[[value]]</b>"
          }
         ]

Then I decided to describe logic for every graph, but this only increased number of my of my objects.

        "stockGraphs": portfolioData.map(function (port, idx) {
          return {
           "id": "g"+(idx+1),
            "valueField": "value",
            "comparable": true,
            "compareField": "value",
            "balloonText": "A-[[title]]:<b>[[value]]</b>",
            "compareGraphBalloonText": "B [[title]]:<b>[[value]]</b>"
          }
        }),

I tried to follow examples fros the official website but didn't find relevant one.

Dymamically disable export option of stock chart

I m working on stock chart.my requirement is to show hide export option of stock chart.
Currently i have written property of export to false or true and calling updateNow function.but not working

d.clear is not a function

I am using Multipanel chart with react using amCharts-react.

My Multipanel chart works fine during first load.

But i also get this error, How do i fix this error?

Exception has occurred: TypeError
TypeError: d.clear is not a function

Here is my Exact code , for normal charts everything works, but amStock always have this issue,

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { autobind } from 'core-decorators';

import AmCharts from '@amcharts/amcharts3-react';
import { allEventsQuery } from './queries';
import css from './issueDetails.scss';

require('amstock3/amcharts/amstock');

const config = {
type: 'stock',
theme: 'light',
dataSets: [
{
title: 'first data set',
fieldMappings: [
{
fromField: 'value',
toField: 'value',
},
{
fromField: 'volume',
toField: 'volume',
},
],
dataProvider: [
{ date: '2016-05-17T07:00:00.000Z', value: 109 },
{ date: '2016-05-18T07:00:00.000Z', value: 114 },
{ date: '2016-05-19T07:00:00.000Z', value: 138 },
{ date: '2016-05-20T07:00:00.000Z', value: 113 },
{ date: '2016-05-21T07:00:00.000Z', value: 145 },
{ date: '2016-05-22T07:00:00.000Z', value: 141 },
{ date: '2016-05-23T07:00:00.000Z', value: 150 },
{ date: '2016-05-24T07:00:00.000Z', value: 110 },
{ date: '2016-05-25T07:00:00.000Z', value: 153 },
{ date: '2016-05-26T07:00:00.000Z', value: 134 },
],
categoryField: 'date',
},
{
title: 'second data set',
fieldMappings: [
{
fromField: 'value',
toField: 'value',
},
{
fromField: 'volume',
toField: 'volume',
},
],
dataProvider: [
{ date: '2016-05-17T07:00:00.000Z', value: 233 },
{ date: '2016-05-18T07:00:00.000Z', value: 260 },
{ date: '2016-05-19T07:00:00.000Z', value: 229 },
{ date: '2016-05-20T07:00:00.000Z', value: 248 },
{ date: '2016-05-21T07:00:00.000Z', value: 240 },
{ date: '2016-05-22T07:00:00.000Z', value: 291 },
{ date: '2016-05-23T07:00:00.000Z', value: 223 },
{ date: '2016-05-24T07:00:00.000Z', value: 213 },
{ date: '2016-05-25T07:00:00.000Z', value: 213 },
{ date: '2016-05-26T07:00:00.000Z', value: 227 },
],
categoryField: 'date',
compared: true,
},
],
panels: [
{
showCategoryAxis: false,
title: 'Value',
stockGraphs: [
{
id: 'g1',
valueField: 'value',
comparable: true,
compareField: 'value',
lineThickness: 2,
balloonText: '[[title]]:[[value]]',
compareGraph: {
lineThickness: 2,
balloonText: '[[title]]:[[value]]',
},
},
],
stockLegend: {
periodValueTextComparing: '[[percents.value.close]]%',
periodValueTextRegular: '[[value.close]]',
},
},
],
chartScrollbarSettings: {
graph: 'g1',
},
chartCursorSettings: {
valueBalloonsEnabled: true,
fullWidth: true,
cursorAlpha: 0.1,
valueLineBalloonEnabled: true,
valueLineEnabled: true,
valueLineAlpha: 0.5,
},
periodSelector: {
position: 'bottom',
periods: [
{
period: 'MM',
selected: true,
count: 1,
label: '1 month',
},
{
period: 'YYYY',
count: 1,
label: '1 year',
},
{
period: 'YTD',
label: 'YTD',
},
{
period: 'MAX',
label: 'MAX',
},
],
},
};

<div className={css.mainContainer}> <AmCharts.React style={{ width: '100%', height: '500px', }} options={config} /> </div>

data grouping function

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: Cursor can't access the last day of the period

When I zoom my chart sometimes the data in the last day is not accessible for cursor. I'm not sure whether it is a bug or an expected behaviour.

It is mostly the case when the endDate hasn't reached the middle of the day.
For example in the graph below when I listen to the zoomed event I observe the following result of event.endDate - Tue Jul 24 2018 03:54:25

But if I drag the slide a bit - the data for this date become accessible. I understand that the data is rendered in the graph, but I'm not able to reach it.
For my task it is crucial to have the same data in the date input field and the last accessible in the chart.

Is it possible to adjust the cursor to the nearest date? I'll be confident if I can move only though days with specified hours, like Tue Jul 24 2018 22:00:00 ( 22:00:00 for every day, passing all other dates)
Is it possible to add some margin from the right in order the cursor can access the data? Now the graph is very close the edge of the block and so the cursor can't catch the line.

I'll appreciate any advice

The reproduction code is here

                labelFunction: function (valueText, date, categoryAxis) {
                    return formatDateToCurrentCulture(date);
                }
            }

@martynasma @amcharts

bower.json missing entries for amcharts.js and serial.js

When we run grunt server, the bower-install phase removes amcharts.js and serial.js due to which the loading of graphs fail.

Cannot read property 'hideDrawingIcons' of null

I am using Horizon chart with react using amCharts-react.

My Horizon chart works fine during first load.

On same page, using click event when reinvoked for different data, chart throws this below error. I just copied what you have in your horizon chart example.

index.js:formatted:41741 Uncaught TypeError: Cannot read property 'hideDrawingIcons' of null
at b.getSelections (index.js:formatted:41741)
at b.updateDataSets (index.js:formatted:40767)
at b.afterWrite (index.js:formatted:40738)
at b.write (index.js:formatted:40705)
at Object.d.makeChart (amcharts.js:11)
at Object.componentDidMount (index.js:formatted:40613)
at Object.chainedFunction [as componentDidMount] (index.js:formatted:47573)
at react-dom.js:4726
at measureLifeCyclePerf (react-dom.js:4537)
at

AM STOCK chart label overlapping when move scroll left to right

I am working on AM chart which showing data per milliseconds .but when i move scroll left to right,labels overlaps on each other.
this is my code
`{
type: "stock",
theme: "none",
categoryAxis:{
showFirstLabel:true,
showLastLabel:true,
gridPosition: "start",
gridAlpha: 1,
tickPosition: "start",
tickLength: 20,
autoGridCount :true,
centerLabels:true,
fontSize:15,
glueToTheEnd:true,
zoomOutOnDataSetChange:true,
dateFormats:[{"period":"fff","format":"JJ:NN:SS.QQQ"},{"period":"ss","format":"JJ:NN:SS"},{"period":"mm","format":"JJ:NN"},{"period":"hh","format":"JJ:NN"}],
},
valueAxesSettings :{
gridThickness:1,
axisColor:"#FFFFFF",
showLastLabel:true,
axisThickness:1,
inside:false,
axisAlpha:1,
unitPosition:"left",
tickLength:1,
labelRotation:-90,
},
categoryAxesSettings: {
minPeriod:"fff",
groupToPeriods:["fff"],
color:"#FFFFFF",
axisColor:"#FFFFFF",
axisAlpha:1,
dateFormats:[{"period":"fff","format":"JJ:NN:SS.QQQ"},{"period":"ss","format":"JJ:NN:SS"},{"period":"mm","format":"JJ:NN"},{"period":"hh","format":"JJ:NN"}],
equalSpacing:true,
gridPosition: "start",
gridAlpha: 1,
tickPosition: "start",
tickLength: 5,
inside:false,
fontSize:15,

} ,
dataSets: [ {
  color: "white",
  fieldMappings: [ {
    fromField: "MRFILLPRICE",
    toField: "MRFILLPRICE"
  }     
],
 dataProvider:[],
  categoryField: "MRJIFFYTMST",      
   stockEvents: []
} ],


panels: [ {
   
  title: "Price",
  marginTop:100,
  autoMargins:false,
  percentHeight:60,
  showCategoryAxis: true,
  valueAxes: [{
    position: "left",        
    id:"p1",              
    inside:false,     
    color: "#FFFFFF", 
    axisColor:"green", 
    axisAlpha:1,
    title:"Price",
    axisThickness:5,   
    minMarginTop:20,
    marginTop:20,             
    labelOffset:3,
    labelRotation:-90, 
    maximum:0,
    minimum:0,
    fontSize:15,
    "useDataSetColors": false,      
  },     
],
  stockGraphs: [ {
    id: "g1",
    valueField: "MRFILLPRICE",
    showAllValueLabels:true,
    valueAxis:"p1",
    type: "smoothedLine",
    lineThickness: 1,
    bullet: "round",   
    bulletAlpha:0,
    // forceGap:true,
    bulletSize:0,
    balloonColor:"white",
    lineColor: "red",
    showBalloon:true,
    
    balloonText:"Time:<b>[[tm]]</b><br> Price:-<b>[[MRFILLPRICE]]</b>",
    
    gapPeriod:5,
    "useDataSetColors": false,       
  } ],
  stockLegend: {
    valueTextRegular: " ",
    markerType: "square"
}
} ],
stockLegend: {

},
chartScrollbarSettings: {
  graph: "g1",     
  offset:10,
  enable:false,
  autoGridCount:true,
  position:"top"
},
chartScrollbar:{
    offset:200,
    updateOnReleaseOnly: true,
    autoGridCount:true
},
chartCursorSettings: {
  valueBalloonsEnabled: true,
  graphBulletSize: 1,
  valueLineBalloonEnabled: true,
  valueLineEnabled: true,
  valueLineAlpha: 0.5,
  enabled:false,
  categoryBalloonDateFormats: [{
    period: "fff",
    format: "NN:SS:QQQ"
}]
},        
panelsSettings: {
  usePrefixes: true,
  marginLeft:60,      
  marginTop:10, 
},   
export: {
    enabled: true,
    position: "bottom-right"
},
listeners: [ {
    event: "dataUpdated",
    method: function(event) {
      console.log("data updated");
    }
  } ]

}
}

`