What would be the easiest way possible to display custom properties in the pie chart tooltip?
var pieData = [
{
value: 40,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Label 1",
description: "This is a description for label 1"
},
{
value: 60,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Label 2",
description: "This is a description for label 2"
}
];
var options = {
tooltipTemplate: "<%= label %> - <%= description %>"
};
window.onload = function(){
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx).Doughnut(pieData, options);
};
I tried simply adding a "decription" property and then printing it, but without any luck. It just gives me an error saying description is not defined. I saw that there is a custom tooltip functionality, but that seemed like a lot of work for something trivial. Is there an easier way?
Charts doesn't support this feature officially. But you can customize tooltip with your data like this in case of LineChart.
first, make chart with datasets and options
var chart = new Chart(ctx).Line(dataset, opt);
and, add properties what you want show in tooltip
var points = chart.datasets[0].points;
for (var i = 0; i < points.length; i++) {
// Add properties in here like this
// points[i].time = '2015-04-23 13:06:24';
}
then, you can use these properties like this.
tooltipTemplate: "<%=time%> : <%=value%>"
I hope this is helpful to someone. :D
You should go:
var options = {
tooltipTemplate: "<%= label + '-' + %> <%= description %>"
};
It's not a solution really, but I solved it by adding just the description inside the label...
label: "Label 2 - Description",
Related
I am rewriting a custom view to regular views. For example
Pseudo code
if (date = today) {
context.push('...; style="color:red; ...}
else {
context.push('...; style="color:black; ...}
;
becomes
mondayLabelView: SC.LabelView.extend({
layout: {top:90, left:700, width:200, height:18},
classNames: ['App-monday'],
valueBinding: SC.Binding.oneWay('App.someController.selectedMondayDate'),
}),
Question, how to rewrite the dynamic color part?
I would suggest using the classNameBindings property to dynamically add a CSS class. This way, you do not need to use the style tag.
You can view more about it at http://blog.sproutcore.com/classnamebindings-easy-dynamic-css/ but the basic idea is as follows:
mondayLabelView: SC.LabelView.extend({
layout: {...},
valueBinding: SC.Binding.oneWay('App.someController.selectedMondayDate'),
isToday: function() {
// Psuedo-code, you'll probably need SC.DateTime to actually compare the dates
return this.get('value') == today;
}.property('value'),
classNameBindings: ['isToday:date-is-today'],
})
Then, in your CSS, you would have something like:
.date-is-today {
color: red;
}
As an absolute (syntax) beginner, I don't know what the suggested statement 'return this.get('value') == today;' exactly means, that is the '== today' part?
Maybe asking too much, but to compare the dates and set the return value I was thinking of
tuesdayLabelView: SC.LabelView.extend({
layout: {top:90, left:500, width:200, height:18},
valueBinding: SC.Binding.oneWay('App.someController.selectedTuesdayDate'),
classNameBindings: ['isToday:date-is-today'],
isToday: function(){
var comptuesday = this.get('value');
var comptoday = SC.DateTime.create().toFormattedString('%A, %d %b');
if (comptuesday === comptoday) {
return 'date-is-today';
} else {
return 'normal-date';
};
}.property('value'),
}),
Probably not the shortest way or beautiful syntax, but it works, any further suggestions for better syntax?
I'm using the Password HTML Helper in MVC5 to hide the social security number as it is entered.
#Html.Password("s", null, new { #maxlength = 9, autocomplete = "off" })
The problem I see with it is you just see dots as you type. Is there any way the helper behavior can be modified to show the characters you are typing in for a second or two then have them transformed to dots? That behavior would let the user confirm they are typing in the correct character. If the helper behavior cannot be modified is there another way to accomplish this?
I found this fiddle maybe you can use this as an option
http://jsfiddle.net/Ngtp7/
$(function(){
$(".showpassword").each(function(index,input) {
var $input = $(input);
$('<label class="showpasswordlabel"/>').append(
$("<input type='checkbox' class='showpasswordcheckbox' />").click(function() {
var change = $(this).is(":checked") ? "text" : "password";
var rep = $("<input type='" + change + "' />")
.attr("id", $input.attr("id"))
.attr("name", $input.attr("name"))
.attr('class', $input.attr('class'))
.val($input.val())
.insertBefore($input);
$input.remove();
$input = rep;
})
).append($("<span/>").text("Show password")).insertAfter($input);
});
});
I'm trying to create a radar chart with the drawing style as polygon instead of circle in the MVC chart helper but i cannot find the AreaDrawingStyle anywhere in it.
I know in the regular ASP chart control i can do:
chart1.Series["Default"]["AreaDrawingStyle"] = "Polygon";
But in my MVC code, i have:
Chart myChart = new Chart(width: 600, height: 400)
.AddTitle("Chart Title")
.AddSeries(
name: "Employee",
chartType: "Radar",
xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues: new[] { "20", "60", "41", "55", "33" });
Does anyone know where to find it? I searched lots of places but i am having a hard time finding specific details about this particular type of chart.
I just had to make my MVC chart use polygon as well. This link helped me a lot by allowing me to style the chart using the underlying System.Web.UI.DataVisualization.Charting classes:
http://truncatedcodr.wordpress.com/2012/09/18/system-web-helpers-chart-custom-themes/
In short, try this nasty stuff...
System.Web.UI.DataVisualization.Charting.ChartArea ca = new System.Web.UI.DataVisualization.Charting.ChartArea("Default");
var chart = new System.Web.UI.DataVisualization.Charting.Chart();
chart.Series.Add("MySeries");
chart.Series["MySeries"]["AreaDrawingStyle"] = "Polygon";
var cs = chart.Serializer;
cs.IsTemplateMode = true;
cs.Format = System.Web.UI.DataVisualization.Charting.SerializationFormat.Xml;
var sb = new System.Text.StringBuilder();
using ( System.Xml.XmlWriter xw = System.Xml.XmlWriter.Create(sb))
{
cs.Save(xw);
}
string theme = sb.ToString().Replace("<?xml version=\"1.0\" encoding=\"utf-16\"?>", "");
System.Web.Helpers.Chart myChart = new System.Web.Helpers.Chart(width: 1024, height: 768, theme:theme);
And now you have a whole new name space to look into for formatting your charts!
i m using highcharts JoeKuan, but i have tried set title, all failed.
JoeKuan HighCharts : https://github.com/JoeKuan/Highcharts_Sencha/
a lot of example i have tried, maybe JoeKuan's High Chart set title is bug?
this is the example i have tried: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/chart-settitle/
chart.setTitle({
text: 'New title ' + i++
});
Error : TypeError: chart.setTitle is not a function
or
chart.options.subtitle.text = 'Sales';
or
chart.title = "a"
any idea?
For my website I need the input passed from TinyMCE to be 1 specific font.
I need them to be able to insert links, make text bold, underlined or italics. They get to have 2 headers to chose from, Header 2 and Header 3 and paragraph.
Now the problem is, I can't make the editor paste as text. If I open word I can copy and paste text with font, lets say, Chiller and it shows up as chiller.
How can I make all copy/pasted text show as my desired font (paragraph format) while allowing some buttons to work such as bold..etc.
What I currently have:
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
editor_selector : "body_content",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align: "left",
theme_advanced_buttons1: "bold,italic,underline,hr,strikethrough,formatselect,separator,undo,redo",
theme_advanced_buttons2: "justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,link,unlink",
theme_advanced_buttons3: "",
theme_advanced_blockformats: "p,h2,h3",
extended_valid_elements: "iframe[title|width|height|src]",
theme_advanced_fonts : "Arial=arial",
plugins : "wordcount",
setup : function(ed){
ed.onKeyUp.add(function(ed){
///
var r = 0;
var y = tinyMCE.get('body_content').getContent();
var n = "<?php echo $max;?>";
y = y.replace(/\s/g,' ');
y = y.split(' ');
for (i=0; i<y.length; i++)
{
if (y[i].length > 0) r++;
}
var word_remain=n-r;
if(word_remain<0)
word_remain=0;
jQuery('#body_word_remain').html(word_remain);
var keypressed = null;
if (window.event)
{
keypressed = window.event.keyCode;
}
else
{
keypressed = ed.which; //NON-IE, Standard
}
if (r > n )
{
var prescribed = "<?php _e('You have exceeded the prescribed ','ad')?>";
prescribed += (r-n);
prescribed += "<?php _e(' word(s)','ad');?>";
jQuery('#prescribed').html(prescribed);
}
else
{
jQuery('#prescribed').html('');
}
});
}
});
</script>
The example here works the way I want it to:
http://fiddle.tinymce.com/
But I am not sure what they have used to achieve that effect. I am using a version 3.9.3 released on 2010-12-20 and I'd rather not update it if possible. But if I do need to update it to get my desired effect I will.
Thank you! Any help is appreciated.