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
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 am using API's to receive multiple row data from a particular user, my doubt is how one can display that data in react using AG-Grid format.
this.setState
({
data: res.data,
columnDefs: [
{
headerName: " CreateDate", field: " CreateDate"
}, {
headerName: "Task Name", field: "TaskName"
}],
rowData:[{
//facing errors while assigning these values
TaskName : data.TaskName,
CreateDate : data[0].CreateDate
}]
})
Hi Aboli I am sharing stackblitz which will help you to do what you are trying to achieve.
I have assumed a lot about your data object since we dont know much about it. usually data should come in key value pair where keys matches to the field name which you have defined in your coldef object so that ag-grid can consume it directly.
But sometimes we need to sanitize data so that it matches with the way column field have been defined. feel free to ask more question and try to be a bit elaborative with code so that you can get solution faster.
here is the stackblitz example.
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 have a table with a location column and "count" column (with values from 1 to 100).
I'd like to map the records with markers that change in size, i.e. the bigger the count value is, the bigger the marker is.
Is that possible in Google Fusion? How would you suggest to do that?
Thanks.
Currently there are only 2 sizes of icons available: small and large, I put together a little example to show you how to use them together with the FusionTablesLayer, which is a special layer for Google Maps that can use to query your Google Fusion Tables.
FusionTablesLayer allow you apply a style to your data (markers, lines or polygons), it boils down to this:
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: '3609183'
},
styles: [
{ where: "Number > 1000",
markerOptions: {
iconName: 'large_green'
}
},
{ where: "Number <= 1000",
markerOptions: {
iconName: 'large_red'
}
},
{ where: "Number <= 100",
markerOptions: {
iconName: 'small_purple'
}
}
]});
If two sizes are not enough, then maybe you can play around with different colors/icons (there is a list with supported icons). Otherwise you have to retrieve your data and create custom markers with images of different size.
Javram pointed to one approach, but the list of available marker icons is limited in Fusion Tables and AFAIK there is no way to vary the icon size. Another approach might be to use the JSONP support provided by Fusion Tables to retrieve you your data and create your own makers. This blog post explains how to do it.
The answer is here, http://support.google.com/fusiontables/bin/answer.py?hl=en&answer=185991 basically, you need to add a column in your table that is the name of the marker type you want to use for that location.
I am having trouble figuring out what I need to do to load the columns for an ExtJS grid dynamically. I want to be able to send the column headers as JSON and have the grid take that and generate the columns needed.
More specifically, I am wanting to do this using the GroupingHeader plugin, but I really just want to figure out how to do it without the added complexity of the GroupingHeader plugin first and then I can tackle that problem :)
Here is some sample JSON data that I have for the column headers:
[
{
"run_id":"110207gad",
"iterations":[
"1_14",
"2_16",
"3_18",
"4_20",
"5_22"
]
},{
"run_id":"110207gae",
"iterations":[
"1_14",
"2_16",
"3_18",
"4_20",
"5_22"
]
}
]
This is the data that I would need to do the grouping, where the run_id would be the grouped header and the iterations would be the column headers. Right now, I'm happy just getting the iterations to show up as columns and then I can work on getting the grouping to work.
If anyone could point me in the right direction or give me some hints on where to begin, that would be extremely helpful! I'm not beyond figuring this out on my own, but I just need a little bump to get started because I can't seem to figure out from looking at the ExtJS examples and doing some Google searches.
I suggest you look at the source code of the ExtJS example.
http://dev.sencha.com/deploy/dev/examples/grid/array-grid.js
It should give you a fair amount of information to get started.
You can start from this format, pass it from your server:
{"success":true,"message":"Loaded data","data":[{"run_id":1,"iterations":"1"},{"run_id":2,"iterations":"2"},{"run_id":3,"iterations":"3"}]}
Then your reader will look like this:
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'run_id',
root: 'data',
messageProperty: 'message'
}, [
{name: 'run_id'},
{name: 'iterations', allowBlank: false}
]);