Comments (21)
Bubble series require the highcharts-more
extension (see here to see what else "more" provides)
You should be able to include it by
import Highcharts from 'highcharts';
require('highcharts/highcharts-more')(Highcharts);
from react-jsx-highcharts.
Ok you can either assume the date
values, and add them as an XAxis category
<XAxis categories={["2008-7", "2008-6", "2008-5", "2008-4", "2008-3", "2008-2", "2008-1", "2007-12", "2007-11", "2007-10", "2007-9", "2007-8"]} />
Or use something like lodash.zip to combine the date
and value
arrays into a multidimensional array.
import zip from 'lodash/zip';
renderSVTValue ({ id, name, date, value }) {
const strId = `series-${id}`;
const data = zip(date, value); // Using lodash zip to create multidimensional array
return (
<AreaSplineSeries id={strId} name={name} color="#2fd0b5" data={data} key={strId} />
);
}
render () {
const data = this.state.data;
if (data.hasOwnProperty('svt') === false) return null; // Wait till data is fetched before rendering
return (
<HighchartsChart plotOptions={plotOptions}>
// redacted
{data.svt.map(this.renderSVTValue)}
// redacted
</HighchartsChart>
);
}
from react-jsx-highcharts.
Awesome! Its working. Thank you so much for the quick help :)
from react-jsx-highcharts.
Hi @whawker,
The bubble series is working fine but I want to create a dynamic bubble series. For e.g I want multiple bubbles but I am not sure how many bubbles will be created. That will depend on my selection of filters.
Is there a way we can create multiple/dyanmic bubble series with some loop or something depending on the JSON data passed to my chart?
Please help.
from react-jsx-highcharts.
Do you mean an unknown number of Bubbles in a single series? Or multiple Bubble series?
The add/remove example demonstrates how you could have an arbitrary number of series, if that helps?
from react-jsx-highcharts.
Unknown number of multiple Bubble series.
@whawker Below is the example of AreaSpline Series. In this as well, I want to create multiple Areaspline series depending on the JSON file which has number of categories(Skincare,Haircare etc).
I think I am making mistake in loop. Please help.
import React, { Component } from 'react';
import {
HighchartsChart, Chart, XAxis, YAxis, Tooltip, AreaSplineSeries
} from 'react-jsx-highcharts';
import axios from 'axios';
import Dropdown from './dropdowns';
class SearchVolumeTrends extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
axios.post('some url', {
categories: 'Skincare - pharma',
sub_categories: 'Generic - Ingredients',
benefit: 'Anti-Aging',
behaviour: 'Informational - Generic',
brand_type: 'Non Brand'
})
.then(response => {
this.setState({
data: response.data.data
});
})
.catch(error => {
console.log('Error fetching and parsing data', error);
});
}
renderSVTValue() {
return this.state.data.map(data => (
<AreaSplineSeries id="Volume" name="Volume" color="#2fd0b5" data={data.svt} />
));
}
render() {
const plotOptions = {
series: {
fillOpacity: 0.5,
marker:{
enabled: false
}
}
};
return (
<div className="chartApp">
<HighchartsChart plotOptions={plotOptions} >
<Chart />
<XAxis name="Month" gridLineWidth="1" gridLineDashStyle="ShortDash">
<XAxis.Title>Year-Month</XAxis.Title>
</XAxis>
<YAxis id="number" gridLineWidth="0" startOnTick="false">
<YAxis.Title>Search Volume</YAxis.Title>
{this.renderSVTValue()}
</YAxis>
<Tooltip shared backgroundColor="white" shadow={false}></Tooltip>
</HighchartsChart>
</div>
);
}
}
export default SearchVolumeTrends;
from react-jsx-highcharts.
It's hard to say exactly, because I don't know the shape of the JSON being returned. But there are a few issues here,
Firstly renderSVTValue
should be bound to this
in you constructor function. example
Secondly renderSVTValue
is returning an array, which I don't think will work in React v15, you need to do the loop in the render
function, and have renderSVTValue
return a single component.
Lastly in the code you posted above, every AreaSplineSeries
is rendered with the same id
prop, but React JSX Highcharts needs each series to have a unique ID.
This probably wont work perfectly, because I'm guessing at the shape of your JSON data. But something along the lines of...
renderSVTValue ({ somePropertyUniqueToTheSeries, svt }) {
return (
<AreaSplineSeries id={somePropertyUniqueToTheSeries} name="Volume" color="#2fd0b5" data={svt} key={somePropertyUniqueToTheSeries} />
);
}
render () {
return (
<HighchartsChart plotOptions={plotOptions}>
// redacted
{this.state.data.map(this.renderSVTValue)}
// redacted
</HighchartsChart>
);
}
from react-jsx-highcharts.
Ohk great. Thanks, that makes sense.
Just sending you the JSON file incase you can tell me if I am doing anything wrong.
from react-jsx-highcharts.
JSON DATA:
{
"data": {
"svt": [{
"id": 0,
"name": "Face Cream",
"value": [216300, 319270, 377930, 345060, 389510, 351560, 366510, 358180, 345020, 342740, 302060, 246690],
"date": ["2017-7", "2017-6", "2017-5", "2017-4", "2017-3", "2017-2", "2017-1", "2016-12", "2016-11", "2016-10", "2016-9", "2016-8"]
}, {
"id": 1,
"name": "Generic",
"value": [146660, 177460, 217190, 226920, 225800, 177670, 211120, 200140, 198080, 182360, 183560, 157610],
"date": ["2016-7", "2016-6", "2016-5", "2016-4", "2016-3", "2016-2", "2016-1", "2015-12", "2015-11", "2015-10", "2015-9", "2015-8"]
}, {
"id": 2,
"name": "Generic - Ingredients",
"value": [127300, 154480, 164590, 150640, 186970, 160870, 165900, 135510, 151030, 148480, 152260, 126560],
"date": ["2015-7", "2015-6", "2015-5", "2015-4", "2015-3", "2015-2", "2015-1", "2014-12", "2014-11", "2014-10", "2014-9", "2014-8"]
}, {
"id": 3,
"name": "Mask",
"value": [28680, 30510, 35300, 41490, 49220, 48740, 51610, 43520, 50960, 47730, 38450, 30030],
"date": ["2014-7", "2014-6", "2014-5", "2014-4", "2014-3", "2014-2", "2014-1", "2013-12", "2013-11", "2013-10", "2013-9", "2013-8"]
}, {
"id": 4,
"name": "Body Cream",
"value": [52370, 66540, 51300, 35880, 30490, 19340, 21140, 17700, 14780, 13850, 18280, 31070],
"date": ["2013-7", "2013-6", "2013-5", "2013-4", "2013-3", "2013-2", "2013-1", "2012-12", "2012-11", "2012-10", "2012-9", "2012-8"]
}, {
"id": 5,
"name": "Cream",
"value": [32630, 45200, 33930, 20550, 18500, 12880, 12780, 12160, 11950, 11630, 11210, 18080],
"date": ["2012-7", "2012-6", "2012-5", "2012-4", "2012-3", "2012-2", "2012-1", "2011-12", "2011-11", "2011-10", "2011-9", "2011-8"]
}, {
"id": 6,
"name": "Eye Cream",
"value": [9580, 11520, 18220, 20490, 25990, 23910, 28140, 21930, 20440, 19020, 14260, 11300],
"date": ["2011-7", "2011-6", "2011-5", "2011-4", "2011-3", "2011-2", "2011-1", "2010-12", "2010-11", "2010-10", "2010-9", "2010-8"]
}, {
"id": 7,
"name": "Serum",
"value": [13630, 12520, 15150, 16740, 20600, 18400, 18720, 16050, 17130, 16700, 15420, 14400],
"date": ["2010-7", "2010-6", "2010-5", "2010-4", "2010-3", "2010-2", "2010-1", "2009-12", "2009-11", "2009-10", "2009-9", "2009-8"]
}, {
"id": 8,
"name": "Cream - Ingredients",
"value": [15400, 15200, 20160, 18410, 20350, 15200, 19000, 15110, 13900, 14370, 14810, 14460],
"date": ["2009-7", "2009-6", "2009-5", "2009-4", "2009-3", "2009-2", "2009-1", "2008-12", "2008-11", "2008-10", "2008-9", "2008-8"]
}, {
"id": 9,
"name": "Body Scrub",
"value": [20860, 20960, 20640, 15410, 15290, 11890, 12460, 12450, 12590, 10870, 15140, 17070],
"date": ["2008-7", "2008-6", "2008-5", "2008-4", "2008-3", "2008-2", "2008-1", "2007-12", "2007-11", "2007-10", "2007-9", "2007-8"]
}]
},
"status": "OK",
"msg": "No error"
}
from react-jsx-highcharts.
Also, closing this as there is not actually an issue to be fixed here.
from react-jsx-highcharts.
Amazing. Thank you very much @whawker. It worked. Appreciate it 👍
from react-jsx-highcharts.
Hi @whawker,
One more query. Sorry.
So I want my categories(date) also for X axis from JSON file. I tried following code referring your code. But i am not sure how to add it is a category attribute.
renderTrendingDate({ date }) {
return(
<XAxis categories={date}></XAxis>
);
}
render() {
const trendingDate = this.state.data;
if (trendingDate.hasOwnProperty('svt') === false) return null; // Wait till data is fetched before rendering
return (
<div className="chartApp">
<HighchartsChart plotOptions={plotOptions}>
<Chart />
<XAxis categories={trendingDate.svt.map(this.renderTrendingDate)}>
<XAxis.Title>Year-Month</XAxis.Title>
</XAxis>
<YAxis id="number">
<YAxis.Title>Trend Production</YAxis.Title>
{data.svt.map(this.renderTrendingValue)}
</YAxis>
</HighchartsChart>
</div>
);
}
from react-jsx-highcharts.
You don't need to render any additional XAxis components for the categories
attribute, it just expects an array as a prop value.
Something like:
import uniq from 'lodash/uniq';
getDateCategories (svtData) {
const allDates = svtData.reduce((dates, svt) => {
return dates.concat(svt.date); // Combine all svt.date arrays into single array
}, []);
return uniq(allDates.sort()); // Sort combined dates and remove duplicates.
}
render() {
const trendingDate = this.state.data;
if (trendingDate.hasOwnProperty('svt') === false) return null; // Wait till data is fetched before rendering
const categories = this.getDateCategories(trendingData.svt);
return (
<div className="chartApp">
<HighchartsChart plotOptions={plotOptions}>
<Chart />
<XAxis type="category" categories={categories}>
<XAxis.Title>Year-Month</XAxis.Title>
</XAxis>
<YAxis id="number">
<YAxis.Title>Trend Production</YAxis.Title>
{data.svt.map(this.renderTrendingValue)}
</YAxis>
</HighchartsChart>
</div>
);
}
from react-jsx-highcharts.
Can't thank you enough. I tried to make component with XAxis and that worked too. But your way is just perfect. 👍
from react-jsx-highcharts.
Hi @whawker, just wanted to ask you what if I have categories(names) in XAxis and not dates. The JSON looks like below:
{"data":{"svt":[{"id":0,"name":"Purchase","value":5810110,"date":"2016-8"},{"id":1,"name":"Informational - Generic","value":2722980,"date":"2016-8"},{"id":2,"name":"Consideration - Product","value":1108180,"date":"2016-8"},{"id":3,"name":"Informational - Product","value":917530,"date":"2016-8"},{"id":4,"name":"Consideration - How to","value":172570,"date":"2016-8"},{"id":5,"name":"Consideration - Price","value":170840,"date":"2016-8"},{"id":6,"name":"Consideration - Generic","value":137800,"date":"2016-8"},{"id":7,"name":"Informational - How to","value":69230,"date":"2016-8"}]},"status":"OK","msg":"No error"}
This is the below code you had shared earlier. I tried to tweak it as per the requirement but not sure how to loop inside attribute.
getDateCategories (behName) {
const allNames = behName.reduce((name, svt) => {
return name.concat(svt.name); // Combine all svt.date arrays into single array
}, []);
// return uniq(allNames.sort()); // Sort combined name and remove duplicates.
}
render() {
const behaviour = this.state.data;
if (behaviour.hasOwnProperty('svt') === false) return null; // Wait till data is fetched before rendering
const categories = this.getDateCategories(behaviour.svt);
return (
<div className="chartApp">
<HighchartsChart plotOptions={plotOptions}>
<Chart />
<XAxis name="Month" type="category" categories={categories}>
<XAxis.Title>Year-Month</XAxis.Title>
</XAxis>
<YAxis id="number">
<YAxis.Title>Top 10 Behaviors</YAxis.Title>
{data.svt.map(this.renderBehValue)}
</YAxis>
<Tooltip shared backgroundColor="white" shadow={false}></Tooltip>
</HighchartsChart>
</div>
);
}
Could you please help?
from react-jsx-highcharts.
The line // return uniq(allNames.sort()); // Sort combined name and remove duplicates.
is commented out?
from react-jsx-highcharts.
Yes, I had commented it for this example(which doesnt have date on xAxis and has categories instead) considering i don't need any sorting or unique values.
from react-jsx-highcharts.
Yes, but you still need to return something from the function...
getDateCategories (behName) {
const allNames = behName.reduce((name, svt) => {
return name.concat(svt.name); // Combine all svt.date arrays into single array
}, []);
return allNames; // Otherwise the function returns undefined
}
from react-jsx-highcharts.
This is showing me only one category i.e the first category "Purchase" from my JSON. How do I make a loop or show all the categories on XAxis?
from react-jsx-highcharts.
from react-jsx-highcharts.
Hi @whawker,
Could you please help me with the above issue? I tried working around the code and removed the below code as I don't need any sorting or reducing.
getDateCategories (behName) {
const allNames = behName.reduce((name, svt) => {
return name.concat(svt.name); // Combine all svt.date arrays into single array
}, []);
return allNames; // Otherwise the function returns undefined
}
I tried the below code:
getNames({name}){
const nameValue = name;
return(
nameValue
);
}
and in render
const behaviour = this.state.data;
console.log(behaviour);
if (behaviour.hasOwnProperty('svt') === false) return null; // Wait till data is fetched before rendering
const categories = this.getNames(behaviour.svt);
Could you please check?
from react-jsx-highcharts.
Related Issues (20)
- TypeScript type for react-jsx-highmaps HOT 6
- Bug When Rendering Chart in Test HOT 2
- Add ColorAxis component causes error in highcharts.js HOT 2
- I would like to know the x-axis plot band widths dynamically with events redraw and load HOT 6
- Vertical zoom navigator
- Version v5 alpha feedback and issues HOT 13
- Cannot read properties of undefined (reading 'forExport') in Next HOT 3
- Setting draggableY to plotOptions not working correctly HOT 2
- React Native support
- Using canvas or SVG to draw on a Chart HOT 2
- Enabled not working with plotOptions using Highcharts HOT 2
- Change the range of the chart from the code HOT 1
- Extending HIghcharts with addHighchartsMore causes error HOT 1
- `ordinal` does not work for X axis. HOT 2
- How to use custom highchart colors cssNames?
- Ability to export a graph HOT 6
- Chart prop 'zoomType' not working with Highcharts 10.2.1 HOT 4
- Chart updates without animation if zones is provided on a series
- Show and hide series with costume buttons ?
- <LineSeries data={values} /> to have multiple dashStyle in single series HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-jsx-highcharts.