jscharting / jscharting-vue Goto Github PK
View Code? Open in Web Editor NEWOfficial JSCharting Vue.js Plugin & Examples
Home Page: https://jscharting.com/
jscharting-vue's People
Contributors
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Stargazers
Watchers
jscharting-vue's Issues
Error with Vue3
I copied and pasted the example in the vue3 documentation and I keep getting:
Uncaught SyntaxError: The requested module '/node_modules/jscharting/dist/jscharting.js?v=c78523e5' does not provide an export named 'Chart' (at jscharting.vue:6:10)
<template>
<JSCharting :options="chartOptions" ></JSCharting>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import JSCharting, { JSC } from 'jscharting-vue';
export default defineComponent({
name: 'columnChart',
setup() {
const chartOptions = reactive({
type: 'horizontal column',
series: [
{
points: [
{ x: 'A', y: 50 },
{ x: 'B', y: 30 },
{ x: 'C', y: 50 }
]
}
]
} as JSC.JSCChartConfig);
return { chartOptions };
},
components: {
JSCharting
}
});
</script>
Quasar support
I have tested Apexcharts and Highcharts, and I am hoping to get JSCharting working. I get the following error with normal code, but even as simple as this. It should be failing because it can't find options.
Uncaught SyntaxError: ambiguous indirect export: Chart jscharting.vue:2:9
<template>
<JSCharting
ref="chartZilla"
class="columnChart"
:options="options"
/>
</template>
<script setup>
import JSCharting from 'jscharting-vue';
</script>
I am hoping to use the export server to create static images.
Cannot read property min of undefined
I am trying to integrate this graph with my data on a laravel backend. I am pulling the data in correct format from the demos / examples.
series: [
{
name: 'Series 1',
points: [{x: <timestamp>, y: <number>}, {x: <timestamp>, y: <number>}, {x: <timestamp>, y: <number>}]
},
{
name: 'Series 2',
points: [{x: <timestamp>, y: <number>}, {x: <timestamp>, y: <number>}, {x: <timestamp>, y: <number>}]
}
]
I have about 10 000 points that I am trying to load. The names pop up in the legend. But I get the error Uncaught TypeError: Cannot read property 'min' of undefined and it doesn't load any graph.
it's not working with latest vue3
with >= vue 3.2.36, above error occured.
How to use the licensed version
Hi,
how do I use the licensed version with the vue wrapper to remove the branding?
Thanks!
Chart as grid doesn't work with multiple charts in jscharting-vue but does when just using plain javascript
Issue
When using more than one chart on the same page, setting
grid: { enabled: true }
Only one of the chart displays a grid correctly when clicking on the "Grid" button.
When creating the exact same charts using pure js and html it works correctly.
Expected Behaviour
The grid behaviour should work for all charts on the page in vue, in the same way that it does for pure js.
Observed Behaviour
Only one of the grids works correctly. Only one of the charts works correctly, regardless of how many charts there are (I've gone up to 4).
Pure js
<!DOCTYPE html><html lang="en">
<head>
<title>Basic Donut Chart | JSCharting</title>
<meta http-equiv="content-type" content="text-html; charset=utf-8">
<script src="https://code.jscharting.com/latest/jscharting.js"></script>
<script type="text/javascript" src="https://code.jscharting.com/latest/modules/types.js"></script>
<style type="text/css"></style>
</head>
<body>
<div id="chartDiv" style="max-width: 450px;height: 360px;margin: 0px auto"></div>
<div id="columnDiv" style="max-width: 740px;height: 400px;margin: 0px auto">
</div>
<script type="text/javascript">
var chart = JSC.chart('chartDiv', {
debug: true,
grid: {
enabled: true,
},
legend: {
position: 'inside left bottom',
template: '%value {%percentOfTotal:n1}% %icon %name'
},
title_position: 'center',
defaultSeries_type: 'pieDonut',
defaultPoint_label_text: '<b>%name</b>',
title_label_text: 'Countries GDP',
yAxis: { label_text: 'GDP', formatString: 'n' },
series: [
{
name: 'Countries',
points: [
{ name: 'United States', y: 5452500 },
{ name: 'Canada', y: 786052 },
{ name: 'United Kingdom', y: 477338 },
{ name: 'Mexico', y: 155313 }
]
}
]
});
var secondChart = JSC.chart('columnDiv', {
debug: true,
grid: {
enabled: true,
},
type: 'column',
yAxis: {
scale_type: 'stacked',
label_text: 'Units Sold'
},
title_label_text: 'Acme Tool Sales',
xAxis_label_text: 'Quarter',
series: [
{
name: 'Saw',
id: 's1',
points: [
{ x: 'Q1', y: 230 },
{ x: 'Q2', y: 240 },
{ x: 'Q3', y: 267 },
{ x: 'Q4', y: 238 }
]
},
{
name: 'Hammer',
points: [
{ x: 'Q1', y: 325 },
{ x: 'Q2', y: 367 },
{ x: 'Q3', y: 382 },
{ x: 'Q4', y: 371 }
]
},
{
name: 'Grinder',
points: [
{ x: 'Q1', y: 285 },
{ x: 'Q2', y: 292 },
{ x: 'Q3', y: 267 },
{ x: 'Q4', y: 218 }
]
},
{
name: 'Drill',
points: [
{ x: 'Q1', y: 185 },
{ x: 'Q2', y: 192 },
{ x: 'Q3', y: 198 },
{ x: 'Q4', y: 248 }
]
}
]
});
</script>
</body>
</html>
Vue code
Can be found here: https://github.com/ltaylor2607/chart-test
This is a really fantastic feature and it would be great to be able to make use of it in Vue, so any help with this would be greatly appreciated.
Error loading resources locally: Unexpected token '<'
I used npm to install jscharting-vue and it was working perfectly. Then I edited my webpack config so that the resouces would be copied to a local folder to avoid using a CDN, as per the documentation.
However, now when I load a page with charts I get this error:
Uncaught SyntaxError: Unexpected token '<'
at pw (jscharting.js:84:1)
at success (jscharting.js:83:1)
at b.onreadystatechange (jscharting.js:85:1)
I have not changed anything other than using webpack to copy the resources to a local folder (I have confirmed they are indeed copied), and added the baseUrl to my main.js.
If anyone has any hints or ideas, please do let me know.
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.