I noticed that the price is not displayed correctly.
I set 0.123456 but see on chart just 0.12
Please give me some advices.
Thanks
Copied from https://github.com/tradingview/lightweight-charts/discussions/697#discussioncomment-348803:
To change format of your series' data you need to override price format for your series by changing/applying options.
For example, if you'd like to show 6 digits after a comma you can use the following options:
series.applyOptions({
priceFormat: {
type: 'price',
precision: 6,
minMove: 0.000001,
},
});
Related
I am trying to create a comparison graph like the one below which will show the data of the current day vs the present day minus 7 days (or 20 days or 90 days, ...).
I am using highcharts and highchart's react wrapper for this and I've created a multi line graph using the following data:
series: [
{
name: "Weekly",
data: [
24916, 37941, 29742, 29851, 32490, 30282, 38121, 36885, 33726, 34243,
31050,
],
},
{
name: "Weekly Last Week",
data: [
11744, 30000, 16005, 19771, 20185, 24377, 32147, 30912, 29243, 29213,
25663,
],
dashStyle: "ShortDash",
},
]
I am able to create the same solid and dashed line effect. The only issue I am facing is how to show the tooltip (as shown in the image below) with the current date vs last date data and their comparison. I used this tooltip option:
tooltip: {
enabled: true,
shared: true,
formatter: function () {
return this.points.reduce(function (s, point) {
return s + "<br/>" + point.series.name + ": " + point.y + "m";
}, "<b>" + this.x + "</b>");
},
},
I was able to recreate it based on the design requirement we had. Here is the link to the codesandbox (minus the proper design for tooltips and legends) for anyone looking for it in the future.
The tooltip's functionality was achieved by adding the formatter function in the tooltip option (found in the chartOptions.js file in the sandbox). It's a hacky code but it is needed to calculate the percentage change between the current day's data vs last week's (present-day minus 7 days) data. In my current case, all data is restricted to 7 days for the time being.
For creating the legend which shows the same percent change data I need to add an empty series in the series data (found in the chartOptions.js file) which will store the calculated value of the percent change of the last day (basically the last value in the array).
If anyone has a better solution for consuming data inside the formatter function of the tooltip or legends then please add it to the answer to this question.
I want to show stacked area chart using amCharts, anything else worked as well but date on it was parsed incorrectly.
"dataProvider": [{
"date": 1482192000,
"cars": 1587,
"motorcycles": 650,
"bicycles": 121
}
Property named as date on above data package cannot be converted to readable date like "DD/MM/YYYY"
Finally, the chart must show 30 days of chosen month.
Here is my CodePen: CodePen Stacked Area Chart
Your data and setup are both incorrect. Here's a list of what's wrong and how to fix them
1) dataDateFormat is used for parsing string dates, not formatting them. Since you're using unix timestamps, you don't need this property at all, so you can remove it.
2) Your unix timestamps must also be in milliseconds in order for this to work. Seconds will give you invalid times.
3) Your data must be sorted in ascending date order for it to render correctly. Your data is currently in mixed order.
As for your other questions:
To format your dates, you have to set the dateFormats array in your categoryAxis to the desired format strings as described here. For DD/MM/YYYY:
"categoryAxis": {
// other properties omitted:
"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/MM/YYYY'}, //you may need to change the entries for 'WW' and 'MM' as well, depending on the amount of visible data
{period:'WW',format:'MMM DD'},
{period:'MM',format:'MMM'},
{period:'YYYY',format:'YYYY'}]
// ...
}
To automatically zoom on chart load, you can add a rendered event similar to how the demos on the AmCharts website does it and call any of the zoom methods, for example:
"listeners": [{
"event": "rendered",
"method": function(e) {
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
e.chart.zoomToDates(new Date(2017, 1, 1), new Date(2017, 1, 15));
}
}]
Here's an updated codepen with all of the aforementioned fixes here.
I am stuck with http://www.amcharts.com/demos/multiple-data-sets/#theme-none, the creators of the graphic just put a random numbers to fill it, but I would like to load a CSV file which they have a plugin http://www.amcharts.com/demos/stock-
However, the second graphic is only for
"Stock" and financial purposses I would like to have the first one populated with a cvs file so I can compare more than 2 datasets.
Can someone help me? I will really appreciate it.
I need to read a little bit more, but I figured it out and Amcharts provides a lot of guide they are really nice and patience.
Below it's a pastie where you can find the whole solution.
this is a brief explanation:
{
title: 'Title',
fieldMappings: [ { // here you set the fields your chart will display
fromField: 'col1', // col1 because my csv has only 3 columns the first one contains the data
toField: 'value' // shows the value
}, {
fromField: 'col2', // this is the volume to display under the main graphic and that data is on column2
toField: 'volume' //
} ],
categoryField: "col0", // this is the category which it's display in this case i am using dates so it will display dates and my dates are in column 0 or column "A" in my csv file.
dataLoader: { / this is the plugin
url: "data/data2.csv", // the address
showCurtain: true, // widgets of the pluging
showErrors: true, // if there is an error loading amcharts will tell you
delimeter:"\t", // my csv is not delimited by "," but tabs.
format: "csv",
reverse:true // this is what sort of order you have your data, in my case from Z to A or major to minor.
}
here it't the code:
http://pastie.org/private/bwhvpnb6j8o1jv86cfsg
I have done application using Extjs 4.1. I have plotted line graph, in this x-axis date format is not coming proper. I have defined fromdate, todate and date format, but duplicating December month, Feb month is not coming. line is plotting proper. for more reference have attached images. Can any body tell me how to resolve this issue?. Great appropriated. Thank you.
Code is here:
{
type:'Time',
step: [Ext.Date.MONTH,1] ,
position:'bottom',
fields:['Month'],
fromDate: new Date('12/1/12'),
toDate: new Date('6/1/13'),
grid: true,
dateFormat: 'M Y',
constrain: true,
}
You can try to change the label orientation to have it displayed verticaly, thus giving more space to display intermediate labels.
You can add a section 'label' do this:
label: {
rotate: {degrees: 270}
},
I am trying to create a timefield combo box with extJS. I have done this successfully but now I have a problem when I get the value that I select in the combo box.
First the code for making the timefield:
items :[{
fieldLabel: 'Start Time',
name: 'startTime',
xtype: 'timefield',
id: 'startTime',
format: 'H:i',
altFormats:'H:i',
increment: 30
}]
What I want is to get the value in a 24h format. In order to get the value from the time field I use this code:
var startTime = Ext.getCmp('startTime').getSubmitValue();
The problem is that instead of getting the time in 24hour format, the values are transformed into 12 hours format. For example, while I select from the combo the time: 00:00 when I use getSubmitValue() the value is transformed into 12:00 AM, which is not very useful in my case.
My question is: Is there a way to keep the format of the time exactly how it is in the combo box? That would be a 24hour format.
I hope it's clear what I am trying to say.
Thanks
Dimitris
The reason is simple.
getValue returns date object, getSubmitValue returns formatted date.
You just need to format a date received by getValue method.
var field = Ext.getCmp('startTime');
var value = field.getValue();
var formattedValue = Ext.Date.format(value, 'H:i');
Sample here
I found out that if I use the:
var startTime = Ext.getCmp('startTime').getRawValue();
I retrieve the time in 24 format.