I'm new to flot. I have this bar chart:
and here is the code I used for it:
$.getJSON('chartBar.json', function(graphDataBar){
$.plot($('#graph-bars'), graphDataBar, {
series: {
bars: {
show: true,
barWidth: .1,
align: 'right'
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true
},
xaxis: {
tickColor: 'transparent',
ticks: [[6,'Week 48'],[7,'Week 49'],[8,'Week 50'],[9,'Week 51'],[10,'Week 52']],
min: 5.5,
max: 10.5,
mode: 'time',
timeformat: "%b %d",
minTickSize: [1, "day"],
tickSize: [1, "day"],
autoscaleMargin: .10
},
yaxis: {
tickSize: 5
}
});
I ve tried to use the properties inside x-axis but nothing seems to help.
I know there is a way to do it, I ve seen examples such as This one.
But it doesnt seem to work.
What Im trying to succeed here is this
As well I ve seen other sample on Stackoverflow like This
But it still didnt work out. Im not sure if I see this the wrong way, or if I need to use the timestamp in order to make it work, but I do it the wrong way.
Could anyone explain to me how the solution would work? I would like to understand it for future Bar Charts
Thank you in advance
I've made an assumption that the JSON data is the same as in your other question here so apologies if this is not the case.
I've created a Fiddle here that demonstrates the "non stacked bars" using the following JSON data:
[
{
"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"}
}
]
This uses the orderBars plugin. The key to getting the bars to appear side by side (rather than vertically) is to set the series.bars.order attribute to 1:
series: {
bars: {
...
order: 1
}
},
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 have embedded line chart from chart JS in vue js project. However my chart is too big for my page. How can I make it appear small and compact in my webpage? This is the first time I am adding charts to vue js. Any advice or tips will be really helpful for me. Thanks.
Here is my code.
<script>
import { Line , mixins } from 'vue-chartjs';
import Chart from "chart.js";
export default {
extends: Line,
mixins: [mixins.reactiveProp],
props: ["options"],
data: () => ({
chartdata: {
labels: ["Oct 2021", "Nov2021", "Nov2021", "Nov2021", "Nov2021","Nov2021","Nov2021","Nov2021"],
datasets: [
{
data: [0, 3.2, 0.2,5.9, 7.9, 6, 5.5, 4.2, 4.2, 3.8,3.8,3.8,2],
label: "Critical",
backgroundColor: "rgb(226,135,67)",
borderColor: "#e28743",
borderWidth: 3,
},
{
data: [0, 6.3, 0.5, 6, 7.9, 9, 9.8, 10, 11.3, 15],
label: "High",
backgroundColor: "rgb(234,182,118)",
borderColor: "#eab676",
borderWidth: 3,
},
{
data: [0, 0, 0, 0, 0, 0, 0.1, 0.1, 0, 0],
label: "Low",
backgroundColor: "rgb(38, 177, 212)",
borderColor: "#26b1d4",
borderWidth: 3,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
lineTension: 1,
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
padding:20,
}
}
]
}
},
}),
mounted() {
window.dispatchEvent(new Event("resize"));
this.renderChart(
this.chartdata,
this.options,
// this.textCenter(" Hello world ")
);
// this.renderChart(this.chartdata, this.options)
},
};
</script>
Any advice or tips will be really helpful for me. Thanks.
You will need to wrap that Vue component in another component. In that other component you can set a height and with to the div your chart component is in.
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>
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"}
}
]
Is there any way that this chart is not drawn to scale?
http://forum.highcharts.com/resources/image/4227
I need every point occupies a separate row and evenly.
That is, in this graph, it should appear one line for each of the first 2 points of each series and the vertical distance between each should be the same as the distance between the lines below.
The series are dynamically loaded and the number of points each serie is variable.
http://jsfiddle.net/fpanci/yL6mw/
$(function () {
$(document).ready(function() {
$("#container").highcharts({
chart: {
inverted: true,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: ' ',
x: -20 //center
},
xAxis: {
minorGridLineColor: '#000000',
minorGridLineWidth: 1,
minorTickLength: 0,
minorTickInterval: 1,
tickInterval: 1,
labels: { enabled: true },
maxPadding: 0.05,
min: 0
},
yAxis: {
title: { text: ' ' },
plotLines: [{
value: 0,
width: 1,
color: '#C0C0C0'
}],
labels: { enabled: true },
minorGridLineWidth: 1,
minorTickLength: 0,
minorTickInterval: 20,
tickInterval: 20,
min: 0,
max: 100
},
exporting: { enabled: false },
tooltip: { enabled: false },
legend: { enabled: false },
series: [{
color: '#0000FF',
connectNulls: true,
data: [[0.2, 24.25], [0.5, 30.61], [1, 43.61], [2, 34.51], [3, 32.39], [4, 36.47], [5, 36.4], [6, null], [7, 24.68], [8, 37.79]]
},{
color: '#980000',
dashStyle: 'shortdot',
connectNulls: true,
data: [[0.2, 38], [0.5, 52], [1, 50], [2, null], [3, 32], [4, null], [5, 34], [6, null], [7, 25], [8, null]]
},{
color: '#38761D',
dashStyle: 'ShortDashDotDot',
connectNulls: true,
data: [[0.2, 20], [0.5, 27], [1, 35], [2, null], [3, 29], [4, null], [5, 30], [6, null], [7, 22], [8, null]]
}]
});
});
});
Thanks!
The data is plotting exactly where you've told it to.
Your first 2 x values in each data set are 0.2 and 0.5 - so that is where the points are plotted.
If you don't want them plotted that way, just remove the x values from the data, and they will plot in sequence.
Example:
http://jsfiddle.net/jlbriggs/yL6mw/1/
If you want to have the 0.2 and 0.5 as axis labels, but want them evenly spaced still, you'll need to use categories for your x axis.
Example:
http://jsfiddle.net/jlbriggs/yL6mw/2/