I'm doing a rails app and was able to get chartkick working but customizing it is a bit of a pain in the butt. I'm trying to customize the tooltip with the Google chart API but I can't seem to figure out. I just want to be able to change the text, "Value".
Could someone put me in the right direction.
Here is my code:
<%=
column_chart [
["Strongly Disagree", p[1]],
["Disagree", p[2]],
["Neutral", p[3]],
["Agree", p[4]],
["Strongly Agree", p[5]]
],
height: "220px",
library: {
width: 665,
fontName: "Helvetica Neue",
colors: ["#29abe2"],
tooltip: {
textStyle: {
color: "#333333"
}
},
bar: {
groupWidth: "50%"
},
vAxis: {
title: "Everyone",
titleTextStyle: {
italic: false,
color: '#777'
},
gridlines: {
color: "#eeeeee"
},
viewWindow: {
max: m
}
}
}
%>
The chartkick documentation is sparse, but if this system works the way I suspect it does, then you need to add an array of column headers to the start of your data, eg:
[
["Label for column 0", "Label for column 1"],
["Strongly Disagree", p[1]],
["Disagree", p[2]],
["Neutral", p[3]],
["Agree", p[4]],
["Strongly Agree", p[5]]
]
Related
I tried to display some map results in JustPy, but HighMap data labels in JustPy show as rotated, but only the label is roated not the map itself.
import justpy as jp
my_chart_def = """
{
chart: {
map: 'custom/europe',
borderWidth: 1
},
title: {
text: 'Nordic countries'
},
subtitle: {
text: 'Demo of drawing all areas in the map, only highlighting partial data'
},
legend: {
enabled: false
},
series: [{
name: 'Country',
data: [
['is', 1],
['no', 1],
['se', 1],
['dk', 1],
['fi', 1]
],
dataLabels: {
enabled: true,
color: '#FFFFFF'
},
}]
}
"""
def chart_test():
wp = jp.WebPage()
wp.head_html = """
<script src="https://code.highcharts.com/maps/9.2.2/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/europe.js"></script>
"""
my_chart = jp.HighCharts(a=wp, classes='m-2 p-2 border w-1/2 h-screen', options=my_chart_def)
my_chart.options.chart.type = 'map'
my_chart.options.series[0].name = 'Test chart'
my_chart.options.title.text = 'Data'
return wp
jp.justpy(chart_test)
This is what I got:
If I rotate the map 90 degrees, this is what I see, and the label seems aligned
I've reproduced your example in the editor, and everything seems to be correct https://jsfiddle.net/BlackLabel/6g92m7br/, so the issue occurs from the justpy side.
However, since 9.3.0 Highcharts Maps has improved geometry https://www.highcharts.com/blog/changelog/#highcharts-maps-v9.3.0, which could have affected another framework's behaviour. I would suggest reaching out JustPy developers directly.
As a workaround, you can try to play around with setting x, y dataLabels positions, e.g:
plotOptions: {
series: {
dataLabels: {
x: 15,
y: -50
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/bnejx2kc/
API Reference:
https://api.highcharts.com/highmaps/plotOptions.map.dataLabels.x
https://api.highcharts.com/highmaps/plotOptions.map.dataLabels.y
I am trying to figure out how to display custom HTML objects created by users. For example, the user can create custom styled button(s) with the following properties: color, font-size, and border-radius. Here is an example of my json:
[
{
id: 2,
configs: {
color: "#000000",
font_size: 10,
border_radius: 0,
display: true,
button_1: [
{
color: "red",
font_size: 12,
border_radius: 4,
display: true,
}
],
},
created_at: "2020-05-07T21:42:04.808Z",
updated_at: "2020-05-07T21:42:04.808Z",
},
{
id: 3,
configs: {
color: "#000000",
font_size: 10,
border_radius: 0,
display: true,
button_1: [
{
color: "blue",
font_size: 15,
border_radius: 24,
}
],
button_2: [
{
color: "pink",
border_radius: 2,
}
],
},
created_at: "2020-05-07T22:29:31.255Z",
updated_at: "2020-05-07T22:29:31.255Z",
},
]
I want to display all buttons according to the user's style settings. Tried something like:
%p #{btn.id}: #{btn[:configs][:button_1][0][:color][:font_size]}
But it doesn't look practical. Besides, in certain cases it can lead to the error:
undefined method `[]' for nil:NilClass
I've tried to use gem like activerecord-typedstore but it seems like it doesn't support nested attributes (Is there a way to master a nested json with a json column?). Is there any way to display custom button(s) based on the user's criteria?
In Ruby "configs" and :configs are not equivalent. You must use the type employed in the structure.
To navigate complex JSON structures use dig:
btn.dig('configs', 'button_1', 0, 'color', 'font_size')
You can also symbolize the keys if you want using symbolize_keys:
btn.symbolize_keys!
If you prefer symbols and you're reading in the JSON manually you can always request it with symbol keys out of the gate using the symbolize_names option to JSON.parse:
JSON.parse('{"test": true}')
# => {"test"=>true}
JSON.parse('{"test": true}', symbolize_names: true)
# => {:test=>true}
We have setup our own HighCharts node-export-server as shown in the official documentation. We are able to get images back from the server, however when requesting a column chart the y-axis labels are missing. If we submit the same chart data to https://export.highcharts.com/ we get the correct image.
Here is the chart data as submitted (to both servers):
{
'chart': {
'type': 'column',
'width': 800,
'height': 500
},
'title': { 'text': '' },
'xAxis': { 'categories': ['Damage Code'], 'crosshair': true },
'yAxis': {
'min': 0,
'title': { 'text': 'Tire Life (Hours)' },
'plotLines': [{
'value': 800,
'color': '#929292',
'dashStyle': 'shortdash',
'width': 2
} ]
},
'colors': ['#ff0000', '#000000', '#787878', '#5eb749', '#2893d1', '#5ec7bd', '#f79226', '#ff7043', '#ee3124', '#a9a9a9', '#333333'],
'tooltip': { 'enabled': false },
'plotOptions': {
'series': {
'dataLabels': {
'align': 'center',
'color': '#282E32',
'enabled': true,
'format': '{point.label}'
}
},
'column': {
'pointPadding': 0.2,
'borderWidth': 0
}
},
'series': [{"name":"(111) Test Code Description 1","showInLegend":true,"data":[{"y":1000,"label":"111 10%"}]},{"name":"(222) Test Code Description 2","showInLegend":true,"data":[{"y":2000,"label":"222 20%"}]},{"name":"(1212) Test Code Description 12","showInLegend":true,"data":[{"y":1200,"label":"1212 120%"}]}]
}
And the image returned from the node-server:
I've checked out the GitHub (https://github.com/highcharts/node-export-server ) page and not much has happened there since we setup the node-server so there is nothing new to deploy from there.
Updated: Getting back to this I see the repository has some changes since I last checked. I've grabbed the latest code in the repository and re-published to my chart server. The issue continues, but I've got some additional information now.
If I set the yAxis rotation to 0 (zero) it shows. Any other rotation (270 is the default) results in the title showing as 'dots' as shown in the image above.
So this will show the title:
'yAxis': {
'min': 0,
'title': { 'text': 'Tire Life (Hours)', rotation: 0 },
This will not:
'yAxis': {
'min': 0,
'title': { 'text': 'Tire Life (Hours)', rotation: 270 },
I don't consider rotation zero a solution, but hopefully this helps to identify the issue.
I am using ember-highcharts in my app. I tested in my localhost and it is working fine, the graphic is showing in the screen.
I deployed my application in heroku, and try to show the graphic but the error below appears:
Uncaught TypeError: Cannot read property 'parentGroup' of undefined
at object.setState (highcharts.src.js:33606)
at SVGGElement. (highcharts.src.js:33080)
Here is my code:
{{#if question.chartData}}
{{high-charts content=question.chartData chartOptions=chartOptions}}
{{else}}
<div class="modal__warning">Dados insuficientes</div>
{{/if}}
chartOptions: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: null
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
colors: [
'#60E0A1',
'#F19692',
'#d5d5d5',
'#68599D',
'#A69BC5'
],
dataLabels: {
enabled: false
},
size: '100%',
showInLegend: true,
startAngle: -90,
endAngle: 90,
center: ['50%', '100%']
}
},
yAxis: {
title: {
text: null
}
}
}
Does anyone know what the problem could be? Just remember that in my local machine is working fine!
Thanks in advance :)
I've discovered the issue. What happened is that the data that I was sending to Highcharts was using an incorrect format.
I am plotting a pie chart, and the data should be in the format below:
[ ["test", 10.0], ["test2", 85.0], ["test3", 5.0] ]
And I was sending the data like this:
{ {"test", 10.0}, {"test2", 85.0}, {"test3", 5.0} }
For some reason this caused the problem mentioned.
I am generating a Project Cumulative Flow Chart, which is based on the Project name that I fetch using a "find," however I can't get it working.
Here is the Problem:
1) The "Find" in my code is just fetching one kind of project name, "FE," however, I have a lot of other Project name such as FE, BE, VisualRF, etc. I am not sure what's going on
2) I return this to "storeConfig" inside the chart and then I want try to give "Name" to the "stateFieldName." This is not working! I don't see any graph at all.
Here is the code.
_chart2: function() {
var projectName = this.getContext().getProject()._refObjectName;
console.log("========");
console.log(projectName); <<<<<<<<<< This always prints one name'FE' (My project name are FE, BE, etc)
this.chart = {
xtype: 'rallychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreForChart2(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: this.getContext().getProject()._refObjectName, <<<<< I think usage is not fetching name of all projects
stateFieldValues: ['FE','BE','VisualRF']
},
width: 1000,
height: 600,
chartConfig: this._getChart2Config()
};
this.chartContainer.add(this.chart);
},
_getStoreForChart2: function() {
var obj1 = {
find: {
_TypeHierarchy: { '$in' : [ 'Defect' ] },
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID,
_ValidFrom: {'$gt': Rally.util.DateTime.toIsoString(Rally.util.DateTime.add(new Date(), 'day', -30)) },
State: "Open",
},
fetch: ['Severity','Project','ObjectID','FormattedID'],
hydrate: ['Severity','Project','ObjectID','FormattedID'],
sort: {
_ValidFrom: 1
},
context: this.getContext().getDataContext(),
limit: Infinity,
val: this.Name,
};
return obj1;
},
Though this should not matter but here is the code for the high chart function I am calling above
_getChart2Config: function() {
console.log("starting chart config");
return {
chart: {
zoomType: 'xy'
},
title: {
text: 'Chart2'
},
xAxis: {
tickmarkPlacement: 'on',
tickInterval: 20,
title: {
text: 'Date'
}
},
yAxis: [
{
title: {
text: 'Count'
}
}
],
plotOptions: {
series: {
marker: {
enabled: false
}
},
area: {
stacking: 'normal'
}
}
};
},
Down below you can see 'FE' getting printed:
Thanks a lot!
Kay
stateFieldName is the field which is used to calculate the CFD- usually ScheduleState or a custom dropdown field like KanbanState that captures your process. The stateFieldValues should be the values of that field (Defined, In-Progress, Accepted, Completed, etc.) This doesn't deal with projects at all. Definitely remember to include that field in your hydrate and fetch as well.