I have a situation similar to the example shown in http://c3js.org/samples/data_json.html My simple intention is to get the name of the row (i.e. 'www.site1.com') into the tooltip header. My problem: I cannot find it in the d-values.
Can anyone help?
You cannot find it in d-values, because it's not a value actually - it's a category.
Have a look at Category Axis example, maybe it helps you:
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
]
},
axis: {
x: {
type: 'category',
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9']
}
}
});
I solved it by using the d-value to address the right category of my JSON, or rather the array in my JSON. (Seemed more complicated since I load the data after I create the chart.)
Related
I am currently working on a project for my company, where I need to plot highstock charts, which show energy-data of our main buildings.
Since it is live data, new datapoints come per Websocket every few-or-so seconds. However, the graph should only show one datapoint every hour. I wanted to clear this with the highstock dataGrouping, but it does not really work. It groups the points yes, but it still shows the „transmission“, the graph-line, between them. Thus making the whole graph completely irreadable.
In an other Version of the project, the graph only shows the latest datapoint of each group (as specified in the „approximate“ object in the chart options), but also does not start a new group after the chosen Interval runs through.
I've been sitting on this problem for about 3 days now and have not found any proper completely working solution yet.
Unfortunately, due company policy and due to hooks and components necessary, which are only used here in the company, I'm not able to give you a jsfilddle or similar, even though I'd really love to. What I can do is give you the config, mabye you find something wrong there?
const options = {
plotOptions: {
series: {
dataGrouping: {
anchor: 'end',
approximation: function (groupData: unknown[]) {
return groupData[groupData.length - 1];
},
enabled: true,
forced: true,
units: [['second', [15]]],
},
marker: {
enabled: false,
radius: 2.5,
},
pointInterval: minutesToMilliseconds(30),
pointStart: currentWeekTraversed?.[0]?.[0],
},
},
}
This would be the plotOptions.
If you need any more information, let me know. I'll see then, what and how I can send it to you.
Thank you for helping. ^^
This is example how dataGrouping works with live data,
try to recreate your case in addition or use another demo from official Highcharts React wrapper page.
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 15,
text: '15S',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['second', [15]]
]
}
}, {
type: 'hour',
count: 1,
text: '1M',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['minute', [1]]
]
}
}
},
Demo: https://jsfiddle.net/BlackLabel/sr3oLkvu/
I am trying to take the data from an added layer and add it as the country-label on a stock map (in this case, Dark V 10).
Here is the code that allows me to add the data (EatPlace) from my added layer as a SEPARATE label (Works, but NOT what I want):
map.on('load', function() {
map.addSource('CEVectorSource', { //The link to your tileset
'type': 'vector',
'url': 'mapbox://xxxxx.xxxxxxxxxxxxxxxxxxx'
});
map.addLayer({
"id": "CountriesEatenNames",
"type": "symbol",
"source": "CEVectorSource",
"source-layer": "CEVectorsTileset",
"filter": ["all",["match", ["geometry-type"], ["Point"], true, false]],
"layout": {
"text-field": ['format',
['upcase', ['get', 'EatPlace']], { 'font-scale': .8 },
'\n', {},
['get', 'EatDate'], { 'font-scale': .6 }],
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
//"text-allow-overlap": true,
"text-variable-anchor": ['top', 'bottom', 'left', 'right']
},
"paint": {
"text-color" : 'rgb(255, 221, 153)' // Text Color
}
});
});
Here is the code that lets me modify the labels I want to modify:
map.setLayoutProperty('country-label', 'text-field',
['get', 'name_en'])
Here is what has NOT worked:
map.setLayoutProperty('country-label', 'text-field',
['get', 'EatPlace'])
I have no luck combining these concepts. Any help would be divine.
If I understand you correctly, you have a country tileset of points, a places tileset of points, and you want to display for each country point a piece of text deriving from the places tileset.
That isn't going to work. How would Mapbox-GL-JS know which country point to associate with a given place point? You will need to find some way to combine them into one layer first.
I have an AmChart that I want to appear in an md-dialog. It's passed a JSON dataProvider and yet nothing appears.
dialog.tmpl.html:
<md-dialog aria-label="Project Zone Chart">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Project Zone Chart</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="closeDialog()">
<md-icon aria-label="Close dialog">close</md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<p><div id="projZoneChart" style="width: 100%; height: auto;"></div></p>
</md-dialog-content>
</md-dialog>
controller.js:
var projZoneChartOps = {
type: "serial",
valueAxes: [{
minorGridAlpha: 0.08,
minorGridEnabled: true,
position: "top",
gridAlpha: 0,
precision: 0
}],
startDuration: 1,
graphs: [{
type: "column",
fillAlphas: 1,
lineAlpha: 0,
valueField: "value",
colorField: "color",
lineAlpha: 0
}],
rotate: true,
categoryField: "metric",
categoryAxis: {
gridPosition: "start",
parseDates: false,
gridAlpha: 0
}
};
createChart($scope.chartdata, projZoneChartOps);
function createChart(chartData, chartOps){
$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);
$scope.projZoneChart.dataProvider = chartData;
However nothing appears in the dialog at all. Is there a problem with my chartOps?
Note: the chartData variable is a JSON object with two fields, startOfWeek (supposed to be the x-axis) and metric (supposed to be the y-axis)
There are a few issues/comments:
1) Why aren't you assigning the data to the chartOps object before calling makeChart?
chartOps.dataProvider = chartData;
$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);
This will actually make the chart start off with your data. The way you're doing it will require that you call validateData() on your chart object after manually setting the dataProvider, which is unnecessary overhead compared to including it directly in makeChart.
$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);
$scope.projZoneChart.dataProvider = chartData;
$scope.projZoneChart.validateData(); //required if you're doing it this way but unneccessary overhead compared to simply including it inside of makeChart directly as you're essentially remaking the chart after you create it for the sake of rendering your data.
2) Make sure your *field properties match. startOfWeek isn't mentioned in your chart config at all, even though you're saying it's in your JSON data. Your valueField is set to "value" - you might want to set it to "startOfWeek" instead unless you're modifying your JSON object somewhere else.
3) Displaying charts inside a modal or other dynamic/hidden elements typically require that you call the chart object's invalidateSize method when the modal/tab/etc containing the chart is visible so that it will render correctly. You'll want to check for whatever event md-dialog offers to determine when it is visible before calling $scope.projZoneChart.invalidateSize().
Is there a way to implement new milestones via data feed from database? I checked the example below but couldn't figure out
https://www.amcharts.com/kbase/time-line-chart-date-based-milestones/
I use "dataLoader" to feed the values into graphs I can just create a new column in my table for the milestones question is how to update it?
The milestones in that example are guides, so they don't normally get updated in any process that modifies the chart's dataProvider. You can use the complete callback to create/update your chart guides:
AmCharts.makeChart("chartdiv", {
// ...
dataLoader: {
url: "...",
complete: function(chart) {
//add/modify guide objects through chart.valueAxes[0].guides or
//directly to the chart object through chart.guides
chart.valueAxes[0].guides = [{
"value": new Date(2016, 2, 5),
"label": "MILESTONE #1",
"position": "top",
"fontSize": 15,
"tickLength": 15
},
// .. etc
];
chart.validateData(); //redraw chart
}
},
// ...
});
I'm trying to use GoogleChart to generate Pie and Bar charts from the same options (With custom if needed)
Everything works fine on the Pie, but the Bar charts don't want to take the colors. So I did research and I'm trying to add some series to force it to change the colors. But, so far, still blue!
Do you have any idea?
option = {
width: 700,
height: 200,
colors: #colors,#basic array of colors
# Don't display negative values
min_value: 0,
title: vote.question,
backgroundColor: { fill:'transparent' },
is3D: true,
# Displays items even if the value is 0
sliceVisibilityThreshold: 0,
legend: {alignment: "center"},
vAxis: {format:'#%'},
series: [{colors: '#3366cc'}, {colors: '#dc3912'}, {colors: '#ff9900'}, {colors: '#dc3912'}],
isStacked: true
}
I tried to add some series 'in hard' but...
BarCharts color data by series, and it sounds like you have a single data series with multiple points. If you want to change the bars' colors, you need to add a "style" role column to your DataTable, and specify the colors in that:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['Foo', 5, 'color: #3366cc'],
['Bar', 4, 'color: #dc3912'],
['Baz', 7, 'color: #ff9900'],
['Cad', 3, 'color: #dc3912']
]);
My solution, using #asgallant tips. In Ruby.
#colors are basically an array of predefined colors.
#colors = ['#3366cc','#dc3912',"#ff9900","#109618","#990099","#0099c6","#dd4477","#66aa00","#b82e2e","#316395","#994499","#22aa99","#aaaa11","#6633cc","#e67300","#8b0707","#651067","#329262","#5574a6","#3b3eac","#b77322","#16d620","#b91383","#f4359e","#9c5935","#a9c413","#2a778d","#668d1c","#bea413","#0c5922","#743411"]
# Initialize the datatable that will contains our charts data.
data_table = GoogleVisualr::DataTable.new
data_titles = []
data_votes = []
# Headers
data_table.new_column('string', t('choices'))
data_table.new_column('number', t('shared.new_top_bar.votes'))
data_table.new_column('string', 'color', nil, 'style');
vote.vote_options.each do |vote_option|
data_titles.push(escape_javascript(vote_option.title))
data_votes.push(vote_option.votes)
end
data_titles.each_with_index do |elm, i|
data_table.add_row([data_titles[i], data_votes[i], "color: "+#colors[i]])
end
# Configure the default options for the charts.
option = {
width: 700,
height: 200,
#colors: #colors,
# Don't display negative values
min_value: 0,
title: vote.question,
backgroundColor: { fill:'transparent' },
is3D: true,
# Displays items even if the value is 0
sliceVisibilityThreshold: 0,
legend: {alignment: 'center'}
}
if data_titles.size > 5
# Customisation if too much data.
option[:height] = data_titles.size * 50# Make it bigger if there is too much parts to draw.
end
#charts[vote] = GoogleVisualr::Interactive::PieChart.new(data_table, option)
#charts2[vote] = GoogleVisualr::Interactive::BarChart.new(data_table, option)