I want to display table and its chart using toggle button. Default it should disply chart, when I click button, it should change to table view.
On first click it works but doesn't work from second click.
I have created the codesandbox project.
CodeSandbox
What mistake have I done in this code.
Dynamic change of the showTable option does not change the display of the table. You need to toggle the containers visibility:
Highcharts.Chart.prototype.viewData = function () {
$(this.renderTo).toggle();
if (!this.insertedTable) {
var div = document.createElement('div');
div.className = 'highcharts-data-table';
// Insert after the chart container
this.renderTo.parentNode.insertBefore(div, this.renderTo.nextSibling);
div.innerHTML = this.getTable();
this.insertedTable = true;
div.id = this.container.id + '-data-table';
} else {
$('#' + this.container.id + '-data-table').toggle();
}
};
Live demo: https://codesandbox.io/s/l4x11ykm67
API Reference: https://api.highcharts.com/highcharts/exporting.showTable
Related
I used vis.js timeline to create a timeline . I need to create tooltip when mouse over into button only not the whole item . I applicate title . the tooltip appears but It was applicated on the whole item . I need a tooltip appplicated only when we mouse over the button not the whole item .
You can use the "template" function in the vis timeline config. In the template function you can modify what the item template should look like. There you can add a button and then add event listeners.
template: function(item) {
var itemTmp = document.createElement('div');
itemTmp.innerHTML = item.content + ' ';
var btn = document.createElement('button');
btn.innerText = 'Hover Me!';
btn.addEventListener('mouseover', function() {
btn.innerText = 'Done!';
});
btn.addEventListener('mouseout', function() {
btn.innerText = 'Hover Me!';
});
itemTmp.appendChild(btn);
return itemTmp;
}
Full example:
http://jsfiddle.net/tagisen/qp3dwrzn/
Hope this helps
I am using Amcharts in my AngularJS Application to create a simple bar chart.The following is my code in the controller:
let empChart;
let empBarGraph;
let empLine;
const writeemp = data => {
const {
total,
employees,
} = data;
empChart.dataProvider = e;
empChart.write('emp');
empChart.validateData();
};
AmCharts.handleLoad();
var configChart = function () {
empChart = new AmCharts.AmSerialChart();
empChart.categoryField = "state";
empChart.labelRotation = 90;
var yAxis = new AmCharts.ValueAxis();
yAxis.position = "left";
empChart.addValueAxis(yAxis);
empBarGraph = new AmCharts.AmGraph();
empBarGraph.valueField = "count";
empBarGraph.type = "column";
empBarGraph.fillAlphas = 1;
empBarGraph.lineColor = "#f0ab00";
empBarGraph.valueAxis = yAxis;
empChart.addGraph(empBarGraph);
empChart.write('empChart');
$http.get(hostNameService.getHostName()+"/dashboard/employees/statecount")
.then(response => writeemp(response.data));
}
Code in html:
<div class='panel-body'>
<div id="empChart"></div>
</div>
This would return me the values of State on x-axis and count on y-axis. I wanted to filter the chart based on the value of state and was not sure how to create the legends for this chart. could anyone suggest me on how to use legends. I want to create legends for the state value that is being returned.
You can add a legend using the OO-based syntax by creating a legend object through new AmCharts.AmLegend() and adding it to the class by calling the chart's addLegend method:
var legend = new AmCharts.AmLegend();
empChart.addLegend(legend);
If you want the legend to show values upon hovering over a column, you need to add a ChartCursor to your chart:
var cursor = new AmCharts.ChartCursor();
empChart.addChartCursor(cursor);
You can change what the legend displays upon column rollover by setting the valueText property. It allows for the same [shortcodes] used in fields like balloonText and labelText, e.g. legend.valueText = "[[category]]: [[value]]". You can also use set its valueFunction if you need to customize the text it returns dynamically like in your previous questions. All of the properties available in the legend object can be found in the AmLegend API documentation.
Updated:
Legends work off of graph objects only, so there isn't an out of the box method that allows you to represent each column as a legend item that toggles the other columns' visibility unless you're willing to reorganize your dataset and use different graph objects for each state. A workaround for this is to use the the legend's custom data array and add some event handling so that clicking on the custom data items adds/removes a toggle by unsetting your count valueField in the dataProvider.
The following annotated code accomplishes what you're trying to do:
//create the legend but disable it until the dataProvider is populated,
//since you're retrieving your data using AJAX
var legend = new AmCharts.AmLegend();
legend.enabled = false;
chart.addLegend(legend);
chart.toggleLegend = false;
// Callback that handles clicks on the custom data entry markers and labels
var handleLegendClick = function(legendEvent) {
//Set a custom flag so that the dataUpdated event doesn't fire infinitely
legendEvent.chart.toggleLegend = true;
// The following toggles the markers on and off.
// The only way to "hide" a column is to unset the valueField at the data index,
// so a temporary "storedCount" property is added to the dataProvider that stores the
// original value so that the value can be restored when the legend marker is toggled
// back on
if (undefined !== legendEvent.dataItem.hidden && legendEvent.dataItem.hidden) {
legendEvent.dataItem.hidden = false;
legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].count = legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].storedCount; //restore the value
} else {
// toggle the marker off
legendEvent.dataItem.hidden = true;
legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].storedCount = legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].count; //store the value
legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].count = undefined; //set to undefined to hide the column
}
legendEvent.chart.validateData(); //redraw the chart
}
chart.addListener('dataUpdated', function(e) {
var legendDataItems; //used to store the legend's custom data array.
if (e.chart.toggleLegend === true) {
//is the user toggling a legend marker? stop here as the dataProvider will get updated in handleLegendClick
e.chart.toggleLegend = false;
return;
}
// if we're at this point, the data provider was updated.
// reconstruct the data array.
// initialize by grabbing the state, setting a color and stoing the index
// for toggline the columns later
legendDataItems = e.chart.dataProvider.map(function(dataElement, idx) {
return {
'title': dataElement.state,
'color': graph.lineColor,
'stateIdx': idx //used in toggling
}
});
// if the legend is not enabled, then we're setting this up for the first time.
// turn it on and attach the event handlers
if (e.chart.legend.enabled === false) {
e.chart.legend.enabled = true;
e.chart.legend.switchable = true;
e.chart.legend.addListener('clickMarker', handleLegendClick);
e.chart.legend.addListener('clickLabel', handleLegendClick);
}
// update the legend custom data and redraw the chart
e.chart.legend.data = legendDataItems;
e.chart.validateNow();
});
Here's a fiddle that illustrates this: http://jsfiddle.net/g254sdq5/1/
I am trying to hide extjs date-field on clicking anywhere on DOM except date-field. while clicking anywhere in dom bodyClick function get called.On basis of page co-ordinates element object get retrieved and then this element object get compared with date-field object.This works fine but problem comes whenever i am clicking on date-picker again "date-field" get hide.
sample code -
bodyClick: function(e){
var me = this, elem, t;
var flag =true;
elem = me.getEl();
for(t = Ext.dom.Element.fromPoint(e.getX(), e.getY()); t && t != null;){
if (Ext.fly(elem ).contains(t)){
flag =false;
}
}
if(flag ){
me.hide();
}
}
Any Suggestions for hiding datefield while clicking anywhere in DOM (extJs).
You can try this in afterRender of the panel or container in which your component is in.
this.mon(Ext.getBody().getEl(), 'click', this.yourFunction, this);
yourFunction:function(e){
var comp = Ext.ComponentQuery.query('datepicker')[0];//Get your datepicker component
if (Ext.fly(e.getTarget()) != comp) { //get the target using Ext.fly
comp.hide(); //Hide the component if the target is not the datepicker
}
}
Hope this helps you.
I am working in extjs. I have to disable fields of my form.
I have used below function.
var form = Ext.getCmp('frmTender').getForm();
fields = form.getFields();
Ext.each(fields.items, function (f) {
f.inputEl.dom.disabled = true;
}
Its working for textfields but not for comboboxes and checkboxes. So Please help me how
can I disable all comboboxes
of my form.
You can use the setDisabled method of the Ext component.
f.setDisabled(true);
in place of
f.inputEl.dom.disabled = true;
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-method-setDisabled
I personally don't like the disabling of fields in extjs. The labels are getting greyed out too. I'm using it this way.
//JS
var form = Ext.getCmp('frmTender').getForm();
fields = form.getFields();
Ext.each(fields.items, function (f) {
f.inputEl.dom.readonly = true; //f.setReadOnly(true)
f.inputEl.addCls('x-custom-field');
};
//CSS
.x-custom-field
{
background: none; //#ccc
}
How to control show and hide of the grid header context menu dropdown [ext js] through a javascript function on a button click?
After some digging I have found this workaround:
button.on('click', function() {
var grid = Ext.getCmp('my-grid');
// assuming that we need to expand the first column's menu
var column = grid.columns[0];
var hc = grid.view.headerCt;
hc.showMenuBy(column.el.dom, column)
});