https://zingchart.com

JavaScript Charts in one powerful declarative library | ZingChartJavaScript Charts in one powerful declarative library. Simple for developers.JavaScript Charts in one powerful declarative library | ZingChart Features Gallery Browse by Chart TypeBrowse by FeaturesBrowse by Use Case Docs Support Pricing Contact v2.9.15 Download Search ZingSoft Studio Sign Up Log In Dashboard Account Logout See what ZingChart's 50+ built-in chart types & modules can do for your data visualization projects. Create animated & interactive charts with hundreds of thousands of data records using the ZingChart JavaScript charting library. Try for free or See our pricing See More Demos Create a ZingChart using a simple to understand JSON configuration Basics Mixed Chart 3D Animation Labels Markers Scales Zooming Choose from Over 50 Built-In Chart Types and Modules View all chart Types area 3D area bar 3D bar 100% Stacked box plot bubble pie bubble bubble pack bullet calendar chord depth flame funnel gauge grid Heat map Heatmap Plugin maps line 3D line mixed nested pie Network Diagrams pareto pictograph pie 3D pie pop. pyramids radar range rankflow scatter scatter-heatmap scorecard stock stream tile map tree treemaps variwide vector plot venn diagrams violin waterfall word cloud ZingChart is Packed with Helpful Features View Features Scalable, Big Data Optimized for data sets ranging from 10,000 to 100,000 records. Built-In Interactivity High-performance real-time charts with interactive, drill-down features. API Events and Methods Make your charts come alive by modifying them with your custom code. Dependency-Free 100% dependency-free: No need for third-party frameworks or plugins. ZingChart Integrates with Popular JavaScript Development Stacks JavaScript ZingChart is dependency free and pure JavaScript. Install via NPM npm install zingchart After downloading package locally, include the script using ES6 Modules: import {zingchart, ZC} from './zingchart/es6.js'; // Modules must be imported EXPLICITLY when using es6 version import './zingchart/modules-es6/zingchart-pareto.min.js'; For quickest download, use the ZingChart CDN: Add your chart element wrapper Include the library in your HTML document and then render your chart! View on GitHub More Details React Quickly create dynamic JavaScript charts with ZingChart and React. Install via NPM npm install zingchart-react Include zingchart lib and the component import 'zingchart/es6'; import ZingChart from 'zingchart-react'; class App extends Component { ... } Build a chart configuration class App extends Component { constructor(props) { super(props); this.state = { config: { type: 'bar', series: [{ values: [4,5,3,4,5,3,5,4,11] }] } } } ... } Create and render your chart class App extends Component { ... render() { return ( ); } ... View on GitHub More Details Angular ZingChart's Angular wrapper helps you create JavaScript charts with two-way data binding. Install via NPM npm install zingchart-angular Include the module in your module declaration file import { ZingchartAngularModule } from 'zingchart-angular'; @NgModule({ imports: [ ... ZingchartAngularModule, ], }) Define your chart configuration in your component config:zingchart.graphset = { type: 'line', series: [{ values: [3,6,4,6,4,6,4,6] }], }; Add your component to the markup View on GitHub More Details Vue Easily add charts in your Vue application with our component. Install via NPM npm install zingchart-vue Register the component and include zingchart in your app import 'zingchart/es6'; import Vue from 'vue'; import zingchartVue from 'zingchart-vue'; Vue.component('zingchart', zingchartVue); Add the component to your markup Define your chart configuration in your app export default { data() { return { type: 'line', series: [{ values: [43,23,54,54,39,47,38,59,39,49] }] } } } View on GitHub More Details Web Component Easily add charts in your application with our web component. Install via NPM npm install zingchart-web-component Import the generic zingchart component import ZingChart from 'zingchart-web-component'; customElements.define('zing-chart', ZingChart); OR Manually import each chart and register it as a web component import {Line} from 'zingchart-web-component/charts/ZCLine.js'; customElements.define('zc-line', Line); Add the component to your markup Or While everything can be configured via the data property, you can also fully configure ZingChart via child components View on GitHub More Details AngularJS ZingChart's AngularJS wrapper helps you create JavaScript charts with two-way data binding. Install via NPM npm install zingchart-angularjs Inject the directive into your application angular.module('myApp', ['zingchart-angularjs']); Configure your chart through a scope variable $scope.myJson = { type: 'line', series: [ { values: [54,23,34,23,43] }, { values: [10,15,16,20,40] } ] }; Insert the ZingChart-AngularJS directive into your application View on GitHub PHP Create interactive JavaScript charts all in PHP with ZingChart's PHP wrapper. Install via Composer composer require zingchart/php_wrapper Include the library require __DIR__ . '/vendor/autoload.php; Render your chart $zc = new ZC("myChart"); $zc->setChartType("bar"); $zc->setSeriesData([1,4,2,6,3]); $zc->render(); View on GitHub jQuery Easily create and modify JavaScript charts with ZingChart's jQuery wrapper. Include jQuery, ZingChart, and the jQuery wrapper Create a

with an ID

Create your chart inside the $(document).ready() function $(document).ready(function() { $('#myChart').zingchart({ data: { type: 'line', series: [{ values: [1,2,5,3,9,4] }] } }); }); View on GitHub Svelte Quickly create dynamic JavaScript charts with ZingChart and Svelte. Install via NPM npm install zingchart-svelte Include zingchart lib and the component import 'zingchart/es6'; import ZingChart from 'zingchart-svelte'; Build a chart configuration const config = { type: 'bar', series: [ { values: [4,5,3,4,5,3,5,4,11] } ] } Add your component to the markup View on GitHub More Details We've been trusted with advanced data-visualization solutions for worldwide organizations since 2008 We've Got Your Business Concerns Covered Pricing That Suits You Our prices fit a variety of use cases, from starting small to going big. Custom Development Need us to build a feature for you or build your project? We can do that! Support Available We offer advanced support options for sophisticated solutions. Consulting Services As experts in the data visualization space, we offer project consulting. Product News Current Version: v2.9.15 Released June 10, 2024 Features Added accessibility support for keyboard navigation and speech support Enable by setting the accessibility to true in zingchart.render() Bug Fixes Fixed bug with zooming on charts with fixedStep enabled Fixed issue with pie graph background image not being rendered Full Change Log Download ZingChart Made with Love in San Diego, California About the Company We created ZingChart because other JavaScript charting libraries didn’t suit our needs as developers and data-visualization professionals. 2105 Garnet Avenue San Diego, CA 92109 +1 (858) 490-5281 Product Features Gallery Docs Support Pricing Download Learn More About v2.9.15 Company Blog About Us Contact Legal Privacy Account Log In Sign Up Newsletter Sign‑up Sign Up Subscribed! Connect With Us Other Products © 2009 - 2020 ZingSoft, Inc.

en

en

1729145411

https://zingchart.com

¿Editar su sitio?

¿Qué estás haciendo?