I am using zingchart's scatter chart to visualize my datas. I want to change color of some datas with value greater than for example 60. Is it possible? Here is my code, but it doesn't work:
var myConfig = {
"type": "scatter",
"plot": {
"tooltip": {
"text": "%k (Date), %v (Value)."
},
"rules": [
{
"rule": "%v > 60",
"scatter-color": "#c00"
}
]
},
"series": [
{
"values": c
}
],
"title" : {
"text" : qualityData.ParameterName
},
"scale-x": {
"zooming": true,
"step": "1hour",
"transform": {
"type": "date",
"all": "%d.%m.%Y %H:%i:%s"
}
},
"scale-y": {
"zooming": true,
"markers": [
{
"type": "line",
"line-width": 2,
"text": "Lower tolerance",
"range": [qualityData.ToleranceMin, qualityData.ToleranceMin],
"line-color": "red"
},
{
"type": "line",
"line-width": 2,
"text": "Upper tolerance",
"range": [qualityData.ToleranceMax, qualityData.ToleranceMax],
"line-color": "red"
}
],
},
"preview": {
"visible": true
}
};
And here is how my chart looks like:
Quick Fix
You need to move rules into the plot.marker object and you need to change scatter-color to backgroundColor.
Conditional Styling
You can implement your conditional styling in two ways:
rules
jsRule
rules attribute
Define a rule like you have above and it will run an if statement on each node. You can have multiple rules and an easy semantic way to define conditional styling.
Docs here: https://www.zingchart.com/docs/tutorials/elements/rules
Demo here: https://app.zingsoft.com/demos/create/J6W2EALF
jsRule attribute
A Javascript alternative to rules which is much more performant. rules are an if statement that gets run every node. So if you have lots of nodes, you will have lot of code execution, thus slowing down your chart.
Docs here: https://blog.zingchart.com/make-a-custom-tooltip/
Demo here: https://app.zingsoft.com/demos/create/T8WOXT5V
// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
type: 'scatter',
globals: {
fontSize: '14px'
},
title: {
text: 'A Simple Scatter Chart',
fontSize: '24px'
},
legend: {
cursor: 'hand',
draggable: true
},
// plot represents general series, or plots, styling
plot: {
// hoverstate
tooltip: {
// % symbol represents a token to insert a value. Full list here:
// https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
text: '%plot-text %kl was %v (°F)',
padding: '10px 15px',
borderRadius: '3px',
// htmlMode renders text attribute as html so
// ° is rendered
htmlMode: true
},
// animation docs here:
// https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
animation: {
effect: 'ANIMATION_SLIDE_TOP',
method: 'ANIMATION_BOUNCE_EASE_OUT',
sequence: 'ANIMATION_BY_PLOT',
speed: 375
},
lineWidth: '3px',
// line node styling
marker: {
borderWidth: '0px',
size: '6px',
rules: [
{
rule: '%v > 40',
backgroundColor: '#000'
},
{
rule: '%v < 20',
backgroundColor: '#000'
}
],
}
},
scaleX: {
// set scale label
label: {
text: 'Days'
},
// convert text on scale indices
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
scaleY: {
// scale label with unicode character
label: {
text: 'Temperature (°F)'
},
markers: [
{
type: 'line',
lineWidth:2,
range: [40],
label: {
text: 'Upper Tolerance'
}
},
{
type: 'line',
lineWidth:2,
range: [20],
label: {
text: 'Lower Tolerance'
}
}
]
},
series: [
{
values: [[1, 9], [2, 15], [3, 21], [4, 30], [5, 40], [6, 59], [7, 60], [8, 75], [9, 81], [10, 99]]
},
{
values: [[0.9, 3], [2.1, 13], [3.5, 25], [4.9, 35], [5.3, 41], [6.5, 57], [7.1, 61], [8.7, 70], [9.2, 82], [9.9, 95]]
},
{
values: [[0.1, 9], [1.8, 21], [1.9, 29], [4.1, 33], [4.5, 39], [6.9, 51], [7.4, 64], [8.9, 70], [9, 75], [9.3, 93]]
},
{
values: [[0.3, 11], [0.9, 15], [1.1, 24], [2.3, 29], [2.9, 30], [3.3, 35], [5.6, 67], [6.9, 70], [7.3, 71], [8.9, 90]]
},
{
values: [[0.5, 5], [1.9, 5], [2.5, 10], [3.1, 30], [6.5, 45], [6.9, 74], [7.2, 50], [7.8, 56], [8, 61], [8.5, 71]]
}
]
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 150px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
</body>
</html>
Related
I need to design the same below image chart example in Highchart.js which is built in excel. Can anyone please help me to develop this in highcharts.js only like the below image?
Image Preview
I already have implemented it in a similar way. But I need this in a different group of colors and combinations in the same chart. -
`https://jsfiddle.net/shwetapandey/rwmxoka5`
I suggest to add new series, with different xAxis, series.columnrange.xAxis. To styling you have options to adjust like xAxis.left and xAxis.top.
chart: {
type: 'columnrange',
},
xAxis: [{
width: '33%',
offset: 0,
}, {
left: '50%',
width: '33%',
offset: 0,
}],
plotOptions: {
xAxis: {
labels: {
enabled: true
}
},
columnrange: {
grouping: false,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Joe',
color: '#E5DDE3',
data: [
[-5, 5],
[-10, 10],
[-13, 13],
[-16, 16],
[-19, 19]
]
},
{
name: 'Jane',
color: '#BEA9BA',
data: [
[-3.5, 3.5],
[-6, 6],
[-7, 7],
[-9, 9],
[-12, 12]
]
},
{
color: '#A5879E',
name: 'John',
data: [
[-1.5, 1.5],
[-2, 2],
[-3, 3],
[-4, 4],
[-5, 5]
]
},
{
name: 'Joe1',
color: '#FFA500',
xAxis: 1,
data: [
[-5, 5],
[-10, 10],
[-13, 13],
[-16, 16],
[-19, 19]
].reverse()
},
{
name: 'Jane1',
color: '#FFA500',
xAxis: 1,
data: [
[-3.5, 3.5],
[-6, 6],
[-7, 7],
[-9, 9],
[-12, 12]
]
},
{
color: '#FFA500',
name: 'John1',
xAxis: 1,
data: [
[-1.5, 1.5],
[-2, 2],
[-3, 3],
[-4, 4],
[-5, 5]
]
}
]
Demo: https://jsfiddle.net/BlackLabel/cpjgvds9/
To control each series you need to write a custom legend control, for this you can use legend.labelFormatter, that give you callback function to format each of the series' labels.
EDIT ------
To control many group series I used callback function events.legendItemClick builded in series events. They give way to manage series at legend in that case I compare name of series and index of items to hide and show group of series with custom legend.
events: {
legendItemClick: function() {
let name = this.name.substring(this.name.length - 1, this.name.length);
let _i = this._i;
this.chart.series.forEach(function(p, i) {
console.log('p: ', p, 'i: ', i);
if (name === p.name.substring(p.name.length - 1, p.name.length) && _i !== p._i) {
(!p.visible) ? p.show(): p.hide()
}
})
}
}
Demo: https://jsfiddle.net/BlackLabel/v0kt5b14
I'm making a chart here and I have a little problem with removing the distance between the boxes
var myConfig = {
type: 'bar',
legend: {
layout: "x4",
overflow : "page",
shadow : false,
align : "left",
alpha :0.05,
"adjust-layout": true,
marker : {
type : "circle",
size : "7px",
"border-color" :"none"
}
},
scaleX: {
// convert text on scale indices
labels: ['Automotive', 'Retail', 'Wholesale']
},
plot: {
barWidth:"50%",
animation: {
effect: 'ANIMATION_EXPAND_BOTTOM',
method: 'ANIMATION_STRONG_EASE_OUT',
sequence: 'ANIMATION_BY_NODE',
speed: 275,
}
},
series: [
{
// plot 1 values, linear data
values: [23, 20, 27],
text: 'Sum of target Premi',
backgroundColor: '#fa6383',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [35, 42, 33],
text: 'Sum of premi Leads',
backgroundColor: '#fb9f40',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [15, 22, 13],
text: 'Sum of premi Activity',
backgroundColor: '#fdcd55',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [15, 22, 13],
text: 'Sum of premi Booking',
backgroundColor: '#4bc0c1',
borderRadius: 5,
}
]
};
for my settings like this. there are suggestions so there can be no space ?
i have try documentation but does not work.
https://www.zingchart.com/docs/chart-types/bar
I'm not sure that I correctly understood your problem but probably you can try to use "barsOverlap" in "plot" configuration to achieve the desired result.
var myConfig = {
type: 'bar',
legend: {
layout: "x4",
overflow : "page",
shadow : false,
align : "left",
alpha :0.05,
"adjust-layout": true,
marker : {
type : "circle",
size : "7px",
"border-color" :"none"
}
},
scaleX: {
// convert text on scale indices
labels: ['Automotive', 'Retail', 'Wholesale']
},
plot: {
barWidth:"50%",
barsOverlap: '50%',
animation: {
effect: 'ANIMATION_EXPAND_BOTTOM',
method: 'ANIMATION_STRONG_EASE_OUT',
sequence: 'ANIMATION_BY_NODE',
speed: 275,
}
},
series: [
{
// plot 1 values, linear data
values: [23, 20, 27],
text: 'Sum of target Premi',
backgroundColor: '#fa6383',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [35, 42, 33],
text: 'Sum of premi Leads',
backgroundColor: '#fb9f40',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [15, 22, 13],
text: 'Sum of premi Activity',
backgroundColor: '#fdcd55',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [15, 22, 13],
text: 'Sum of premi Booking',
backgroundColor: '#4bc0c1',
borderRadius: 5,
}
]
};
I have created the following radar chart using this code. Codepen
data = [{
type: 'scatterpolar',
r: [39, 28, 8, 7, 28, 39],
theta: ['A','B','C', 'D', 'E', 'A'],
fill: 'toself'
}]
layout = {
polar: {
radialaxis: {
visible: true,
range: [0, 50]
}
},
showlegend: false
}
Plotly.newPlot("myDiv", data, layout)
Which results in this:
How can I set the color of each of the dots shaping the polygon?
With this tool, online graph maker, it seems you can set the colors on a scale, but I would like to set each on of the dots separately,
Any direction to how to customize the rest of the elements will be very helpful.
Thanks.
#myDiv path.point{
fill: blue !important;
}
And if you want to further customize the colors you can use CSS :nth-of-type(n) modifier https://www.w3schools.com/cssref/sel_nth-of-type.asp
data = [{
type: 'scatterpolar',
r: [37, 28, 8, 7, 28, 39],
theta: ['A','B','C', 'D', 'E', 'A'],
fill: 'toself',
marker : { color : '#B80102'}
}]
layout = {
polar: {
radialaxis: {
visible: true,
range: [0, 50]
}
},
showlegend: false
}
Plotly.newPlot("myDiv", data, layout)
#myDiv path.point{
fill: blue !important;
}
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
There are ton of possible configurations, and exploring you can get a an idea of any possible setup you might think of. Plotly is truly amazing.
For the configuration I was trying to do this is the configuration:
You can try it on the codepen
data = [{
type: 'scatterpolar',
mode : "markers+lines",
line : {
color : "rgb(158, 27, 66)",
width : "2",
dash : "solid",
shape : "linear"
},
r: [5, 1, 3, 2, 4, 3, 3, 2, 4, 3, 2, 3, 3, 2, 4, 2, 2],
theta: ['Tecnologia','Innovacion','Optimismo Digital', 'Transformador', 'Atracc. y desarrollo de talento', 'Referente', 'Etica y honestidad',
'Personas', 'Aprendizaje Continuo','Promocion del aprendizaje', 'Emprendedor', 'Escucha', 'Comunica y comparte', 'Mejora continua',
'Base tecnica y rigor', 'Logro', 'Crecimiento rentable' ],
fill: 'toself',
fillcolor: 'rgba(255, 0, 0, 0.6)',
marker : { color : [8, 8, 8, 2, 2, 6, 6, 6, 4, 4, 4, 5, 5, 5, 3, 3, 3 ],
colorscale : [
[0, '#38C041'], [0.125, '#DDD01B'], [0.25, '#c7e9b4'], [0.375, '#7fcdbb'], [0.5, '#41b6c4'], [0.625, '#1d91c0'], [0.75, '#225ea8'], [0.875, '#253494'],[1, '#081d58']
],
size : 10
}
}]
layout = {
polar: {
radialaxis: {
visible: true,
range: [0, 7]
}
},
showlegend: false,
width: 800,
height: 700,
margin:{
l : 0,
r : 0,
t : 100,
b : 0,
pad : 0,
autoexpand : true
}
}
I have created High chart to full fill my requirement as shown in attached Image and i have tried below code in fiddle
example code in fiddle is as follows
https://jsfiddle.net/vsLr07ak/
Below is my code
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'HISTORICAL NEWS SENTIMENT'
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: false
},
min: -100,
max: 100,
tickInterval: 10,
showLastdataLabel: true,
},
xAxis: {
categories: ['26. Nov', '24. Dec', '21. Jan', '18. Feb', '18. March']
},
credits: {
enabled: false
},
series: [{
name: null,
data: [15, 13, 14, 17, 12]
}, {
name: null,
data: [12, -12, -13, 21, 11]
}]
});
Html code is as
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js">.
</script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
but it display 2 bar for per month, I want it show as below attached image.
Can any one help me out?
and I want my chart as shown in image
Instead of category, you should use datetime xAxis type and define x values as timestamps:
series: [{
...,
data: [
[17227780000, 15],
[18523780000, 13],
[19819780000, 14],
[21115780000, 17],
[22411780000, 12],
[23707780000, 12],
[25003780000, -12],
[26299780000, -13],
[27595780000, 21],
[28891780000, 11]
]
}]
Live demo: https://jsfiddle.net/BlackLabel/83us07cx/
or use pointStart and pointInterval properties:
series: [{
pointStart: 17227780000,
pointInterval: 1000 * 60 * 60 * 24 * 15, // 15 days
name: null,
color: 'red',
negativeColor: 'blue',
data: [15, 13, 14, 17, 12, 12, -12, -13, 21, 11]
}]
Live demo: https://jsfiddle.net/BlackLabel/sqtha8xm/
API Reference:
https://api.highcharts.com/highcharts/series.column.data
https://api.highcharts.com/highcharts/series.column.pointStart
https://api.highcharts.com/highcharts/series.column.pointInterval
https://api.highcharts.com/highcharts/series.column.negativeColor
I'm new to json and flot. But I ve been asked to create a chart. Could someone explain to me why my code will not work?
$.getJSON('chart.json', function(graphData){
alert(graphData);
$.plot($('#graph-lines'), graphData, {
series: {
points: {
show: true,
radius: 15,
},
lines: {
show: true,
lineWidth: 6
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true,
highlightColor: "transparent"
},
xaxis: {
tickColor: 'transparent',
ticks: [[6,'Week 48'],[7,'Week 49'],[8,'Week 50'],[9,'Week 51'],[10,'Week 52']]
},
yaxis: {
min: 0,
max: 1000,
tickSize: 500
}
});
// Bars
$.plot($('#graph-bars'), graphData, {
series: {
bars: {
show: true,
barWidth: .9,
align: 'center'
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true
},
xaxis: {
tickColor: 'transparent',
tickDecimals: 2
},
yaxis: {
tickSize: 1000
}
});
});
From what I ve learned so far is that jquery $.getJSON('chart.json', function(graphData) should retrieve the json file. and $.plot($('#graph-lines'), graphData,{}) should parse it.
This is my JSON file:
{
data: [ [6, 520], [7, 600], [8, 850], [9, 900], [10, 300] ],
color: '#F02626',
points: { fillColor: '#F02626', radius: 6 },
lines: { fillColor: '#CCF8FF'}
}, {
data: [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ],
color: '#26F041',
points: { radius: 10, fillColor: '#26F041' }
}, {
data: [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ],
color: '#20AEFA',
points: { radius: 6, fillColor: '#20AEFA'}
}
So, I need all the properties in JSON (data, color and point) as they will override the default and give each line or bar a different color.
I got it working before. I had the json written inside .js but I want to call it from an external JSON file.
Im not looking for an answer "Try this". I would like to understand what I'm doing wrong and why, so I can learn why it works the way it does.
Thank you in advance.
it's simple your json file is not valid
it should be like this
[
{
"data": [ [6, 520], [7, 600], [8, 850], [9, 900], [10, 300] ],
"color": "#F02626",
"points": { "fillColor": "#F02626", "radius": 6 },
"lines": { "fillColor": "#CCF8FF"}
},
{
"data": [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ],
"color": "#26F041",
"points": { "radius": 10, "fillColor": "#26F041" }
},
{
"data": [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ],
"color": "#20AEFA",
"points": { "radius": 6, "fillColor": "#20AEFA"}
}
]