I'm making a Sheet to be used by elementary students, to track some energy "usage" in their class, based on a date. To make it dead easy, I've created dropdowns for their choices (text).
In order to make a graph, I've changed the choices into numbers ("All"=3, "Some"=2, "None"=1, "N/A"=0) onto another tab (using Apps Script). This makes a nice graph, but the vertical axis of course shows the numbers. I'm hoping there is a way to swap them out for the text.
I've tried the 'ticks' option, but nothing changes:
var vAxisOptions = {
0: {
ticks: [{v:0, f:'N/A'}, {v:1, f:'None'}, {v:2, f:'Some'}, {v:3, f:'All'}, {v:4, f:''}],
maxValue: 4,
gridlines: {count: 5} //add an extra line of space to see the lines better
}
};
And then apply it by .setOption('vAxes', vAxisOptions).
I suspect this just isn't possible, but is it? Thanks!!
Example: https://docs.google.com/spreadsheets/d/1zOeXJy92LdCmhdLW6MmLA0JCNVk34kk50B3tQGACwlY/edit?usp=sharing
p.s. Click the "View Results" button to make the graph if you make data changes
There is this Google Issue tracker issue on this matter that it is being worked on.
You can go there and click on the star next to the title of the issue so you will get updates on the issue.
Related
Not sure if this is a good place to ask but I’m about an hour into editing a Sharepoint for the first time, have zero prior knowledge on creating/editing Sharepoints, and I’m stuck trying to figure out how to wrap text to a new line in the description field of a particular column on my list.
We need the submitters to stop at a certain point and not touch the remaining fields, and the only way I can figure out how to do that is by adding a column description that tells them to stop. I want the description of that column to read as:
————-—STOP ————-—
Submitters stop here. Do not use the fields below, unless attaching images/files. The remaining fields are for macro champ use only.
———————————————-
Instead of :
————-—STOP ————-—Submitters stop here. Do not use the fields below, unless attaching images/files. The remaining fields are for macro champ use only.———————————————-
Do I need to use JSON to achieve this? If so..what is the code I would need to use?
Also open to alternative solutions to create a line/stop/hide fields from them or something.
——————
ETA - photo of what my column formatting box looks like.
——————
ETA for further clarification -
The column in particular that I am trying to add the “stop” message to is actually named “Attachments included?” And has ‘yes’ or ‘no’ radio choice buttons. Then the description underneath that column says “submitters stop here, unless attaching images/files below.” This column, and it’s description, are hidden from the list overview and only visible when submitting a +New item.
The reason for doing this is because we have a handful of fields towards the end of the +New item submission form that we don’t want submitters to touch, as they are for the help desk agents to fill out only.
I don’t see any other way to add a stop/line or hide certain fields from the submitters (while still leaving them visible to the help desk team), so just trying to make this “stop” description look a little neater.
Format the column as shown below:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"txtContent": " ————-—STOP ————-— \n\n Submitters stop here. Do not use the fields below, unless attaching images/files. The remaining fields are for macro champ use only. \n\n ———————————————",
"style": {
"width": "100%",
"font-weight": "bold"
}
}
Update:
I want to add a line chart as a control chart in one of the widget pages in October CMS. CMS has pre-built classes for bar chart and pie chart. I was wondering if they have similar classes for other kind of analytics data.
I want to add the line chart prebuilt class to an html partials page, that can be used as a widget in october cms.
It seems that you are talking about things like this: https://octobercms.com/docs/ui/chart and you are looking for another type of chart besides those mentioned there.
I wanted to say if such a thing is not listed there then probably it does not exist. But... hey... I just went looking into the backend UI JS code.
Look at this file in your October app root: {% app root %}/modules/system/assets/ui/js/chart.line.js
/*
* Line Chart Plugin
*
* Data attributes:
* - data-control="chart-line" - enables the line chart plugin
* - data-reset-zoom-link="#reset-zoom" - specifies a link to reset zoom
* - data-zoomable - indicates that the chart is zoomable
* - data-time-mode="weeks" - if the "weeks" value is specified and the xaxis mo
de is "time", the X axis labels will be displayed as week end dates.
* - data-chart-options="xaxis: {mode: 'time'}" - specifies the Flot configurati
on in JSON format. See https://github.com/flot/flot/blob/master/API.md for detai
ls.
*
* Data sets are defined with the SPAN elements inside the chart element: <span
data-chart="dataset" data-set-data="[0,0],[1,19]">
* Data set elements could contain data attributes with names in the format "dat
a-set-color". The names for the data set
* attributes are described in the Flot documentation: https://github.com/flot/f
lot/blob/master/API.md#data-format
*
* JavaScript API:
* $('.chart').chartLine({ resetZoomLink:'#reset-zoom' })
*
So the functionality is there, it seems, but it's not in the public docs. Looks like you could try out something like this
<div
class="control-chart"
data-control="chart-line"
style="min-height:400px"
data-zoomable="1"
data-reset-zoom-link="#reset-zoom"
data->
<span data-chart="dataset" data-set-label="Graph me tender" data-set-data="[0,0],[1,5],[3,8],[4,2],[5,6]">
Graph me tender
</span>
<span data-chart="dataset" data-set-label="Graph me sweet" data-set-data="[0,0],[1,5],[3,8],[4,2]">
Graph me sweet
</span>
</div>
<a id="#reset-zoom" href="#">Reset zoom</a>
(Edit: There was a somewhat "dirty" tweak necessary here: I added a min-height css attribute, otherwise there was an error thrown. Maybe there should be some additional class for that instead which I do not know. Also, the two data-sets are not plotted in order (the second is plotted first) and are wrongly labeled in the legend, and appear horizontally connected to each other. The zoom function does not seem to work, etc, etc. I think this line graph thingy is possibly still work in progress and that might be the reason why it is not included in the docs yet. )
, play around with it and see what it does. (I have not tested this and hope it works somehow.) If I understand correctly it should give you a zoomable line graph with data points [0,0],[1,5],[3,8],[4,2],[5,6] (x,y coordinate points) and the link below should reset the zoom (edit: zooming does not work. maybe need to set some additional options for that)
The whole thing seems to be based on this Flot JQuery chart library. So you might find some good further hints there or here, besides reading October's {% app root %}/modules/system/assets/ui/js/chart.line.js source code.
I have an SSRS Line chart which plots supply points with square feet on the X axis and Price on the Y axis. Right now I don't really care about making it pretty just getting the lines to show up correctly. I am plotting the points and grouping by Subdivision/Builder.
So for example Subdivision A has builders Y and Z. I want to show different colors and lines for Subdivision A builder Y verses Subdivision A Builder Z.
The problem is that the lines are not connecting when a point for another subdivision builder combination breaks up that line.
The grey line and points below are not all connected as the yellow point is between the grey points so the grey line is not connected to all grey points.
How can I make the points of the same color (same Subdivision/Builder) connected via a line?
As I found out the hard way recently, this problem is often caused by null values in the data not being properly handled by SSRS. Without seeing your data, I can't be certain that's the cause, but nulls were the culprit I encountered the same behavior.
The solutions usually involve assigning values to the color of the EmptyPoint property on the Series, sometimes in conjunction with setting the EmptyPointValue to specify null handling. I've found many references to this problem on the web, but I'll only post links to the best two, both of which are on StackExchange:
The thread SSRS Line Chart NULL VALUE - Horizontal Line contains a thorough discussion of this issue. The usual workaround given is to hard-code a color expression for each line using an IIf, but sometimes this isn't an option, especially if the field you're grouping on has dynamic, unpredictable values, as my dataset did.
The picture posted there depicts clear examples of the same type of line breaks. The user named trubs posted a code sample which illustrates how to set the EmptyPoint, in case where an Iif will work:
=iif(isNothing(Fields!SelectedValue.Value),'No Color',"LightBlue")
The first reply in SSRS Line Chart Not Connecting Data Points details a workaround for cases when the EmptyPoint value & nulls are the root cause and simple hard-coded IIfs won't do the trick. Although I have yet to get my line colors to match the point markers the way I'd like, I can verify that this solution at least gives you your lines back and allows you to assign a variety of colors to them. It's fairly simple and involves merely pasting in some VB code for a couple color properties.
I was asked in the comments section to provide the details of the solutions, but don't want to plagiarize, so I'll simply do a long direct quote of JohnBob's answer:
Firstly, in order to get the lines to join up, you need to set the
EmptyPoint colour for the series.
Select your series in your chart In the properties tab (not the
dialog) drill down into the EmptyPoint property and set the colour to
be Black
This will get them joining up - yay! But part of the line is colour
and the other part is black, right? That's a bit silly, especially
considering if you leave the colour to Automatic on the EmptyPoint
that it will be transparent.
So, then we need to get the series and the EmptyPoint's colours in
sync. Using code from here. I added some code to the code of the
report.
1). Right click on an empty space on the report and select "Report
Properties" 2). In the code tab, paste the following:
Private colorPalette As String() = {"#418CF0", "#FCB441", "#E0400A", "#05642E", "#1A3B69", "#BFBFBF", "#E0400A", "#FCB441", "DarkBlue", "Tomato", "Orange", "CornflowerBlue", "Gold", "Red", "Green", "LightBlue", "Lime", "Maroon", "LightSteelBlue", "Tan", "Silver"}
Private count As Integer = 0
Private mapping As New System.Collections.Hashtable()
Public Function GetColor(ByVal groupingValue As String) As String
If mapping.ContainsKey(groupingValue) Then
Return mapping(groupingValue)
End If
Dim c As String = colorPalette(count Mod colorPalette.Length)
count = count + 1
mapping.Add(groupingValue, c)
Return c
End Function
Then we need to call this code when setting the colour of the series
and of the EmptyPoint.
Select your series
In the properties tab paste something the following (replace WhateverTheGroupIsForYourSeries with your series group name):
=Code.GetColor(Fields!*WhateverTheGroupIsForYourSeries*.Value)
Drill down to the color element of the EmptyPoint Series property
Paste the same text as from point two [e.g. =Code.GetColor(Fields!*WhateverTheGroupIsForYourSeries*.Value)]
And voila! You're done! I can't believe how unnecessarily difficult
this is :D
I hope this helps.
Just put your Fields!(YourSeriesGroup).Value in Series Groups to above of
Fields!(YourCategoryGroup).Value in Category Groups, your series group should be in both Series Groups and Category Groups (should be above of your initial category group).
And after that right click horizontal axis and select Horizontal Axis Properties. Set Axis Type to Scalar and click OK.
Following up on a previous question... I've got my minimal horizon chart example much more minimaler than before ( minimal cubism.js horizon chart example (TypeError: callback is not a function) )
<body>
<div class="mag"></div>
<script type="text/javascript">
var myContext = cubism.context();
var myMetr = myContext.metric(function(start, stop, step, callback) {
d3.json("../json/600s.json.php?t0=" + start/1000 + "&t1=" + stop/1000 + "&ss=" + step/1000, function(er, dt) {
if (!dt) return callback(new Error("unable to load data, or has NaNs"));
callback(null, dt.val);
});
});
var myHoriz = myContext.horizon()
.metric(myMetr);
d3.select(".mag")
.call(myHoriz);
</script>
</body>
The d3.json() bit calls a server side .php that I've written that returns a .json version of my measurements. The .php takes the start, stop, step (which cubism's context.metric() uses) as the t0, t1, and ss items in its http query string and sends back a .json file. The divides by 1000 are because I made my .php expect parameters in s, not ms. And the dt.val is because the actual array of my measurements is in the "val" member of the json output, e.g.
{
"other":"unused members...",
"n":5,
"val":[
22292.078125,
22292.03515625,
22292.005859375,
22292.02734375,
22292.021484375
]
}
The problem is, now that I've got it pared down to (I think) the bare minimum, AND I actually understand all of it instead of just pasting from other examples and hoping for the best (in which scenario, most things I try to change just break things instead of improving them), I need to start adding parameters and functions back to make it visually more useful.
Two problems first of all are, this measurement hovers all day around 22,300, and only varies +/- 10 maybe all day, so the graph is just a solid green rectangle, AND the label just says constantly "22k".
I've fixed the label with .format(d3.format(".3f")) (versus the default .2s which uses SI metric prefixes, thus the "22k" above).
What I can't figure out is how to use either axis, scale, extent, or what, so that this only shows a range of numbers that are relevant to the viewer. I don't actually care about the positive-green and negative-blue and darkening colours aspects of the horizon chart. I just used it as proof-of-concept to get the constantly-shifting window of measurements from my .json data source, but the part I really need to keep is the serverDelay, step, size, and such features of cubism.js that intelligently grab the initial window of data, and incrementally grab more via the .json requests.
So how do I keep the cubism bits I need, but usefully change my all-22300s graph to show the important +/- 10 units?
update re Scott Cameron's suggestion of horizon.extent([22315, 22320])... yes I had tried that and it had zero effect. Other things I've changed so far from "minimal" above...
var myHoriz = myContext.horizon()
.metric(myMetr)
.format(d3.format(".2f"))
.height(100)
.title("base1 (m): ")
.colors(["#08519c", "#006d2c"])
// .extent([22315, 22320]) // no effect with or without this line
;
I was able to improve the graph by using metric.subtract inserting it above the myHoriz line like so: (but it made the numerical label useless now):
var myMetr2 = myMetr.subtract(22315);
var myHoriz = myContext.horizon()
.metric(myMetr2)
.format...(continue as above)
All the examples seem so concise and expressive and work fine verbatim but so many of the tweaks I try to make to them seem to backfire, I'm not sure why that is. And similarly when I refer to the API wiki... maybe 4 out of 5 things I use from the API work immediately, but then I always seem to hit one that seems to have no effect, or breaks the chart completely. I'm not sure I've wrapped my head around how so many of the parameters being passed around are actually functions, for one thing.
Next hurdles after this scale/extent question, will be getting the horizontal time axis back (after having chopped it out to make things more minimal and easier to understand), and switching this from an area-looking graph to more of a line graph.
Anyway, all direction and suggestion appreciated.
Here's the one with the better vertical scale, but now the numerical label isn't what I want:
Have you tried horizon.extent? It lets you specify the [min, max] value for the horizon chart. By default, a linear scale will be created to map values within the extent to the pixels within the chart's height (specified with `horizon.height or default to 30 pixels).
I want to create a scrollable list in flash/as3 and the important thing is.... if the user wants to move some list item up or down... he can do that by dragging the item... so when he press and hold on an item... the item will become drag-able and as the user moves it up or down the list, the other items should slide to the empty space. Its the same behavior seen in smartphones....
I'll figure out the creation, data filling, scrolling, and other mouse interaction events.... i just want help with this one behavior....of changing the order of items by dragging them. If only someone can just provide the basic algorithm or any idea how this can be achieved.. it will be enough.
Thanks in advance
EDITS :
First of all... i apologize for not posting any details about the question... (this is my first post to this site) and hence i am adding all the research and what i have done so far.
the list is part of a big project hence i cannot share the whole code.
WHAT I HAVE ALREADY DONE :
i have created a mask, a container, a scroll bar to scroll the container, items to add into the list, methods to add items, remove items and arrange them according to the order.
hence it is a scrallable and working list.
the whole thing is in as3 and flash only.
i don't know flex and i don't want to use it either.
WHAT I WANT NEXT :
i want to change the order of these items by (mouse_down on an item -> drag it up/down -> mouse_up at the position) sequence.
If anyone wants more details i can share it.
Thanks in advance.. :)
Add a simple List component to an application
In this example, the List consists of labels that identify car models and data fields that contain prices.
Create a new Flash (ActionScript 3.0) document.
Drag a List component from the Components panel to the Stage.
In the Property inspector, do the following:
Enter the instance name aList .
Assign a value of 200 to the W (width).
Use the Text tool to create a text field below aList and give it an instance name of aTf .
Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:
import fl.controls.List;
import flash.text.TextField;
aTf.type = TextFieldType.DYNAMIC;
aTf.border = false;
// Create these items in the Property inspector when data and label
// parameters are available.
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000});
aList.addItem({label:"1966 Mustang (Classic)", data:27000});
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000});
aList.allowMultipleSelection = true;
aList.addEventListener(Event.CHANGE, showData);
function showData(event:Event) {
aTf.text = "This car is priced at: $" + event.target.selectedItem.data;
}
This code uses the addItem() method to populate aList with three items, assigning each one a label value, which appears in the list, and a data value. When you select an item in the List, the event listener calls the showData() function, which displays the data value for the selected item.
Select Control > Test Movie to compile and run this application.
source: http://help.adobe.com/en_US/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7fa6.html
Finally i have got the answer from some other forum.
Here is the link to the example (behavior) that i want to add to my list :
http://www.learningactionscript3.com/2008/05/13/the-power-of-relative-positioning/
(at the bottom 'Advanced Align Example').