On Highcharts it is possible to hide by default some selected series :
new Highcharts.Chart({
"chart": {"type":"column","renderTo":"chart-1"},
"categories":["10-2017","11-2017"],
"series": [
{"name":"Metric 1","data":[653.13,683.13]},
{"name":"Metric 2","data":[6.87,6.87], "visible": false}
]})
However, I'm using Chartkick Ruby gem, and I cannot generate the code above.
<%= column_chart([
{ name:"Metric 1", data: { "10-2017" => 653.13, "11-2017" => 683.13 } },
{ name:"Metric 2", data: { "10-2017" => 6.87, "11-2017" => 6.87 }, visible: false }
]) %>
With this erb code snippet, the visible: false option is ignored.
Is there a way (maybe using the library parameter) to acheive this goal?
I agree, it is probably a bug or an unimplemented issue with ChartKick.
I fixed it by manually running this JS code after initialization of column_chart:
var chart = Chartkick.charts["chart-1"].getChartObject();
chart.series[1].setVisible(false);
Verify if chart-1 is the correct ID of your 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 have a telerik mvc grid (NOT JAVASCRIPT) with groupable() turned on. The column i am grouping by has a link in it. No big deal since that's easy on a column template. However, header templates don't allow access to data from a column different that the one the grouping is set on, and our links are all based on the "ID" column (hidden) whereas the grouping is on the "Name" column.
Can I call javascript from the header template to get the data I need?
here is an example of what has worked
.Groupable()
.Selectable()
.Columns(columns =>
{
columns.Template(#<text></text>).ClientTemplate("#= rowCommandsUndelete(data, false, true) #").Title(" ").Width(100);
columns.Bound(m => m.Active)
.Title("Active?")
.ClientTemplate("#= ActiveState(data.Active) #")
.Width(85);
columns.Bound(m => m.Origin.Name)
.ClientGroupHeaderTemplate("<a href='www.google.com'>link </a>")
.ClientTemplate("<div id='#=data.ID#'></div><a href='/Origins?id=#=data.Origin.ID#'>#=data.Origin.Name#</a>") //Empty div with "data.ID" is required (see JavaScript section below)
.Width(300);
and this doesn't work and gives an error: Uncaught TypeError: Cannot read property 'ID' of undefined
columns.Bound(m => m.Origin.Name)
.ClientGroupHeaderTemplate("<a href='www.google.com'> #=data.Origin.ID#</a>")
the final answer is thanks to sandro. On an ajax page, use clientgroupheadertemplate like this on a column:
columns.Bound(m => m.Origin.Name)
.ClientGroupHeaderTemplate("#=buildHeader( value )#")
buildheader is a javascript function, and value is a built-in value in the header. Here's the javascript function:
function buildHeader(value) {
return "<h4><u><a href='\origins?OriginName=" + encodeURIComponent(value) + "'>" + value + "</a></u></h4>";
}
value contained the string from the column and i was able to create a link this way and set it to the column header. I have also successfully called javascript now from a footer to trigger something after a calculation.
It's groupHeaderTemplate configuration.
Example:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "link",
groupHeaderTemplate: "<a href=#=value# target='_blank'>google.com</a>"
}
],
dataSource: {
data: [
{ name: "Jane Doe", link: "https://google.com" },
{ name: "John Doe", link: "https://google.com" }
],
group: { field: "link" }
}
});
Is is possible to for the KendoUI Chart (Area) to have multiple data labels or even a concatenation of two? I need to display both a value and a percentage for each data point. Is this something that would need to be handled on the data source side or is it on the view?
Thanks for any help.
You can use templates to format both labels and tooltips; see labels.template and tooltip.template.
The key is to reference the Property you want using dataItem ex:
dataItem.TotalDollars
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
The answer above wont really help unless you have a strong understanding of the Kendo UI framework. I was having a similar issue and before I found my answer I found this question. I circled back because the answer is simple and some simple example code is really simple. Lets save everyone some clicks.
DATA RESPONSE FROM REMOTE DATA (copy and past for local binding):
[
{
"ProgramName":"Amarr Garage Doors",
"PercentageShare":50.12,
"TotalDollars":5440.000000
},
{
"ProgramName":"Monarch Egress Thermal Hinge C",
"PercentageShare":4.64,
"TotalDollars":504.000000
},
{
"ProgramName":"Monarch Egress Window Wells",
"PercentageShare":15.73,
"TotalDollars":1707.000000
},
{
"ProgramName":"Monarch Premier V Egress Windo",
"PercentageShare":16.25,
"TotalDollars":1764.000000
},
{
"ProgramName":"Organized Living Shelftech Ven",
"PercentageShare":13.27,
"TotalDollars":1440.000000
}
]
**Chart Generation Code: **
function createChart() {
$("#SubmissionSummaryByProgramChart").kendoChart({
title: {
text: "Breakdown by Program"
},
legend: {
position: "right"
},
dataSource: {
transport: {
read: {
url: "GetFooData",
dataType: "json",
data: {
Year : 2014,
Quarter : 1,
}
}
}
},
series: [{
type: "pie",
field: "PercentageShare",
categoryField: "ProgramName"
}],
tooltip: {
visible: true,
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
}
});
};
$(document).ready(createChart);
In my fullcalendar page, I have a (default) event sources area that looks like such:
eventSources: [{
url: '/events/index/',
color: 'yellow',
textColor: 'black',
ignoreTimezone: false
}],
I have a model (and view) folder titled "rentalcars". How would I make the events automatically be pulled from that model? This model has start and end dates.
I tried:
eventSources: [{
url: '/rentalcars/index/',
color: 'yellow',
textColor: 'black',
ignoreTimezone: false
}],
which certainly does not work. I looked at arshaw's source, and I can tell how to make static events, but I am looking for dynamic ones: ones that will iterate through existing models.
Any suggestions?
Your url parameter needs to return whatever the FullCalendar understands and can parse, so judging by the documentation you will have to make sure that your rentelcars index action returns this particular format:
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09 12:30:00',
allDay : false // will make the time show
}
}
So in your rentalcars_controller.rb in the index definition you will have to make sure that you return this format which looks a lot like JSON to me. So, easiest way would be to have this as your JavaScript:
eventSources: [{
url: '/rentalcars.json',
color: 'yellow',
textColor: 'black',
ignoreTimezone: false
}],
And then in your controller you will have something like this:
def index
rentalcar_dates = RentelcarDates.all # assuming this is an object that holds start, end date and maybe the car name
respond_to do |format|
format.html
format.json { render :json => rentalcar_dates }
end
end
I'm using the latest version of kendoui and whenever I use the "is not equal to" or "does not contain" filter I get the following error:
Uncaught TypeError: Cannot read property 'length' of undefined
I'm using a server side datasource, all the other filters seem to work without issue.
Also, how do I specify a datetimepicker for a date column?
I've looked at the documentation and tried using:
filterable: {
ui: "datetimepicker"
}
But it never shows the datetimepicker.
Here is the code:
var dataSourceArguments = {
pageSize:10,
serverPaging:true,
serverFiltering:true,
serverSorting:true,
transport:{
read:{
url:$("#grid_order").attr('data-url'),
dataType:"json"
}
},
schema:{
total:"count",
data:'fields'
},
sort:{'field':'order_date', dir:'desc'}
};
var ds2 = new kendo.data.DataSource(dataSourceArguments);
$("#grid_order").kendoGrid({
dataSource:ds2,
groupable:true,
scrollable:true,
sortable:true,
pageable:true,
columns:[
{
field:'order_date',
title:'Order Date',
width:150,
filterable: {
ui: "datetimepicker"
}
},
{
field:"reference",
title:'Reference',
width:120,
encoded:false
},
{
field:"client__company",
title:'Client',
encoded:false
},
{
field:"grand_total",
title:'Total',
width:100
},
{
field:'status',
title:'Status',
width:120,
encoded:false
},
{
field:'actions',
width:200,
title:'Actions',
filterable:false,
encoded:false,
sortable:false
}
],
filterable:true
});
UPDATE: I managed to get the datepicker working however whenever I choose the date, and click filter it filters but the date I've chosen dissapears from the field.
Add the order_date to the scheme from the data source, and the data type of the field to date.
See http://docs.kendoui.com/api/framework/datasource