I've got a page full of charts, and we want to be able to open them up in a larger size. Which means changing the font sizes for all the text in the chart. It's working quite well, except for the SERIES labels.
I've tried setting (and resetting) them in seriesDefaults, and also, in the series, but neither have worked out. valueAxis and categoryAxis labels are doing what I ask, so I'm not real sure where I'm going wrong with the series labels.
I've created a dojo, here: https://dojo.telerik.com/oYiXaL/9
Not sure why your code is not working, but setting the properties directly seems to work:
$(".expand").on("click", function(){
var chartBoss = $(this).data("boss");
$("#bigChart").kendoChart($(chartBoss).data("kendoChart").options);
var chart = $("#bigChart").data("kendoChart");
chart.options.series[0].labels.font = "20px BrandonGrotesqueWeb-Bold";
chart.options.valueAxis.labels.font = "28px BrandonGrotesqueWeb-Regular";
chart.options.categoryAxis.labels.font = "24px BrandonGrotesqueWeb-Medium";
$(".big").show();
});
Related
I use amChart pie to display data with legend boxes in right side
but the text come up box,
Note I use it in metronic design project
this is the picture
You didn't post your chart code but try setting AmCharts.rtl = true; before any of your chart code is executed to see if that helps first, as it makes the chart more RTL language aware with regards to text placement. You might also need to adjust align, valueAlign,
markerLabelGap, and spacing to fine tune the placement further.
In D3 I am working on customizing and adding to #Rengel's timeline (link shown in JS Fiddle.
I've successfully created a similar timeline based on tracks, and it also allows users to filter project data based on checkbox values. Each piece of data now has a tooltip, and there are letters from another dataset populating underneath the projects in the same svg container. Now finally I want to add a brush like this one - wrobstory's from the blocks website.
I have only recently started to work on brush events so I am very much a noob, which is why I am unsure how I am going wrong. There is a JS Fiddle I created at: https://jsfiddle.net/rootseire/2vq8028o/2/ which shows everything working before the brush gets called. When I select a section of the timeline, the brush appears, it calculates indexes and extent. But it changes the y state of the year and the year text then transitions down the page.
I have been trying to see why this is happening, but I think I need to step back from the code as it might be just that I am not referencing the correct element. Here is the code for when the mouse pointer drags over the interface:
vis.on('mousedown', function(){
brush_elm = vis.select(".brush").node();
new_click_event = new Event('mousedown');
new_click_event.pageX = d3.event.pageX;
new_click_event.clientX = d3.event.clientX;
new_click_event.pageY = d3.event.pageY;
new_click_event.clientY = d3.event.clientY;
brush_elm.dispatchEvent(new_click_event);
});
But I think it might have something to do with the .points selector. How can I make the brush target the x-axis, the project rectangles and the letters together?
Thanks in advance,
P
I am new user of DC.JS. I am using dc.piechart. I'm having issues change pie slice colors using a dc.pieChart.
Documentation and examples I've seen use the colors method and many combination seen from Google. I want to bind a particular color for a particular data.
which I used the code for change color but still not working mentioned bellow.
.colors(["#eeff00","#ff0022"]);
another approach-
var colorScale = d3.scale.ordinal().domain(["banana", "cherry", "blueberry"])
.range(["#eeff00", "#ff0022", "#2200ff"]);
pie.colors(function(d){ return colorScale(d.fruitType); });
Any idea about how to solve the problem?
you need to generate a ordinal scale first.
.colors(d3.scale.ordinal().range(
[ '#1f78b4', '#b2df8a', '#cab2d6'..., '#bc80bd']);
The first slice would take the first color, second the second and so on.
A gordon pointed out, there is a convenience method too:
// convenience method, the same as above
chart.ordinalColors(['#1f78b4', '#b2df8a', '#cab2d6'...]);
https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#colorscolorscale
I'm building a basic dashboard for internal use. I've little experience with D3 / SVG etc so please excuse me if this is obvious:
Aim
I have a time series of values, one value per date for a full year. Inspired by the example on the dc.js wesbite, I'm displaying a 'mini' bar plot of the entire series, and allowing the user to select a range which in turn sets the limits of the axis scale range of a 'large' line plot.
By default (on page load / refreshAll()) I've set the limits of the large line plot to be the most recent 60 days.
The user is encouraged to set their desired range using the mini plot at the bottom, and when they do, the 'grab handles' appear and the chosen range is highlighted on the mini plot, for example:
My issue
On page load / refreshAll(), the grab handles and range highlighting aren't shown on the mini plot, for example:
Question
Is there a way I can set the grab handles to appear upon page load?
Here is how i do it by using crossfilter and dc.js. You can get the last x days by doing something like:
xrange = d3.extent(data, function(d) { return d.date; });
last60 = [d3.time.day.offset(xrange[1], -60), d3.time.day.offset(xrange[1], 1)]
Assuming you have a date in your data. Do this after reading the data with d3, but before feeding it into crossfilter.
Then for the bottom chart (mini plot) simply set the filter property to:
.filter(last60)
And also set the xrange for the top chart to the same range:
.x(d3.time.scale().domain(last60))
Something like this might also work for setting the xrange, but i havent had any success with that:
topchart.focus(bottomchart.filter())
When using a theme in jqPlot the x axis labels are disappeared. The colors are also added to the series and y axis tick label font size can also be set. Am I doing something wrong?
I have the same issue. When I switch theme (or even switch back to default) if I'm using
renderer: $.jqplot.CategoryAxisRenderer
the x-axis texts are no longer drawn.
if I use
$.jqplot.DateAxisRenderer
however they are drawn.
I've even tried specifying the renderer as part of the theme but this seems to be ignored (probably intentionally)
I'm working on this issue right now (jqPlot v. 1.0.8) and I think I found the source of the problem. When going through the redraw process called at the end of ThemEngine activateTheme() function, in CategoryAxisRenderer's createTicks() the 'showLabel' property is set by default to false and fails to switch to true for ticks with labels.
Fast fix that worked for me: in plugin: jqplot.categoryAxisRenderer.js
comment
t.showLabel = false; #line 149
and uncomment
t.showLabel = true; #line 155
After those changes everything works as intended both with default and user created theme. I have to stress out again that this is just a quick fix and not the final solution which I'll post here asap.
I tried to just set the option.seriesColors directly which worked for me. This means the theme only exists as something in my helper functions that create graphs but it is ok for me.