I'd like to set different pointLabel settings for each bar, so if a value is small like 1, it will show location: 'e' instead of location: 'w'. I'm trying the following...
series: [{pointLabels: {show: true, location: 'e'}},
{pointLabels: {show: true, location: 'w'}}]
just as a test, but it doesn't seem to work. Should I remove the seriesDefaults block?
Thanks!
It should work fine the way you try it. Do not worry about the seriesDefaults its setting get overwritten by those in series. Here is the code sample presenting it working. In the sample the four of the chart labels are set to show in different locations.
If you still have the issue please build a sample presenting the problem, for example, at http://jsfiddle.net so we can see it.
Related
I'm developing an application where I'm using apex charts to create a brush chart. However, I want my brush to control multiple charts instead a single one, as the example shows.
Before I start working with callbacks I'm wondering if there is an easy-way of make this work with that library, for example by passing an array of targets:
brush:{
target: 'chart2',
enabled: true
},
Thanks in advance,
I think this might be undocumented, but apparently apexcharts lets you define this:
brush: { enabled: true, targets: ['candles', 'candles_2nd'] },
I found in the lib-code that it actually handles it like this:
var targets = w.config.chart.brush.targets || [w.config.chart.brush.target]; // retro compatibility with single target option
Regards,
Jim
I've searched far and wide and I wasn't able to figure out what's wrong with my code. Apologies if I am missing something obvious.
I have a JSON object as follows:
var data={
"by_date":[
{"date":"2014-01-01", "count":10},
{"date":"2014-02-01", "count":20},
{"date":"2014-03-01", "count":30},
{"date":"2014-04-01", "count":15},
{"date":"2014-05-01", "count":20}
],
"by_location": {
"name":"World","children":[
{
"name":"United States", "children":[{"name":"New York", "children":[{"name":"Albany","count":5}, {"name":"NYC","count":5}]}]
},
{
"name":"Canda", "children":[
{
"name":"Alberta", "children":[{"name":"Edmonton","count":5},{"name":"Calgary","count":5}]
},
{
"name":"British Columbia", "children":[{"name":"Victoria","count":2},{"name":"Vancouver","count":8}]
}
]
},
{
"name":"China", "children":[{"name":"Beijing","count":30}]
},
{
"name":"India", "children":[{"name":"Bangalore","count":15}]
},
{
"name":"Germany", "children":[{"name":"Frankfurt","count":20}]
}
]
}
};
I want to display a line chart using data from data.by_date and a zoomable circlepack from data.by_location on the same HTML page. I have two Javascript functions by_date, which creates a line chart, and by_location, which creates a circlepack, and they both have the exact same code as Mike Bostock's line chart and zoomable circlepack examples and I call them as follows:
by_date(data.by_date);
by_location(data.by_location); // Creates circlepack, but zoom doesn't work.
The problem is that while both the line chart and the circlepack are created and displayed on the page, the zoom functionality doesn't work on the circlepack. I get the following error:
Uncaught TypeError: Cannot read property 'parent' of undefined
However, if I don't call by_date and only call by_location, it works perfectly fine.
//by_date(data.by_date);
by_location(data.by_location); // Zoom works great now!
Since by_date uses only data.by_date, and doesn't even touch data.by_location, why would commenting it out somehow make by_location work okay?
Here are fiddles demonstrating the issue:
Both line and circlepack (circlepack doesn't zoom): http://jsfiddle.net/xk5aqf8t/6/
Line chart function by_date commented (zoom works fine): http://jsfiddle.net/38sayeqa/
Note that the only difference between the two fiddles is the commented call to by_date.
Any help is greatly appreciated. Thanks in advance!
The problem in your case is that in your zoom transition you're selecting all text elements in the document, including the line chart where elements' bound data doesn't have any parent property (hence the error message).
The fix is easy. Just constrain your transition selection to the current chart. In your case you already have a selection of text elements, you can simply reuse it as demonstrated below:
// Let's keep our initial selection in the text variable:
var text = svg.selectAll('text').data(nodes);
text.enter()... // the entering selection is a subselection, so we keep it separate
// Create a new transition on the existing selection of text nodes
var transition = text.transition().duration(...); // the transition will reuse `text` selection
transition.filter(...); // don't subselect anything here
Here's a demo.
I have inherited a project that is using Highcharts.
The previous dev used the .addSeries method to add all of the series to each chart that was being rendered. From what I've read of Highcharts, it seems like .addSeries is really for adding data dynamically.
The data that is being used to populate the charts are coming from an AJAX request. The old dev's approach was to get the data, render the chart, and then add a series using .addSeries. I was thinking that it might be better to update options.series and then pass the whole thing along to new Highcharts.Chart() for rendering, taking the .addSeries out of the equation.
However, since I'm new with Highcharts, I was hoping to get some feedback on what the better method would be.
You're on a good path, though your question suggests you may simply be looking for preference over a strict right/wrong answer.
From what I've seen, unless you have interactions on the page that would trigger a need to update your chart after it's been drawn, the benefit to using addSerie would be to add some visual flare. Using addSerie, your charts will visually draw themselves in front of the visitor - vs them already being drawn. (I believe HighCharts demo site has some good examples of this.)
I also recently inherited a HighCharts project and am generating a new Highcharts.Chart() using dynamic data by parsing the AJAXed data on the fly. The good news is that all of the charts still have nice visual flare (flare is important) since they don't draw until the AJAXed data is fully loaded. This snippet illustrates how I've been loading dynamic charts, parsing the JSON data on the fly:
$(function () {
var visitsChart;
$(document).ready( function() {
$.getJSON('/json-data-url', function(json){
var visitsChart = new Highcharts.Chart({
chart: {
renderTo: 'visitsContainer',
type: 'spline',
},
title: {
text: 'Test Widget'
},
series: [{
name: 'Speed',
data: [parseInt(json.visits)],
}],
...
});
});
});
});
I won't lie ... I had a few minutes of hair pulling when I got started but now I wish I had more time to work with Highcharts as it's quite fun once you get on a roll. Hope this helps.
I'm developing an application, part of which uses OpenLayers (calling a Geoserver-served WMS) displaying some frequently updated data (a vessel track - or more specifically, a series of points).
I would like to have this vessel track updated at a set interval - OpenLayers.Strategy.Refresh seems like the most approparite way to do this. I modified the wms.html example (OpenLayers 2.11) slightly to try this, ie:
underway = new OpenLayers.Layer.WMS("Underway Data",
"http://ubuntu-geospatial-server:8080/geoserver/underway/wms",
{'layers': 'underway:ss2011_v03', transparent: true, format: 'image/gif'},
{isBaseLayer: false},
{strategies : [new OpenLayers.Strategy.Refresh({interval: 6000})]}
);
map.addLayers([layer, underway]);
From what I can tell, this should work as-is (ie refresh the underway layer every 6 seconds), however nothing happens. The underlying WMS is getting updated - if I refresh the map manually, the updated data will appear.
I'm sure I'm missing something fairly obvious, any help would be much appreciated. I'm not getting any errors in Firebug or anything, it's just not doing anything.
Well, it turns out that you can't do a refresh strategy on a WMS service, as far as I can tell. So I converted my code to use WFS instead, and it works as expected. The code:
underway = new OpenLayers.Layer.Vector("WFS", {
strategies: [new OpenLayers.Strategy.BBOX(), new OpenLayers.Strategy.Refresh({interval: 4000, force: true})],
protocol: new OpenLayers.Protocol.WFS({
url: "http://ubuntu-geospatial-server:8080/geoserver/wfs",
featureType: "ss2011_v03",
featureNS: "http://csiro.au/underway",
geometryName: "position"
});
Note that I also need a BBOX strategy. Another gotcha that I found was that I needed to manually specify the geometryName, otherwise it would default to "the_geom", which doesn't exist for my layer.
I'm pretty sure you need to add a new OpenLayers.Strategy.Static() strategy for it to work.
And you need to activate your Refresh strategy which means you have to stick it in a separate variable.
Any sample code for chart with multiple bars using flot ??
similar to this example . The given patched files are not working for me. Anywhere I can download the latest files for multi bar graph.
Update
I am sure Flot is a very good library but plugins/add-ons are not available easily and the examples given on the website are very basic, so I decided to use jqPlot instead
Updated Info: Andión's answer makes reference to this library. Bars-side-by-side
You can download the code here:
http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js
The result is :
Have you tried the orderBars plugin?
You can download the code here
You have to treat each bar as its own data series, so if you see 11 bars you need to create 11 data series.
Here's sample code for 2 bars.
<script id="source" language="javascript" type="text/javascript">
$(function () {
var d1 =[0, 2];
var d2 =[1,3];
var startData = [
{ //first series
label:"d1",
data: [d1],
bars:{
show: true,
fill: true,
fillColor: "red"
}
},
{ //second series
label:"d2",
data: [d2],
bars:{
show: true,
fill: true,
fillColor: "blue"
}
}
];
var option={
series: {
bars:{
show: true,
fill: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: { ticks: 5 }
};
$.plot($("#placeholder"),startData,option );
});
Double-check the values that you're passing in on the X-axis (of your bar series).
You don't need a different series for each bar, that would be.... excessive.
What you do need is a different series for each colour of bar (or more accurately, each different set of rendering settings that you'd like to have in your chart).
I realize you've moved on, but if you want to post the code that was giving you issues, it might help other people. The examples on the flot site are pretty straight-forward, so it may have just been something simple (like your X-axis value if they weren't defined) that was tripping you up.
I'm using flot in a production system to render three different bar series (red, yellow and green bars) so it sounds like a very similar solution what you're trying to do.