Scenario
I have 2 data source 10/20 records.
data.src10.series and data.src10.categories
data.src20.series and data.src20.categories
show_rank_limit this function will show all rank on left
When I click latest top 10 button, it will
show 10 rank
no scrollbar
switch to 10 records datasource data.src10
When I click latest top 20 button, it will
show 20 rank
with scrollbar
switch to 20 records datasource data.src20
Both keep 10 rank height.
My problem
How to deal with separately on multi-charts.
When I call chart1.series[0].setData it will clear my style and some data, it should not be happened! why?
Did I use redraw event? it will cause too many redraw when I use scrollbar.
redraw: function(event) {
cfg.common.fun.show_rank_limit(this);
}
When I click latest top 20 it will keep 10 rank height, but cannot scroll down.
What I found. I put 'AAAAA BBBBB', 'AAAA-BBBBB' to data, seems it cannot display normally. And it can take html tag. ( eg. <b></b>) see above screenshot.
html code
<div id="container1" class="container" ...></div>
<br>
<div id="container2" class="container" ...></div>
js code
show_rank_limit: function(that) {
$("text.rank").remove();//remove all rank before render
...
}
var barchart1 = cfg.common;
barchart1.series = data.src20.series;
barchart1.xAxis.categories = data.src10.categories;
barchart1.title.text = 'barchart 1';
var barchart2 = _.cloneDeep(barchart1);
barchart2.title.text = 'barchart 2';
var chart1 = Highcharts.chart('container1', barchart1);
var chart2 = Highcharts.chart('container2', barchart2);
$('#top10').click(function() {
chart1.series[0].setData(data.src10.series, false);
chart1.xAxis[0].setCategories(data.src10.categories, false);
chart1.xAxis[0].update({
scrollbar: {
enabled: false
}
});
});
$('#top20').click(function() {
chart1.series[0].setData(data.src20.series, false);
chart1.xAxis[0].setCategories(data.src20.categories, false);
chart1.xAxis[0].update({
scrollbar: {
enabled: true
}
});
});
```
DEMO : https://jsfiddle.net/puff0211/6rxd31xk/
Does anyone know how to resolve this?
Thank you!
Check documentation about setData. It think you are confused with series.
setData updates data inside series, and you are passing series not data.
update with chart1.series[0].setData(data.src10.series[0].data, false); and
chart1.series[0].setData(data.src20.series[0].data, false);
$('#top10').click(function() {
chart1.series[0].setData(data.src10.series[0].data, false);
chart1.xAxis[0].setCategories(data.src10.categories, false);
chart1.xAxis[0].update({
scrollbar: {
enabled: false
}
});
});
$('#top20').click(function() {
chart1.series[0].setData(data.src20.series[0].data, false);
chart1.xAxis[0].setCategories(data.src20.categories, false);
chart1.xAxis[0].update({
scrollbar: {
enabled: true
}
});
});
Fiddle demo
Related
I'm building a Meteor app that let's the user organize lists of items in tags.
I use jQuery draggable and droppable to update a collection when a user drags an item from one tag to another.
I find it hard to understand how/where/when I should call the function. I've tried a few different options (including this "hacky way of doing it". The Blaze documentation mentions that functions can be called on DOM events, but lacks the drag and drop events that I'm looking for. I've currently settled on calling the function under Template.rendered, but that means the item can only be dropped once per render. I've tried to counter this with Tracker.autorun, but I don't think I understand how it works and the item can still only be dropped once per render.
How can I make the .item draggable several times per render?
Template.tag.rendered = function () {
//wait on subscriptions to load
if (Session.get('DATA_LOADED')) {
Tracker.autorun(function () {
$(".item").draggable({
revert: true,
start: function (event, ui) {
var movingItem = Blaze.getData(this)._id;
Session.set('movingItem', movingItem);
},
});
$(".tag").droppable({
hoverClass: 'droppable',
drop: function () {
var movingItem = Session.get('movingItem');
var acceptingTag = Blaze.getData(this)._id;
Items.update(movingItem, {
$set: {"parents": acceptingTag}
});
}
});
});
}
};
I found the solution.
By separating the .draggable and .droppable into two different Template.rendered the function is now correctly called each time an item is moved.
No need for the Tracker.autorun
Template.item.rendered = function () {
if (Session.get('DATA_LOADED')) {
$(".item").draggable({
revert: true,
start: function (event, ui) {
var movingItem = Blaze.getData(this)._id;
Session.set('movingItem', movingItem);
console.log('moving ' + movingItem);
},
});
}
};
Template.tag.rendered = function () {
if (Session.get('DATA_LOADED')) {
$(".tag").droppable({
hoverClass: 'droppable',
drop: function () {
var movingItem = Session.get('movingItem');
var acceptingTag = Blaze.getData(this)._id;
Items.update(movingItem, {
$set: {"parents": acceptingTag}
});
console.log('Dropped on ' + acceptingTag);
}
});
}
};
So, I have stacked bar chart and I want to hide data labels when they don't fit in the area. for Example in Category 8, not to have data label "4" at all.
This is a similar question bolow:
Highcharts stacked bar chart hide data labels not to overlap
But My problem is I also need to hide lables on exporting
I have done this code after generating graph to hide labales
$.each(this.chartObject.series,function(i,data_series){
if (data_series.visible){
$.each(data_series.data,function(j,data){
if(data.yBottom != null && data.plotY != null){
if(data.yBottom - data.plotY < 15){
if (typeof data.dataLabel != 'undefined'){
data.dataLabel.hide();
}
}
}
});
}
});
You need to move loop from callback, into chart / events / load.
chart: {
events: {
load: function () {
var chart = this;
$.each(chart.series, function (i, serie) {
$.each(serie.data, function (j, data) {
if (data.yBottom - data.plotY < 15) data.dataLabel.hide();
});
});
}
},
renderTo: 'chart',
defaultSeriesType: 'bar'
},
Example: http://jsfiddle.net/HA5xE/20
I would like to use a CSV file as source for a highcharts graph.
Could you give some guidance? I need to understand basically how to get data in the web page.
Do I need to put the function that load the text file in the "series" part of the js function?
This is what I have so far:
<script type='text/javascript'>
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'chart example'
},
xAxis: {
categories: []
},
yAxis: {
},
series: []
};
$.get('test.csv', function(data) {
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first
// position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 1) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
This is how the data file is structured in the CSV file:
Compound,Value
mix1,0.244
mix2,0.453
pureCu,1
pureAg,0.98
The value of column 1 is an ID basically, so the distance between each of them could be considered as 1. So technically, the first column would be always from 1 to 15 for example, with the label using the name in the first column
I would like to put the second field on the Y, and on the X the first field; but using the code pasted (which is what is on an example on the Highcharts website), I can't really figure out how to set up correctly the values on each side of the chart.
Thanks
Here you can find tutorials from Highcharts to load data from external file: http://www.highcharts.com/docs/working-with-data/preprocessing
About refreshing page - yes you can refresh page every n-seconds, however it would be better (I think) to call AJAX to fetch new data from server and then replace it in Highcharts (simply using chart.series[0].setData( new_array_of_data );
I am getting tooltip on mouse hover by each row for current column but I am unable to get next column tooltip on continue hover on same row.
But I can get it if I hover on another row & again hover any column of the previous row by using:
listeners:{
'itemmouseenter': function (view, record, item, index, e, eOpts) {
var gridColums = view.getGridColumns();
var column = gridColums[e.getTarget(this.view.cellSelector).cellIndex];
Ext.fly(item).set({ 'data-qtip': 'Des:' + column.dataIndex });
}
}
Can anyone show me what I'm missing or point me in the right direction?
I have an easy one, using the renderer function:
{
xtype : 'gridcolumn',
dataIndex : 'status',
text : 'Status',
renderer : function(value, metadata) {
metadata.tdAttr = 'data-qtip="' + value + '"';
return value;
}
}
I was looking through this. I could manage to get the tool tip for each cell by doing something like this:
Ext.getCmp('DynamicDemandGrid').getView().on('render', function(view) {
view.tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: view.el,
// Each grid row causes its own seperate show and hide.
delegate: view.cellSelector,
// Moving within the row should not hide the tip.
trackMouse: true,
// Render immediately so that tip.body can be referenced prior to the first show.
renderTo: Ext.getBody(),
listeners: {
// Change content dynamically depending on which element triggered the show.
beforeshow: function updateTipBody(tip) {
var gridColums = view.getGridColumns();
var column = gridColums[tip.triggerElement.cellIndex];
var val=view.getRecord(tip.triggerElement.parentNode).get(column.dataIndex);
tip.update(val);
}
}
});
});
Let me know if it helps
{
text: name,
width: 80,
dataIndex: dataIndex,
sortable: true,
listeners: {
afterrender: function ()
{
Ext.create('Ext.ToolTip',
{
target: this.getEl(),
anchor: direction | "top",
trackMouse: true,
html: this.text
});
}
}
}
using jquery-ui-map
here is my code
$(document).ready(function() {$('#map_canvas').gmap({ 'center': new google.maps.LatLng(3.162456,21.09375), 'zoom': 2, 'streetViewControl': false, 'callback':
function() {
$('#map_canvas').gmap('loadHTML', 'microformat', '.importers', function(markerOpts, node, index) {
var clone = $(node);
// We have to add a callback in the addmarker method so we can access the marker just added
var name = $(node).find('.name');
var icon = $(node).find('.icon');
$('#map_canvas').gmap('addMarker', jQuery.extend({ 'title': name.html(), 'icon':new google.maps.MarkerImage(icon.html())}, markerOpts), function(map, marker) {
$(name).click( function() {
$(marker).triggerEvent('click');
return false;
});
}).click(function() {
$('.reveal').removeClass('reveal');
$(this).get(0).map.panTo($(this).get(0).position);
$(clone).toggleClass('reveal');
//need to wait till pan has complete before doing zoom!
});
});
}
});
});
at the moment when you click on a market it pans to its position
what i want to do is also zoomin, i've tried just adding
$(this).get(0).map.setZoom(5, true);
but this means the pan does not work it just jumps straight to the zoom level, how do i get it to fire the $(this).get(0).map.setZoom(5, true); after the panning is done?
thanks in advance
$('#map_canvas').gmap('addMarker').click(function() {
$(this).get(0).map.panTo($(this).get(0).position);
var self = $(this).get(0);
setTimeout(function() { self.map.setCenter(self.position); self.map.setZoom(15); }, 2000);
});
This would be the easy way of setting the zoom after the pan.