I am trying to create a multi-dimensional, stacked bar chart using ZingChart. This is as far as I have gotten:
For some reason, the image is not showing. The link to it is (https://drive.google.com/file/d/0B14IyWv9zwZ9a0hWR0lXTDZQXzQ/view) .
In this example, each bar represents a Product (there are 3 products), and for each bar I want to show the breakdown by Region (there are 4 regions). Therefore, for each year there would be up to 3 product bars (for the 3 products), then for each product bar up to 4 colors (for the 4 regions).
While the bars themselves are correct, there are a few things the chart is not doing properly:
As the legend shows, each Region gets a separate color for each product. There should only be 4 region colors, which are reused from product to product, but in this case there are 12 region colors (3 products x 4 regions)
I want to label each bar to indicate which Product each one relates to. That could be an extra label above the year label on the x-axis, or a label above each bar showing the product.
I looked for similar examples on the ZingChart web site, but all of the stacked bar charts were "one" dimensional. In Tableau, something like this would be very easy to do.
This certainly can be done using ZingChart. I have included a live chart below that has your regions and your products setup correctly. I have also included a legend which shows your 4 regions. Please note, the interactivity for the legend is disabled.
The key is using the "stack" attribute within a series item. That way, you can specify which stack you would like the series to go on.
var myChart = {
"graphset":
[
{
"type":"bar",
"title":{
"text":"Acme Product Sales"
},
"plotarea":{
},
"scaleX":{
"values":["2000","2001","2002","2003","2004"]
},
"scaleY":{
},
"plot":{
"stacked":true,
"adjust-layout":true
},
"legend":{
"toggle-action":"none",
"adjust-layout":true
},
"series":[
{
"values":[10,20,30,40,50],
"legend-text":"North 1",
"stack":1,
"background-color":"red"
},
{
"values":[10,20,30,40,50],
"legend-text":"South 1",
"stack":1,
"background-color":"blue"
},
{
"values":[10,20,30,40,50],
"legend-text":"East 1",
"stack":1,
"background-color":"green"
},
{
"values":[10,20,30,40,50],
"legend-text":"West 1",
"stack":1,
"background-color":"yellow",
"value-box":{
"text":"P 1",
"color":"black"
}
},
{
"values":[10,15,20,25,30],
"legend-text":"North 2",
"stack":2,
"background-color":"red",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[10,15,20,25,30],
"legend-text":"South 2",
"stack":2,
"background-color":"blue",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[10,15,20,25,30],
"legend-text":"East 2",
"stack":2,
"background-color":"green",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[10,15,20,25,30],
"legend-text":"West 2",
"stack":2,
"background-color":"yellow",
"value-box":{
"text":"P 2",
"color":"black"
},
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[15,30,45,60,75],
"legend-text":"North 3",
"stack":3,
"background-color":"red",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[15,30,45,60,75],
"legend-text":"South 3",
"stack":3,
"background-color":"blue",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[15,30,45,60,75],
"legend-text":"East 3",
"stack":3,
"background-color":"green",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[15,30,45,60,75],
"legend-text":"West 3",
"stack":3,
"background-color":"yellow",
"value-box":{
"text":"P 3",
"color":"black"
},
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
}
]
}
]
};
zingchart.render({
id: "myChart",
height: "300px",
width: "100%",
data: myChart
});
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>
I'm on the ZingChart team, so please feel free and contact support#zingchart.com and we can help you use our API to get the legend to properly turn on and off your series as needed.
Related
For the below data
[
{
"name": "iPhone XR Black 64GB",
"color": "red"
},
{
"name": "iPhone XS Gold 64GB",
"color": "blue"
},
{
"name": "Galaxy Note9 Ocean Blue 128GB",
},
{
"name": "G7 ThinQ™ Platinum Gray 64GB",
},
{
"name": "Moto E5 Play 16GB",
}
]
If I filter color:red it should return the records matching the following criterias.
If the color attribute exists it should be red.
If the color attribute doesn't exist.
Output would be
[
{
"name": "iPhone XR Black 64GB",
"color": "red"
},
{
"name": "Galaxy Note9 Ocean Blue 128GB",
},
{
"name": "G7 ThinQ™ Platinum Gray 64GB",
},
{
"name": "Moto E5 Play 16GB",
}
]
Click here for flow chart
Algolia is a search engine, meaning that it returns matching records as is. It doesn't perform any transformations, and you can't inject logic into the engine's behavior.
With your above dataset, if you run an empty search ('') with a filter "color:red", Algolia will only return the following record:
{
"name": "iPhone XR Black 64GB",
"color": "red"
}
If you want all records (in the limit of 1,000 records), you need to perform an empty query with no filters.
In documentation of VS Code Extensions, it is mentioned that you can define your own color: https://code.visualstudio.com/api/references/contribution-points#contributes.colors
How can I use this color in the Color Theme I create?
For example, I have the following in package.json
"contributes": {
"themes": [
{
"label": "My Color Theme",
"uiTheme": "vs-dark",
"path": "./themes/my-color-theme.json"
}
],
"colors": [
{
"id": "color.gold",
"description": "Gold",
"defaults": {
"dark": "#FFB71B",
"light": "#FFB71B",
"highContrast": "#FFB71B"
}
}
]
}
And the following in my-color-theme.json (I would like to use "gold" for one of the item but it does not work):
{
"name": "My Color Theme",
"type": "dark",
"colors": {
"editor.background": "#000000",
"editor.foreground": "#FFFFFF",
"sideBarTitle.foreground": "color.gold",
},
...
}
Thanks
Color entries can only contain color values of the form #RGB, #RGBA, #RRGGBB or #RRGGBBAA, nothing else. No other color format (hsl etc.) or named color is supported. Hence "sideBarTitle.foreground": "color.gold" is an invalid entry.
I am using Python Google Sheets API v4 to create a new spreadsheet, insert some data and create 2 value doughnut chart based on the data within the spreadsheet.
I have managed to perform all of the above, but cannot figure out how to perform the following:
Apply predefined, rgb color values (there are only 2) in the request body build.
Ensure that charts are specific height and width size.
I have tried to pass the color parameters, however I keep receiving the following error about invalid JSON payload.
googleapiclient.errors.HttpError: <HttpError 400 when requesting https://sheets.googleapis.com/v4/spreadsheets/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX:batchUpdate?alt=json returned "Invalid JSON payload received. Unknown name "color" at 'requests[0].add_chart.chart.spec': Cannot find field.". Details: "[{'#type': 'type.googleapis.com/google.rpc.BadRequest', 'fieldViolations': [{'field': 'requests[0].add_chart.chart.spec', 'description': 'Invalid JSON payload received. Unknown name "color" at \'requests[0].add_chart.chart.spec\': Cannot find field.'}]}]">
CODE:
def create_pie_chart_body(range_list, sourceSheetId):
#Creates pie chart body from the given range_list and worksheetId, pieHole: 0.75"
return {
"requests": [
{
"addChart": {
"chart": {
"spec": {
"title":str(range_list[-1]),
"pieChart": {
"domain": {
"sourceRange": {
"sources": [
{
"sheetId": sourceSheetId,
"startRowIndex": range_list[0],
"endRowIndex": range_list[1],
"startColumnIndex": range_list[2],
"endColumnIndex": range_list[3]
}
]
}
},
"series": {
"sourceRange": {
"sources": [
{
"sheetId": sourceSheetId,
"startRowIndex": range_list[4],
"endRowIndex": range_list[5],
"startColumnIndex": range_list[6], #last column
"endColumnIndex": range_list[7]
},
],
"color":{
"red":0.94,
"green":0.87,
"blue":0
}
},
},
"pieHole":0.75},
},
"position": {
"overlayPosition":{
"anchorCell":{
"sheetId": sourceSheetId,
"rowIndex": 0,
"columnIndex":range_list[8]
},
}
}
}
}
}
]
}
I have a bar chart with 3 kinds of bar: FOO, BAR and BAZ.
Horizontal axis are quarters.
BAR and BAZ use the same series. BAR (blue) becoming BAZ (orange) after Q1-17.
"rules": [{
"rule": "%kv > 1",
"background-color":"orange"
}]
How can I add BAZ (orange) to the legend?
zingchart.THEME = "classic";
var myConfig = {
"graphset": [{
"type": "bar",
"background-color": "white",
"plotarea": {
"margin": "80 60 100 60",
"y": "125px"
},
"legend": {
"layout": "x3",
"y": "13%",
"x": "34.5%",
"overflow": "page",
"toggle-action": "remove",
},
"scale-x": {
"labels": [
"Q4-16",
"Q1-17",
"Q2-17",
"Q3-17"
],
"markers": [{
"value-range": true,
"range": [1.5],
"line-color": "red",
"line-width": 1,
"line-style": "solid",
"type": "line"
}]
},
"series": [{
"values": [
37.47,
57.59,
45.65,
37.43
],
"background-color": "#8993c7",
"text": "FOO"
},
{
"values": [
13.4,
14.11,
14.89,
16.86
],
"background-color": "blue",
"text": "BAR",
"rules": [{
"rule": "%kv > 1",
"background-color": "orange"
}]
}
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 500,
width: 725
});
.zc-ref {
display: none;
}
<html>
<head>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script>
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
</script>
</head>
<body>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>
</html>
So one way to do it is split up your data. The easiest way to explain this is to make another series for "BAZ" and in the first two quarters have null values.
demo here
The main reason for doing it this way is maintaining the built in legend toggling functionality. This way when you click it wont turn off the whole series (blue and orange bars.) Which I assume is the intended functionality.
If you don't mind turning off blue and orange bars at the same time you can do the following to add another legend item. Add the text and color inside the series object. Essentially, create a blank series object.
...{
"text":"BAZ",
"background-color":"orange"
}...
non interactive legend demo here
If you are looking for something in between these two demos it will take some custom Javascript using the ZingChart API.
I need to put some additional labels on my charts, so I'm using shapes. Here is the result:
http://jsfiddle.net/z3n3qobm/91/
But I need to align the circles from the example with the labels of the X-axis. The chart must be responsive and the total of labels depends from the database.
I have a function that generates the initial position of the shapes in '%', but it misaligns when I change the window's size.
I did some calculations, but when the chart resizes it doesn't keep a fixed proportion.
Someone have an idea how to use shapes at the same position of the X-axis labels?
Unfortunately ZingChart does not provide a way to scale shapes and labels based on sizing. Hooks are available to position labels on nodes, but not on scale items themselves.
Now there I do have a solution to your issue, but just to be clear this is more of a hack utilizing tricks with ZingChart and multiple charts. I removed the shapes in your chart and decided to replicate those circles utilizing a second chart.
The main goal of this was to utilize a scatter chart, modify the look of each scatter node to replicate what you are trying to achieve, and to hide all the superficial items that were unnecessary (scales, removed plotarea margins). Do note that I'm using a mixed chart, one series for the scatter chart, and another for a dummy bar chart to force the scales to match how the chart above is displayed.
http://jsfiddle.net/mikeschultz/q6arebsu/1/
(Snippet below incase the jsfiddle is deleted in the future).
This can be also accomplished by combining the two charts into a single graphset, but I find working with separate charts is more flexible.
var myData = {
"graphset":[
{
"globals":{
"overflow":"visible"
},
"plot":{
"animation":{
"effect":"ANIMATION_EXPAND_BOTTOM",
"sequence":null,
"speed":10
},
"aspect":"jumped"
},
"plotarea": {
"margin-bottom": 30
},
"type":"mixed",
"series":[
{
"type":"bar",
"values":[46,46,53,50],
"background-color":"#5e36e6",
"value-box":{
"placement":"bottom-in",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":0
},
{
"type":"bar",
"values":[52,53,61,58],
"background-color":"#0099cd",
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":1
},
{
"type":"line",
"values":[150,105,399,159],
"marker":{
"size":0,
"border-width":0,
"background-color":"transparent"
},
"line-color":"#99cc33",
"line-width":3,
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":"."
},
"palette":2
}
],
"background-color":"#3F0767",
"scale-x":{
"tick":{
"alpha":0
},
"zooming":false,
"labels":["AB","CDE","FG","HI JKL"],
"line-width":0,
"zoom-to":null
},
"scale-y":{
"guide":{
"alpha":0.25,
"line-style":"solid",
"line-color":"#5a3b77"
},
"short":true,
"tick":{
"alpha":0
},
"line-width":0
},
"scroll-x":false
},
]
};
zingchart.render({
id : 'myChart',
data : myData,
height: 400
});
var bubbleConfig = {
type: 'mixed',
backgroundColor:"#3F0767",
scaleX: {
visible: false
},
scaleY: {
visible: false
},
plotarea: {
marginTop : 0,
marginBottom: 0,
maskTolerance: [0,0]
},
plot: {
marker: {
size: 30,
borderColor: '#371876',
borderWidth: 3,
backgroundColor: 'transparent'
},
tooltip: {
visible: false
}
},
scaleY: {
values: "0:2:1",
visible: false
},
series: [
{
type:'scatter',
values: [
[0,1],
[1,1],
[2,1],
[3,1]
],
valueBox: {
visible: true,
text: 'foobar',
fontColor: '#fff',
fontSize: '15px',
fontWeight: 'normal',
placement: 'over',
rules: [
{
rule: '%i == 0',
text: '35%'
},
{
rule: '%i == 1',
text: '51%'
},
{
rule: '%i == 2',
text: '15%'
},
{
rule: '%i == 3',
text: '36%'
}
]
}
},
{
type:'bar',
values: []
}
]
}
zingchart.render({
id : 'myBubbles',
data : bubbleConfig,
height: 80
});
<html>
<head>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
<div id='myBubbles'></div>
</body>
</html>