I have this dataframe:
And I want to make a horizontal stacked bar chart that displays the same information as this chart:
I have generated this code:
chart = alt.Chart(df_q4).mark_bar().encode(
x = alt.X('value:Q', axis=None),
color=alt.Color('color_code:N', scale=None),
).facet("title:N"
).properties(
width=400,
height=700)
chart
However it throws this error:
SchemaValidationError: Invalid specification
altair.vegalite.v4.api.Chart, validating 'required'
'data' is a required property
alt.FacetChart(...)
I am not sure why I cannot facet. I have also tried encoding the facet object within the chart encoding, and that did not work as well.
I also would like to incorporate some code into my chart that shows only the titles, colors, and values pertaining to a specific season. This will be via wrapping the code within a function that's something like:
define color_palette(season):
Facet charts do not support width or height properties. Perhaps you meant this?
chart = alt.Chart(df_q4).mark_bar().encode(
x = alt.X('value:Q', axis=None),
color=alt.Color('color_code:N', scale=None),
).properties(
width=400,
height=700
).facet(
"title:N"
)
Related
I want to declare an empty line chart or clear the line chart data by simply emptying the chart data array. With this line of code in typescript:
<!--HTML-->
<ngx-charts-line-chart ...
[results]="multi">
</ngx-charts-line-chart>
//typescript
this.multi =[];
However Error: <rect> attribute x: Expected length, "NaN". occurred before I push data(or let say renew the data array with actual data inside) into the declared empty array or after I empty the data inside the data array.
Is there any way to make this error disappear? Thanks in advance.
Yes I have find a work around in typescript.
Declare the object like this works in my case.
multi:any[]=[];
I am trying to make an Altair theme that conforms with our internal guidelines. I found this excellent article that solved most of my issues. However, neither the article nor a search of the documentation has solved the problem of aligning the chart title with the left side of the numbers on the y axis.
See the dotted line in Urban institute's theme for visual explanation.
The problem is that I do not know the width of the longest number on the y axis. The solutions I have found just hard code an offset for the expected width of the number. However, I have to make a theme that automatically conforms to the standard in all cases.
Hints to possible solutions are welcome. I will try them out and post results.
The available title alignment settings for Altair/Vega-Lite are listed here: https://vega.github.io/vega-lite/docs/title.html#params
The closest thing to what you desire is to set anchor='start' in the title config:
import altair as alt
from vega_datasets import data
cars = data.cars()
alt.Chart(cars).mark_bar().encode(
x=alt.X('Miles_per_Gallon', bin=True),
y='count()',
).properties(
title='A bar chart'
).configure_title(
anchor='start'
)
Unfortunately, there is no way in the Vega-Lite schema to control the alignment more finely than that. If this is important to your use of Altair/Vega-Lite, I would suggest opening a Vega-Lite feature request.
I'm not sure if this exactly what you're looking for since you mentioned wanting to create a theme, but you can recreate the look of the UI theme by adding text to your chart via mark_text().
Here's an example:
df = pd.DataFrame({'col1':[0,1,2,3,4,5], 'col2':[0,1,2,3,4,5]})
text_df = pd.DataFrame({'col1':[0], 'col2':[0], 'col3':['title']})
line = alt.Chart(df).mark_line().encode(x='col1', y='col2')
text = alt.Chart(text_df.query('col1 == 0')).mark_text(dx=-60, dy=-400, fontSize=24, font='Lato').encode(x='col1', y='col2', text='col3')
line + text
This is the resulting chart:
I'm using Report Builder 3.0. Long story short, I want to make the font bold for the text in the red box that you see in the image below:
Basically, it's just one expression in the legend field of my value, however, for clarity's sake (for my end users) I wish to make the "title part" bold. I found the following solution for textboxes in a tablix using Html by checking off the "HTML – Interpret HTML tags as styles." checkbox within the Textbox's properties. (http://www.sqlchick.com/entries/2010/10/31/using-different-formats-within-a-single-textbox-in-ssrs.html)
However, I can't find anything similar for graphs! I mean if MS thought about it for tables, I presume they must've given it some thought for a chart setting too.
Thanks to all!
p.s. As an aesthetic solution to my problem, I did think of simply creating a new title field, moving it to the exact same location and formating it. But I'm surious whether there'd be some more "proper" way of doing this.
I'm using the same approach for one of my charts.
STEPS.
Select the Chart series to open property pane. In my case, the chart series name is TWR Chart Series
Select the color property and select to build the expression.
I'm posting one of my expression. You can build your own expression base don your field names etc.
=IIF(Fields!ProductID.Value = 1 OR Fields!ProductID.Value = 6,"#00425E",
IIF(Fields!ProductID.Value = 3 ,"#6B8797",
IIF(Fields!ProductID.Value = 5 OR Fields!ProductID.Value = 7,"#799179",
IIF(Fields!ProductID.Value = 4 AND Fields!sort.Value=99,"#6bb1be","#48597B"))))
If used sensibly, you should get your desired results.Good luck.
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 am using D3plus for data visualization . but in the x axis wrong data is showing instead of what i wrote in .x("year") to show .
http://jsfiddle.net/MituVinci/a77kz0dr/
enter code here
var visualization = d3plus.viz()
.container("#viz") // container DIV to hold the visualization
.data(sample_data) // data to use with the visualization
.type("scatter") // visualization type
.id("Reason") // key for which our data is unique on
.x("year") // key for x-axis
.y("Female") // key for y-axis
.draw()
I also want to resize the width and height of this and also want to show it using an external json file how can i do it ?
Since you have "Reason" as your .id() variable, D3plus is aggregating all data points that have the same "Reason". So the "x" position for "Family Feud" is 2010+2011+2012+2013+2014 or 10060, which is where all of your bubbles are located.
If you want to display each bubble individually, you could create a separate variable called "ReasonYear", concat the text of the Reason and Year fields together and then use .id("ReasonYear") for your visualization.
Use .width() and .height() to control the width and height respectively of your visualization.
Use .data() to load data from an external JSON file
Documentation can be found here: https://github.com/alexandersimoes/d3plus/wiki/Visualizations