I am having an issue with a line chart on my site. Everything works fine about it except no matter what I try, I cannot get the crosshair-x value/scale to show up. http://gyazo.com/42a34d0fed9c2912bf7ed40eb0c55144 Both are set to "visible": true. My JSON code is as follows:
var myChart = {
"type": "line",
"background-color": "transparent",
"utc": true,
"title": {
"y": "0px",
"text": '#myClasses.STARTDATETIME.ToString("MM/d/yyyy (h:mm tt)")',
"background-color": "transparent",
"font-size": "16px",
"font-color": "#666",
"font-weight": "bold",
"letter-spacing": "0.1225em",
"height": "25px"
},
"plotarea": {
"margin":"10% 8% 14% 12%",
"background-color":"#666"
},
"legend": {
"visible": false,
},
"scale-x": {
"min-value": myEpoch,
"shadow": 0,
"step": #ViewBag.TotalTime,
"line-color": "#fff",
"tick": {
"line-color": "#f6f7f8"
},
"guide": {
"line-color": "#f6f7f8",
"visible": true
},
"item": {
"font-color": "#666"
},
"transform": {
"type": "date",
"all": "%D,%d %M<br />%h:%i %A",
"item": {
"visible": false
}
},
"label": {
"visible": false,
"font-color": "#666"
},
"minor-ticks": 0
},
"scale-y": {
"values": "25:200:25",
"line-color": "#fff",
"shadow": 0,
"tick": {
"line-color": "#f6f7f8"
},
"guide": {
"visible": false
},
"item": {
"font-color": "#666"
},
"label": {
"text": "Heart Rate (BPM)",
"font-color": "#666"
},
"minor-ticks": 0,
"thousands-separator": ",",
"markers": [
{
"type": "area",
"range": [25, 60],
"backgroundColor": "#585857",
"alpha": 1
},
{
"type": "area",
"range": [60, 95],
"backgroundColor": "#6FCBDC",
"alpha": 1
},
{
"type": "area",
"range": [95, 130],
"backgroundColor": "#8BC540",
"alpha": 1
},
{
"type": "area",
"range": [130, 165],
"backgroundColor": "#F38220",
"alpha": 1
},
{
"type": "area",
"range": [165, 200],
"backgroundColor": "#EB2026",
"alpha": 1
}
]
},
"tooltip": {
"font-color": "#666",
"visible": false
},
"chart": {
"marginRight": 30,
"marginLeft": 70
},
"plot": {
"tooltip-text": "%t bpm: %v",
"shadow": 0,
"line-width": "3px",
"marker": {
"type": "circle",
"size": 2
},
"hover-marker": {
"type": "circle",
"size": 4,
"border-width": "1px"
}
},
"series": [
{
"values": [88,96,93,88,88,86,89,120,144,153,156,132,113,145,138,152,135,155,164,165,147,143,152,140,153,138,116,125,131,132,134,124,111,136,167,171,165,168,139,129,138,130,140,141],
"text": "",
"line-color": "#ffffff",
"marker": {
"background-color": "#ffffff",
"border-width": 1,
"shadow": 0,
"border-color": "#ffffff",
"visible": true
},
"palette": 0
}
],
"crosshair-x": {
"line-color": "#f6f7f8",
"value-label": {
"border-radius": "5px",
"border-width": "1px",
"border-color": "#f6f7f8",
"padding": "0px 10px 0px 5px",
"font-weight": "bold",
"font-color": "#fff",
"background-color": "#666",
"visible": true
},
"scale-label": {
"font-color": "#fff",
"background-color": "#666",
"border-radius": "5px",
"border-width": "1px",
"border-color": "#f6f7f8",
"padding": "0px 10px 0px 5px",
"visible": true
}
}
};
Is there anything obvious that I'm missing that may be overruling those being set to visible?
Thanks in advance for your help!
Which version of ZingChart are you using? Does this occur in all browsers? Are you getting any console errors? I've taken your code and put it into our demo tool, and the crosshair seems to work. Take a look here.
You can try adding the following to the <head> element of your application:
<style title="zingchart"></style>
This forces ZingChart to inject its CSS into that element, preventing certain types of conflicts that can occur from time to time, but I'm not 100% sure that this is the issue.
I'm on the ZingChart support team, so I'd love to help, but I can't reproduce the issue on my end.
Related
I created the "New Failures Analysis" workbook in Azure Application Insights. In that, I added a custom chart using the below query to display the count of requests, failures, exceptions, etc. based on the cloud/roleName property.
{
"type": 10,
"content": {
"chartId": "xxxxxxxxxxxxxxxxxxx",
"version": "MetricsItem/2.0",
"size": 3,
"chartType": 0,
"resourceType": "microsoft.insights/components",
"metricScope": 0,
"resourceIds": [
"xxxxxxxxxxx"
],
"timeContext": {
"durationMs": 86400000
},
"metrics": [
{
"namespace": "microsoft.insights/components",
"metric": "microsoft.insights/components--requests/count",
"aggregation": 7
},
{
"namespace": "microsoft.insights/components",
"metric": "microsoft.insights/components--requests/failed",
"aggregation": 7
},
{
"namespace": "microsoft.insights/components",
"metric": "microsoft.insights/components--exceptions/count",
"aggregation": 7
},
{
"namespace": "microsoft.insights/components",
"metric": "microsoft.insights/components--requests/duration",
"aggregation": 4
},
{
"namespace": "microsoft.insights/components",
"metric": "microsoft.insights/components--requests/rate",
"aggregation": 4
}
],
"gridFormatType": 2,
"filters": [
{
"key": "cloud/roleName",
"operator": 0,
"values": [
"xxxxxxxxx"
]
}
],
"gridSettings": {
"formatters": [
{
"columnMatch": "Subscription",
"formatter": 5
},
{
"columnMatch": "Name",
"formatter": 5,
"formatOptions": {
"linkTarget": "Resource"
}
},
{
"columnMatch": "Segment",
"formatter": 5
},
{
"columnMatch": "microsoft.insights/components--requests/count",
"formatter": 8,
"formatOptions": {
"min": 0,
"max": 5000,
"palette": "green"
},
"numberFormat": {
"unit": 0,
"options": {
"style": "decimal"
}
}
},
{
"columnMatch": "microsoft.insights/components--requests/count Timeline",
"formatter": 5
},
{
"columnMatch": "microsoft.insights/components--requests/failed",
"formatter": 8,
"formatOptions": {
"min": 0,
"max": 20,
"palette": "orangeRed"
},
"numberFormat": {
"unit": 0,
"options": {
"style": "decimal"
}
}
},
{
"columnMatch": "microsoft.insights/components--requests/failed Timeline",
"formatter": 5
},
{
"columnMatch": "microsoft.insights/components--exceptions/count",
"formatter": 8,
"formatOptions": {
"min": 0,
"max": 20,
"palette": "yellowOrangeRed"
},
"numberFormat": {
"unit": 0,
"options": {
"style": "decimal"
}
}
},
{
"columnMatch": "microsoft.insights/components--exceptions/count Timeline",
"formatter": 5
},
{
"columnMatch": "microsoft.insights/components--requests/duration",
"formatter": 8,
"formatOptions": {
"min": 0,
"max": 1000,
"palette": "yellowGreenBlue"
}
},
{
"columnMatch": "microsoft.insights/components--requests/duration Timeline",
"formatter": 5
},
{
"columnMatch": "microsoft.insights/components--requests/rate",
"formatter": 8,
"formatOptions": {
"min": 0,
"palette": "blueGreen"
},
"numberFormat": {
"unit": 31,
"options": {
"style": "decimal"
}
}
},
{
"columnMatch": "microsoft.insights/components--requests/rate Timeline",
"formatter": 5
}
],
"rowLimit": 10000,
"labelSettings": [
{
"columnId": "microsoft.insights/components--requests/count",
"label": "Requests"
},
{
"columnId": "microsoft.insights/components--requests/count Timeline",
"label": "microsoft.insights/components--requests/count (Count) Timeline"
},
{
"columnId": "microsoft.insights/components--requests/failed",
"label": "Failed"
},
{
"columnId": "microsoft.insights/components--requests/failed Timeline",
"label": "microsoft.insights/components--requests/failed (Count) Timeline"
},
{
"columnId": "microsoft.insights/components--exceptions/count",
"label": "Exceptions"
},
{
"columnId": "microsoft.insights/components--exceptions/count Timeline",
"label": "microsoft.insights/components--exceptions/count (Count) Timeline"
},
{
"columnId": "microsoft.insights/components--requests/duration",
"label": "Avg Response Time"
},
{
"columnId": "microsoft.insights/components--requests/duration Timeline",
"label": "microsoft.insights/components--requests/duration (Average) Timeline"
},
{
"columnId": "microsoft.insights/components--requests/rate",
"label": "Request Rate"
},
{
"columnId": "microsoft.insights/components--requests/rate Timeline",
"label": "microsoft.insights/components--requests/rate (Average) Timeline"
}
]
}
},
"name": "metric - 01"
}
The above query worked fine a few days ago, but suddenly this query is not giving any results, even though the logs are available in the Azure Application Insights for the specific cloud/roleName property.
The metric ID doesn't look quite right. When I add a metric in Workbooks, say, failed requests, I get the ID "metric": "microsoft.insights/components-Failures-requests/failed" instead of "metric": "microsoft.insights/components--requests/failed". I'm curious how this Workbook JSON was generated? I would recreate this metrics step again and check if the issue persists. If it does, also check if you are seeing no results in the Metrics blade as well. If the Workbook continues to show incorrect results afterwards, I would recommend submitting a support request.
is it possible to change view from list to thumbnail on document library sharepoint 2016?
I've searched for documentation on google, youtube, microsoft still can't find the answer, please help. Currently the display of the user is still a list
You could achieve this by using view formatting.
Make sure your library contains 'Type', 'Create by' and 'Type' column.
1.View -> formatting current view -> Prase following code.
enter image description here
2.Choose layout to 'Gallery'-> save.
code template:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json Jump ",
"tileProps": {
"hideSelection": true,
"height": "280",
"width": "300",
"formatter": {
"elmType": "div",
"style": {
"align-items": "stretch",
"margin": "3px 2px",
"background-color": "#fbfbfb",
"height": "380px",
"overflow": "inherit",
"border-radius": "2px",
"box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"position": "relative",
"padding-bottom": "10px",
"width": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"margin-top": "0px",
"height": "200px",
"display": "block",
"align-items": "center",
"justify-content": "center",
"position": "relative",
"border-bottom": "1px solid #EEE",
"overflow": "hidden",
"border-radius": "2px 2px 0 0"
},
"children": [
{
"elmType": "button",
"style": {
"position": "absolute",
"height": "100%",
"width": "100%",
"opacity": "0",
"cursor": "pointer"
},
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "div",
"style": {
"width": "=if([$File_x0020_Type] == '', '100px', '100%')",
"height": "=if([$File_x0020_Type] == '', '100px', '100%')",
"oveflow": "=if([$File_x0020_Type] == '', 'auto', 'hidden')",
"text-align": "center",
"overflow": "hidden"
},
"children": [
{
"elmType": "img",
"style": {
"height": "=if([$File_x0020_Type] == '', '100%', '0'"
},
"attributes": {
"src": "=if([$File_x0020_Type] == '', 'https://spoprod-a.akamaihd.net/files/fabric/office-ui-fabric-react-assets/foldericons-fluent/folder-large_frontplate_nopreview.svg Jump ', '')"
}
},
{
"elmType": "img",
"style": {
"display": "=if([$File_x0020_Type] == '', 'none', '')"
},
"attributes": {
"src": "#thumbnail.383x383"
}
}
]
}
]
},
{
"elmType": "div",
"style": {
"margin": "25px 0 0 0",
"position": "absolute",
"top": "153px",
"width": "100%",
"color": "#333333"
},
"attributes": {
"class": "ms-fontSize-14 ms-fontWeight-semibold"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=if([$File_x0020_Type] == 'docx', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/docx.svg?v6 Jump ', if([$File_x0020_Type] == 'xlsx', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/xlsx.svg?v6 Jump ', if([$File_x0020_Type] == 'pptx', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/pptx.svg?v6 Jump ', if([$File_x0020_Type] == 'pdf', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/pdf.svg?v6 Jump ', if([$File_x0020_Type] == 'jpg' || [$File_x0020_Type] == 'png' || [$File_x0020_Type] == 'gif','https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/photo.svg?v6 Jump ', if([$File_x0020_Type] == 'mp4' || [$File_x0020_Type] == 'avi' || [$File_x0020_Type] == 'mov', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/video.svg?v6 Jump ', if([$File_x0020_Type] == 'zip', 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/zip.svg?v6 Jump ','Unknown')))))))"
},
"style": {
"flex": "none",
"line-height": "100%",
"font-weight": "normal",
"font-size": "2rem",
"margin": "5px 5px 5px 10px",
"height": "25px"
}
},
{
"elmType": "div",
"txtContent": "[$FileLeafRef]",
"style": {
"padding": "0 0 0 16px"
}
},
{
"elmType": "div",
"txtContent": "='edited by ' + [$Editor.title]",
"style": {
"padding": "0 0 0 16px"
}
}
]
}
]
}
]
}
}
}
I have a json file for load assets generated with phaser editor.
i have a file boot.js for load a image for make load bar, and preloasder.js for load other assets file.
in the browser console does not appears some kind of error, but the image isn't load.
boot.js
runner.Boot.prototype = {
preload: function() {
this.load.pack('boot', 'assets/pack.json'); //this not work
//this.load.image('logo','assets/img/logo.png');//this work
resize();
},
[...]
update: function(){
this.scene.start('Preloader');
}
in file preloader.js
this.preloadLogo = this.add.sprite(0, 0, 'logo');
but the key 'logo' is not load.
the file content in pack.json has not been loaded.
the content of pack.json
{
"boot": [{
"type": "image",
"key": "logo",
"url": "assets/img/logo.png",
"overwrite": false
}],
"preloader": [
{
"type": "spritesheet",
"key": "coin",
"url": "assets/img/coin.png",
"frameWidth": 20,
"frameHeight": 20,
"frameMax": -1,
"margin": 0,
"spacing": 0
},
{
"type": "spritesheet",
"key": "fire",
"url": "assets/img/fire.png",
"frameWidth": 40,
"frameHeight": 70,
"frameMax": -1,
"margin": 0,
"spacing": 0
},
{
"type": "spritesheet",
"key": "gattoboy",
"url": "assets/img/gattoboy.png",
"frameWidth": 64,
"frameHeight": 128,
"frameMax": -1,
"margin": 0,
"spacing": 0
},
{
"type": "spritesheet",
"key": "mountain",
"url": "assets/img/mountain.png",
"frameWidth": 512,
"frameHeight": 512,
"frameMax": -1,
"margin": 0,
"spacing": 0
},
{
"type": "image",
"key": "platform",
"url": "assets/img/platform.png",
"overwrite": false
},
{
"type": "image",
"key": "loader",
"url": "assets/img/loader.png",
"overwrite": false
},
{
"type": "image",
"key": "five",
"url": "assets/img/five.png",
"overwrite": false
},
{
"type": "image",
"key": "loader-frame",
"url": "assets/img/loader-frame.png",
"overwrite": false
},
{
"type": "image",
"key": "phaser",
"url": "assets/img/phaser.png",
"overwrite": false
}
],
"meta": {
"generated": "1576167834682",
"app": "Phaser Editor",
"url": "http://phasereditor.boniatillo.com",
"version": "1.0",
"copyright": "Arian Fornaris (c) 2015,2016"
}
}
I am trying to update tables in Google Documents with the new API. Tables are linked from a Google Sheet.
I tried the API explorer in google cloud. I am able to extract the document in json format and then filter out the tables. But within the table json structure, I do not find anything that I can update, I do not find anything that links the table to a spreadsheet. It is plain text (from the cells in the spreadsheet).
Here I am sharing one table from the json, with 2 rows and 1 column with "Written English" and "Verbal English" as cell value.
"table": {
"rows": 2,
"columns": 1,
"tableRows": [
{
"startIndex": 77,
"endIndex": 95,
"tableCells": [
{
"startIndex": 78,
"endIndex": 95,
"content": [
{
"startIndex": 79,
"endIndex": 95,
"paragraph": {
"elements": [
{
"startIndex": 79,
"endIndex": 94,
"textRun": {
"content": "Written English",
"textStyle": {
"underline": true,
"foregroundColor": {
"color": {
"rgbColor": {
"red": 0.06666667,
"green": 0.33333334,
"blue": 0.8
}
}
},
"fontSize": {
"magnitude": 24,
"unit": "PT"
},
"weightedFontFamily": {
"fontFamily": "Arial",
"weight": 400
}
}
}
},
{
"startIndex": 94,
"endIndex": 95,
"textRun": {
"content": "\n",
"textStyle": {
"foregroundColor": {
"color": {
"rgbColor": {
"red": 0.8784314,
"green": 0.16078432,
"blue": 0.42352942
}
}
},
"fontSize": {
"magnitude": 24,
"unit": "PT"
},
"weightedFontFamily": {
"fontFamily": "Arial",
"weight": 400
}
}
}
}
],
"paragraphStyle": {
"namedStyleType": "NORMAL_TEXT",
"lineSpacing": 115,
"direction": "LEFT_TO_RIGHT",
"spacingMode": "COLLAPSE_LISTS",
"spaceAbove": {
"unit": "PT"
},
"avoidWidowAndOrphan": false
}
}
}
],
"tableCellStyle": {
"rowSpan": 1,
"columnSpan": 1,
"backgroundColor": {
"color": {
"rgbColor": {
"red": 1,
"green": 1,
"blue": 1
}
}
},
"borderLeft": {
"color": {
"color": {
"rgbColor": {
"red": 1,
"green": 1,
"blue": 1
}
}
},
"width": {
"magnitude": 0.75,
"unit": "PT"
},
"dashStyle": "SOLID"
},
"borderRight": {
"color": {
"color": {
"rgbColor": {
"red": 1,
"green": 1,
"blue": 1
}
}
},
"width": {
"magnitude": 0.75,
"unit": "PT"
},
"dashStyle": "SOLID"
},
"borderTop": {
"color": {
"color": {
"rgbColor": {
"red": 1,
"green": 1,
"blue": 1
}
}
},
"width": {
"magnitude": 0.75,
"unit": "PT"
},
"dashStyle": "SOLID"
},
"borderBottom": {
"color": {
"color": {
"rgbColor": {
"red": 1,
"green": 1,
"blue": 1
}
}
},
"width": {
"magnitude": 0.75,
"unit": "PT"
},
"dashStyle": "SOLID"
},
"paddingLeft": {
"magnitude": 2,
"unit": "PT"
},
"paddingRight": {
"magnitude": 2,
"unit": "PT"
},
"paddingTop": {
"magnitude": 2,
"unit": "PT"
},
"paddingBottom": {
"magnitude": 2,
"unit": "PT"
},
"contentAlignment": "BOTTOM"
}
}
],
"tableRowStyle": {
"minRowHeight": {
"magnitude": 15,
"unit": "PT"
}
}
},
{
"startIndex": 95,
"endIndex": 112,
"tableCells": [
{
"startIndex": 96,
"endIndex": 112,
"content": [
{
"startIndex": 97,
"endIndex": 112,
"paragraph": {
"elements": [
{
"startIndex": 97,
"endIndex": 111,
"textRun": {
"content": "Verbal English",
"textStyle": {
"underline": true,
"foregroundColor": {
"color": {
"rgbColor": {
"red": 0.06666667,
"green": 0.33333334,
"blue": 0.8
}
}
},
"fontSize": {
"magnitude": 14,
"unit": "PT"
},
"weightedFontFamily": {
"fontFamily": "Raleway",
"weight": 400
}
}
}
},
{
"startIndex": 111,
"endIndex": 112,
"textRun": {
"content": "\n",
"textStyle": {
"foregroundColor": {
"color": {
"rgbColor": {
"red": 0.8784314,
"green": 0.16078432,
"blue": 0.42352942
}
}
},
"fontSize": {
"magnitude": 14,
"unit": "PT"
},
"weightedFontFamily": {
"fontFamily": "Arial",
"weight": 400
}
}
}
}
],
"paragraphStyle": {
"namedStyleType": "NORMAL_TEXT",
"lineSpacing": 115,
"direction": "LEFT_TO_RIGHT",
"spacingMode": "COLLAPSE_LISTS",
"spaceAbove": {
"unit": "PT"
},
"avoidWidowAndOrphan": false
}
}
}
],
"tableCellStyle": {
"rowSpan": 1,
"columnSpan": 1,
"backgroundColor": {
},
"borderLeft": {
"color": {
"color": {
"rgbColor": {
"red": 1,
"green": 1,
"blue": 1
}
}
},
"width": {
"magnitude": 0.75,
"unit": "PT"
},
"dashStyle": "SOLID"
},
"borderRight": {
"color": {
"color": {
"rgbColor": {
"red": 1,
"green": 1,
"blue": 1
}
}
},
"width": {
"magnitude": 0.75,
"unit": "PT"
},
"dashStyle": "SOLID"
},
"borderTop": {
"color": {
"color": {
"rgbColor": {
"red": 1,
"green": 1,
"blue": 1
}
}
},
"width": {
"magnitude": 0.75,
"unit": "PT"
},
"dashStyle": "SOLID"
},
"borderBottom": {
"color": {
"color": {
"rgbColor": {
"red": 1,
"green": 1,
"blue": 1
}
}
},
"width": {
"magnitude": 0.75,
"unit": "PT"
},
"dashStyle": "SOLID"
},
"paddingLeft": {
"magnitude": 2,
"unit": "PT"
},
"paddingRight": {
"magnitude": 2,
"unit": "PT"
},
"paddingTop": {
"magnitude": 2,
"unit": "PT"
},
"paddingBottom": {
"magnitude": 2,
"unit": "PT"
},
"contentAlignment": "BOTTOM"
}
}
],
"tableRowStyle": {
"minRowHeight": {
"magnitude": 15,
"unit": "PT"
}
}
}
],
"tableStyle": {
"tableColumnProperties": [
{
"widthType": "FIXED_WIDTH",
"width": {
"magnitude": 363,
"unit": "PT"
}
}
]
}
}
In short, I am trying to programmatically do what "UPDATE" button does on a linked table in Google Docs.
Looking forward to any help.
Thanks.
The issue is created here in the issuetracker. Star(on the top left) the issue to help Google priorotize the issue!
I updated our instance of the ZingChart script to version 2.5.2 today and doing so caused labels to disappear from a chart where they previously showed. I'm not sure if it's an issue with my JSON that just managed not to throw any errors in the previous version of ZingChart or if it's a bug with the current release.
Before:
After:
My JSON:
var maxYValue = 60;
var value1 = 40;
var value2 = 15;
var value3 = 34;
var value4 = 14;
var value5 = 20;
var zones_1 = {
"type": "mixed",
"font-family": "proxima_nova_rgregular",
"title": {
"text": "MINUTES <b>IN ZONES</b>",
"font-family": "proxima_nova_rgregular",
"background-color": "none",
"font-color": "#39393d",
"font-size": "22px",
"adjustLayout": true,
"padding-bottom": 50
},
"plot": {
"borderRadius": "5px 5px 0 0",
"bar-width": '50%',
"animation": {
"delay": 300,
"effect": 11,
"speed": "500",
"method": "0",
"sequence": "3",
"z-index": 2
},
"value-box": {
"placement": "top-out",
"text": "%v",
"decimals": 0,
"font-color": "#35353b",
"font-size": "14px",
"alpha": 1,
"backgroundColor": "#ffffff",
"padding": "5px 5px 0px 5px",
"shadow": false
}
},
"plotarea": {
"border-left": "3px solid #39393d",
"border-bottom": "3px solid #39393d",
"padding-left": "3px",
"margin": "dynamic",
"background-color": "none"
},
"tooltip": {
"visible": false
},
"scale-x": {
"placement": "opposite",
"line-width": 0,
"tick": {
"visible": false
},
"guide": {
"visible": false
},
"item": {
"visible": false
},
},
"scale-y": {
"offsetEnd": 45,
"max-value": maxYValue,
"visible": false,
"line-width": 0,
"guide": {
"visible": false
}
},
"series": [
{
"type": "bar",
"values": [
value1, value2, value3, value4, value5
],
"background-color": "#cdcccc",
"z-index": 2,
"styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
},
{
"type": "line",
"line-color": "grey",
"marker": { "visible": 0 },
"value-box": { visible: 0 },
"values": [
[0, value1 + 2],
[0, maxYValue],
[0, null],
[1, value2 + 2],
[1, maxYValue],
[1, null],
[2, value3 + 2],
[2, maxYValue],
[2, null],
[3, value4 + 2],
[3, maxYValue],
[3, null],
[4, value5 + 2],
[4, maxYValue],
[4, null],
]
}
],
"labels": [
{
"text": "Zone 1",
"font-size": "13px",
"padding": "10px 5px",
"borderWidth": 1,
"borderColor": "#ffffff",
"backgroundColor": "#ffffff",
"callout": true,
"calloutWidth": 0,
"calloutHeight": 5,
'hook': 'scale:name=scale-x,index=0',
'offset-y': -200,
"calloutTip": {
'offset-y': -200,
"type": "circle",
"background-color": "#fff",
"border-width": 2,
"border-color": "#35353b",
"size": 7,
"shadow": false
}
},
{
"text": "Zone 2",
"font-size": "13px",
"padding": "10px 5px",
"borderWidth": 1,
"borderColor": "#ffffff",
"backgroundColor": "#ffffff",
"callout": true,
"calloutWidth": 0,
"calloutHeight": 5,
'hook': 'scale:name=scale-x,index=1',
'offset-y': -200,
"calloutTip": {
'offset-y': -200,
"type": "circle",
"background-color": "#fff",
"border-width": 2,
"border-color": "#35353b",
"size": 7,
"shadow": false
}
},
{
"text": "Zone 3",
"font-size": "13px",
"padding": "10px 5px",
"borderWidth": 1,
"borderColor": "#ffffff",
"backgroundColor": "#ffffff",
"callout": true,
"calloutWidth": 0,
"calloutHeight": 5,
'hook': 'scale:name=scale-x,index=2',
'offset-y': -200,
"calloutTip": {
'offset-y': -200,
"type": "circle",
"background-color": "#fff",
"border-width": 2,
"border-color": "#35353b",
"size": 7,
"shadow": false
}
},
{
"text": "Zone 4",
"font-size": "13px",
"padding": "10px 5px",
"borderWidth": 1,
"borderColor": "#ffffff",
"backgroundColor": "#ffffff",
"callout": true,
"calloutWidth": 0,
"calloutHeight": 5,
'hook': 'scale:name=scale-x,index=3',
'offset-y': -200,
"calloutTip": {
'offset-y': -200,
"type": "circle",
"background-color": "#fff",
"border-width": 2,
"border-color": "#35353b",
"size": 7,
"shadow": false
}
},
{
"text": "Zone 5",
"font-size": "13px",
"padding": "10px 5px",
"borderWidth": 1,
"borderColor": "#ffffff",
"backgroundColor": "#ffffff",
"callout": true,
"calloutWidth": 0,
"calloutHeight": 5,
'hook': 'scale:name=scale-x,index=4',
'offset-y': -200,
"calloutTip": {
'offset-y': -200,
"type": "circle",
"background-color": "#fff",
"border-width": 2,
"border-color": "#35353b",
"size": 7,
"shadow": false
}
}
],
}
Any help would be greatly appreciated. I would prefer to keep the most updated version of the script but really need those labels back.
I can't speak to exactly what the cause of your issue is between builds at the moment but our team will look into it. I did however look at your JSON and I think you can get the output you are looking for in an easier way. I have included an updated chart config below which does work on the newest build.
Full disclosure on the ZingChart team.
var maxYValue = 60;
var value1 = 40;
var value2 = 15;
var value3 = 34;
var value4 = 14;
var value5 = 20;
var myConfig ={
"type": "mixed",
"font-family": "proxima_nova_rgregular",
"title": {
"text": "MINUTES <b>IN ZONES</b>",
"font-family": "proxima_nova_rgregular",
"background-color": "none",
"font-color": "#39393d",
"font-size": "22px",
"adjustLayout": true,
"padding-bottom": 50
},
"plot": {
"borderRadius": "5px 5px 0 0",
"bar-width": '50%',
"animation": {
"delay": 300,
"effect": 11,
"speed": "500",
"method": "0",
"sequence": "3",
"z-index": 2
},
"value-box": {
"placement": "top-out",
"text": "%v",
"decimals": 0,
"font-color": "#35353b",
"font-size": "14px",
"alpha": 1,
"backgroundColor": "#ffffff",
"padding": "5px 5px 0px 5px",
"shadow": false
}
},
"plotarea": {
"border-left": "3px solid #39393d",
"border-bottom": "3px solid #39393d",
"padding-left": "3px",
"margin": "dynamic",
"background-color": "none"
},
"tooltip": {
"visible": false
},
"scale-x": {
"placement": "opposite",
"labels":["Zone 1","Zone 2","Zone 3","Zone 4","Zone 5"],//set zone label here. Much easier than labals:[]
"line-width": 0,
"tick": {
"visible": false
},
"guide": {
"visible": false
},
"item": {
"offsetY": 25,
"font-size": 12,
"fontColor": 'black',
"bold": true
},
},
"scale-y": {
"offsetEnd": 45,
"max-value": maxYValue,
"visible": false,
"line-width": 0,
"guide": {
"visible": false
}
},
"series": [
{
"type": "bar",
"values": [
value1, value2, value3, value4, value5
],
"background-color": "#cdcccc",
"z-index": 2,
"styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
},
{
"type": "line",
"line-color": "gray",
"marker": {
"backgroundColor":"white",
"borderWidth": 3,
"borderColor":"gray",
"visible": false,
"rules":[//create marker which is always at the top of line
{
'rule':" %node-index%3 == 1 ",
visible: true,
size: 10
}
]
},
"value-box": {
visible: 0
},
"values": [
[0, value1 + 2],
[0, maxYValue],
[0, null],
[1, value2 + 2],
[1, maxYValue],
[1, null],
[2, value3 + 2],
[2, maxYValue],
[2, null],
[3, value4 + 2],
[3, maxYValue],
[3, null],
[4, value5 + 2],
[4, maxYValue],
[4, null],
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<!--Inject End-->
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
The issue is the offset-y attribute set for the labels & the callout tip. It needs to be removed or set to zero. The new lib code is correct because scale-x has "placement": "opposite" so it is placed above (if you remove visible:false from items you will see).
Most likely the old code was not using the correct y position of the scale thats why you had to use offset-y to correct it.