Does the Google.Visualization.Dashboard work with chart animation out-of-the-box? In my code below, I bound a CategoryFilter to an AreaChart and specified the animation options - the dashboard works fine but no animation when the data changes (by selecting new value via the control). Please let me know if I have missed something, the Google tutorial does not cover the Dashboard nor the ChartWrapper approach (which I'm using).
var control1 = new google.visualization.ControlWrapper({
'controlType' : 'CategoryFilter',
'containerId' : 'control1',
'options' : {
'filterColumnLabel' : 'ThisColumn',
'ui' : {
'labelStacking' : 'vertical',
'allowTyping' : false,
'allowMultiple' : false
}
}
});
var areaChart = new google.visualization.ChartWrapper({
'chartType' : 'AreaChart',
'containerId' : 'chart1',
'options' : {
'animation' : {
'duration' : 4000
}
}
});
Animation works. I don't know what kind of data you used so I set up one example with area chart but as a control used NumberRangeFilter.
See demo at jsBin.
Related
Is it possible to adjust the tooltips displayed in a line chart rendered using Chart.js 2.4.0?
It recently shows both x and y value and the name of the dataset. I would need only the name of the dataset.
You can change the configuration for tooltip in options. In tooltip, we have callback object. In which, you set the title to a custom function that returns the title you want to give to the tooltip.
[sample-code]
var chartInstanceHoverModeNearest = new Chart(ctx, {
type: 'bar',
data: data,
options:{
events:["click"],
title : {
display : true
},
scales: {
xAxes: [{
categorySpacing: 0
}]
},
tooltips: {
enabled: true,
callbacks : {
title : function(){
return "Your Custom Title";
},
label : function(){
return "";
}
}
}
}
});
Below are the methods in callback object. If you want to extend more you can override these methods to give custom functionality
callbacks : {
afterBody:(),
afterFooter:(),
afterLabel:(),
afterTitle:(),
beforeBody:(),
beforeFooter:(),
beforeLabel:(),
beforeTitle:(),
footer:(),
label:(tooltipItem, data),
labelColor:(tooltipItem, chartInstance),
title:(tooltipItems, data)
}
I am using Appcelerator Studio to design a slider menu. Now i need to add EventListener to those slider menu rows. Please tell me how to use EventListener on clicking 'Help' so that i can give some condition within it? My code is below:
var menuTitles = [{title : 'Home'
}, {
title : 'Help'
},{
title: 'Privacy Policy'
}, {
title : 'About Us'
}, {
title : 'Rate This App'
}, {
title : 'Logout'
}];
//Tableview
var tableView = Titanium.UI.createTableView({
data : menuTitles,
allowsSelection:true
});
menuWindow.add(tableView);
console.log(menuTitles[0]);
//console.log(tableView.data);
menuTitles[0].addEventListener('click', function(){ // It seems wrong.
alert("");
some more operation i need to perform inside this actually
});
Add the event listener onto the parent element, in this case the tableView and then select the item you want that using event bubbling, the example code below selects it on the row index e.index but you could easily change this to e.row.title and do a string comparison / add any custom property to the row object and check it with e.row
tableView.addEventListener('click', function (e) {
if (e.index === 1) {
} else if (e.index === 2){
}
etc....
});
I am trying to hot swap chart types based on select box changes. If data needs to be updated, it changes.
So for example, on page load I create a chart like this:
var config = {
type: 'line',
data: {
labels: this.labels,
datasets: [{
label: 'Some Label',
data: this.values
}]
},
options: {
responsive: true
}
}
var context = document.getElementById('canvas').getContext('2d');
window.mychart = new Chart(context, config);
But then I change the combo box to a bar chart. I have tested the data with bar chart on page load, and it worked great.
Here's how I am trying to change the chart.
window.mychart.destroy();
// chartType = 'bar'
config.type = chartType;
var context = document.getElementById('canvas').getContext('2d');
window.mychart = new Chart(context, config);
window.mychart.update();
window.mychart.render();
But nothing happens. The line chart remains. How can I dynamically change the chart type? (Even if it means destroying & re-creating the chart canvas).
UPDATE
Note it looks like it is actually destroying the chart, but keeps redrawing a line chart, even though I do console.log(config.type); and it returns bar, not line
The Fix
Destroy the old chart (to remove event listeners and clear the canvas)
Make a deep copy of the config object
Change the type of the copy
Pass the copy instead of the original object.
Here is a working jsfiddle example
Example Overview:
var temp = jQuery.extend(true, {}, config);
temp.type = 'bar'; // The new chart type
myChart = new Chart(ctx, temp);
NOTE: Using version 2.0.1 of Chart.js
Why this works
Chart.js modifies the config object you pass in. Because of that you can not just change 'config.type'. You could go into the modified object and change everything to the type you want, but it is much easier to just save the original config object.
Just to follow up that this is now fixed in v.2.1.3, as followed through by https://stackoverflow.com/users/239375/nathan
document.getElementById('changeToLine').onclick = function() {
myChart.destroy();
myChart = new Chart(ctx, {
type: 'line',
data: chartData
});
};
Confirmed fixed in latest version. Check out http://codepen.io/anon/pen/ezJGPB and press the button under the chart to change it from a bar to a line chart.
No need to destroy and re-create, you just have to change the type from the chart's config variable then update the chart.
var chartCfg = {
type: 'pie',
data: data
};
var myChart = new Chart(ctx, chartCfg );
function changeToBar() {
chartCfg.type = "bar";
myChart.update();
}
In chart.js 3.8.0 you can do it like this:
let chart = new Chart(ctx, {
type: "line",
data: {
// ...
},
options: {
// ...
}
});
chart.config.type = "bar";
chart.update();
you can also change data and options this way
chart.js docs on updating:
https://www.chartjs.org/docs/latest/developers/updates.html
codepen example: https://codepen.io/3zbumban/pen/yLKMMJx
The alternate solution can be as simple as creating both the charts in separate Div elements. Then as per your condition just make one visible and hide other in the javascript. This should serve the purpose you may have for changing the chart type for your requirement.
In ChartJS, the chart type can also be changed easily like chart data. Following example might be helpful
my_chart.type = 'bar';
my_chart.update();
In ChartJS 3, :
var options = // your options.
var data = { ...myChart.data }; // deep copy of the data
var ctx = document.getElementById('myChart_id').getContext('2d');
myChart.destroy()
/// Modify ctx or data if you need to.
myChart = new Chart(ctx, {
type: chart_type,
data: data
});
Chart.options = options;
myChart.update();
I am using chart.js to show a line chart. How can I hide a tooltip label for a chart.js line chart? The label in the tooltip is showing undefined so I want to hide the label (please see the screenshot)?
Perhaps there is a way to modify tooltip where I can show only the legends value in tooltip? My code is as follows:
myLine = new Chart(ctx).Line(lineChartData, {
type: 'line',
responsive: true,
scaleShowGridLines : false,
bezierCurve : false,
animationEasing: "linear",
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
showTooltips: true,
scaleLineColor: "rgba(0,0,0,.8)",
});
Just set the tooltipTitleFontSize to 0 in your options.
Preview
Script
myLine = new Chart(ctx).Line(lineChartData, {
...
tooltipTitleFontSize: 0
});
I know I am late, but I guess it still has merit to add this one.
check this : https://stackoverflow.com/a/44632748/12061669
It uses a function to hide the title:
options:{
tooltips:{
callbacks:{
title: ()=>{}
}
}
}
Setting the title's font size to zero is not ideal as you will still see an (ugly) extra space on top of the tooltip, as if the title line is still there - which honestly is what you'd expect.
Instead, I used Yumin Gui's answer but had to return null for it to work:
`
tooltips: {
callbacks: {
title: () => null,
},
},
The result is exactly as in the pie charts (which does not have a title in its default tooltips).
To hide the tooltip title/label, it should be added in the options object for that chart as follows:
options: {
plugins: {
tooltip: {
callbacks: {
title : () => null // or function () { return null; }
}
}
}
}
Do refer to the documentation to understand better that it should be handled with a custom callback function, and it is not a config that can be set in options directly.
The accepted answer won't work in newer versions of chart.js, as Aman said in comments, what you can use now is this:
tooltips: { titleFontSize: 0 }
Example:
var bar_chart = document.getElementById('bar_canvas').getContext('2d');
window.myBar = new Chart(bar_chart, {
type: 'bar',
data: bar_chart_data,
options: {
tooltips: {
titleFontSize: 0,
bodyFontSize: 14,
}
}
});
We use Keen on a site to track view data. This works well but I’m having an issue with how some of the data is presented in the graphs (using v3.0.5 of the JS SDK). On the users dashboard we have a graph showing the last 4 months data (timeframe : this_4_months). I have a query though -
When the user hovers over one of the columns you see detail in a tooltip e.g. "April 1, 2015 12:00:00 AM" - is there any way to format this tooltip into something more user-friendly? e.g. "April 2015"
Keen.ready(function() {
var query = new Keen.Query('count', {
'eventCollection' : 'profile_views',
'timeframe' : 'this_4_months',
'interval' : 'monthly',
'groupBy' : 'view.membership_type',
'filters' : [
{
'property_name' : 'view.user_id',
'operator' : 'eq',
'property_value' : String(user_id)
}
]
});
client.draw(query, document.getElementById(element_id), {
chartType: 'columnchart',
width : graph_width,
height : 250,
colors : ['#abdd99', '#8dc7d9', '#eeeeee'],
colorMapping : {
'pro' : '#abdd99',
'basic' : '#8dc7d9'
},
labelMapping: {
"basic": "BASIC",
"pro": "PRO"
},
title : '',
chartOptions: {
width : '100%',
height : '100%',
isStacked: true,
fontName : 'Helvetica',
fontSize : '11px',
chartArea : {
left : '10px',
top : '0',
width : '90%',
height : '90%'
},
axisTitlesPosition : 'in',
vAxis : {
viewWindowMode : 'pretty',
gridlines : { color : '#eeeeee' },
baselineColor : '#eeeeee',
textPosition : 'in'
},
hAxis : {
viewWindowMode : 'pretty',
gridlines : {
color : '#eeeeee'
},
baselineColor : '#eeeeee',
textPosition : 'none'
},
legend : {
position : 'in'
},
titlePosition : 'none'
}
});
});
Here is a screenshot of how the tooltip appears :
Instead of
var chart = keenIoClient.draw(query, document.getElementById("chart2"), options );
Collect all your data to array manually, so you can add more columns there. Here is example with dates and pageviews:
keenIoClient.run(query, function(err, response){
if (err) {
// there was an error!
}
else {
var arrayData = [];
arrayData.push(['Day','Views']);
response.result.forEach(function (element, index, array) {
var date = new Date(element.timeframe.start);
arrayData.push([date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() , element.value]);
});
var data = google.visualization.arrayToDataTable(arrayData);
var chart = new google.visualization.ColumnChart( document.getElementById('chart2'));
chart.draw(data, options);
}
});
The "options" variable stays the same.
P.S. on the way you can set up the format for your dates.
P.P.S. in my case the Query was:
var query = new Keen.Query("count", {
eventCollection: "views",
interval: "daily",
timeframe: "this_7_days",
});